Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

frappe-charts

Package Overview
Dependencies
Maintainers
6
Versions
54
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

frappe-charts

https://frappe.github.io/charts

  • 2.0.0-rc22
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
15K
decreased by-6.63%
Maintainers
6
Weekly downloads
 
Created
Source

Frappe Charts

GitHub-inspired modern, intuitive and responsive charts with zero dependencies

Explore Demos » Edit at CodePen »

Contents

Installation
Usage
const data = {
    labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
        "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
    ],
    datasets: [
        {
            name: "Some Data", type: "bar",
            values: [25, 40, 30, 35, 8, 52, 17, -4]
        },
        {
            name: "Another Set", type: "line",
            values: [25, 50, -10, 15, 18, 32, 27, 14]
        }
    ]
}

const chart = new frappe.Chart("#chart", {  // or a DOM element,
                                            // new Chart() in case of ES6 module with above usage
    title: "My Awesome Chart",
    data: data,
    type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
    height: 250,
    colors: ['#7cd6fd', '#743ee2']
})

...or for es-modules (replace new frappe.Chart() with new Chart()):

- const chart = new frappe.Chart("#chart", {
+ const chart = new Chart("#chart", {  // or a DOM element,
                                    // new Chart() in case of ES6 module with above usage
    title: "My Awesome Chart",
    data: data,
    type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
    height: 250,
    colors: ['#7cd6fd', '#743ee2']
})

If you want to contribute:

  1. Clone this repo.
  2. cd into project directory
  3. npm install
  4. npm run dev
Updates
v1.0.0
  • Major rewrite out. Some new features include:
    • Mixed type axis datasets
    • Stacked bar charts
    • Value over data points
    • Y Markers and regions
    • Dot size, Bar space size, and other options
    • Legend for axis charts
  • We would be looking to incorporate existing PRs and issues in the meantime.
Please read #93 for v0.1.0 updates on rework and development.
v0.0.7
v0.0.5
v0.0.4
  • Build update: Shipped an ES6 module, along with the browser friendly IIFE.
v0.0.2
  • We have an animated Pie Chart! Thanks @sheweichun.
  • @tobiaslins contributed tweaks for his quest to make these easy to use with React. Check out his repo and updates at #24 to learn more :)
  • A new logo.
v0.0.1
  • The very first version out, with animatable bars and lines, a percentage chart and a heatmap. GitHub-style.
License

This repository has been released under the MIT License


Project maintained by Frappe. Used in ERPNext. Read the blog post.

Keywords

FAQs

Package last updated on 18 Jul 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc