Simple, responsive, modern SVG Charts with zero dependencies
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
Go to file
Arjun Choudhary 34436a951d fix & chore: fix makeText(), cleaned unused imports 3 months ago
.github chore: update action 2 years ago
docs Merge commit '9f68f1ac5f7e8eb7a089d13b27d44fa0702d7931' 3 months ago
src fix & chore: fix makeText(), cleaned unused imports 3 months ago
.babelrc chore: formatting changes 4 months ago
.eslintrc.json chore: formatting changes 4 months ago
.gitignore Merge commit '9f68f1ac5f7e8eb7a089d13b27d44fa0702d7931' 3 months ago
.travis.yml chore: formatting changes 4 months ago
LICENSE Initial commit 6 years ago
Makefile [COV, TEST] Add coveralls 5 years ago
README.md chore: update README.md (#370) 1 year ago
package-lock.json fix: rollup scss fs.writeFile err handling 4 months ago
package.json chore: Updated & cleaned build dependencies 4 months ago
rollup.config.js chore: formatting changes 4 months ago

README.md

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:

import { Chart } from "frappe-charts"

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

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
<script src="https://cdn.jsdelivr.net/npm/frappe-charts@1.6.1/dist/frappe-charts.min.umd.js"></script>
<!-- or -->
<script src="https://unpkg.com/frappe-charts@1.6.1/dist/frappe-charts.min.umd.js"></script>

Usage

const data = {
    labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
        "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
    ],
    datasets: [
        {
            name: "Some Data", chartType: "bar",
            values: [25, 40, 30, 35, 8, 52, 17, -4]
        },
        {
            name: "Another Set", chartType: "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

License

This repository has been released under the MIT License


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