Need help with charts?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

frappe
13.9K Stars 621 Forks MIT License 419 Commits 102 Opened issues

Description

Simple, responsive, modern SVG Charts with zero dependencies

Services available

!
?

Need anything else?

Contributors list

Frappe Charts

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

Explore Demos » Edit at CodeSandbox » Documentation »

Contents

Installation

Via NPM

Install via

npm
:

$ npm install frappe-charts

and include in your project:

js
import { Chart } from "frappe-charts"

Or include following for es-modules(eg:vuejs):

js
import { Chart } from 'frappe-charts/dist/frappe-charts.esm.js'
// import css
import 'frappe-charts/dist/frappe-charts.min.css'
or include within your HTML

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()
):
diff
- 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

License

This repository has been released under the MIT License


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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.