Frappé Charts

Simple, responsive, modern SVG Charts with zero dependencies

ChartingSVG
frappe/chartsfrappe.io/chartsfrappe-charts

README

Frappe Charts

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

Explore Demos » Edit at CodeSandbox » Documentation »


Contents

Installation
Usage
Contribute
License

Installation


Via NPM
Install via [npm](https://www.npmjs.com/get-npm):

  1. ```sh
  2. $ npm install frappe-charts
  3. ```

and include in your project:
  1. ``` js
  2. import { Chart } from "frappe-charts"
  3. ```

Or include following for es-modules(eg:vuejs):
  1. ``` js
  2. import { Chart } from 'frappe-charts/dist/frappe-charts.esm.js'
  3. // import css
  4. import 'frappe-charts/dist/frappe-charts.min.css'
  5. ```

or include within your HTML

  1. ``` html
  2. <script src="https://cdn.jsdelivr.net/npm/frappe-charts@1.6.1/dist/frappe-charts.min.umd.js"></script>
  3. <script src="https://unpkg.com/frappe-charts@1.6.1/dist/frappe-charts.min.umd.js"></script>
  4. ```

Usage

  1. ``` js
  2. const data = {
  3.     labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
  4.         "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
  5.     ],
  6.     datasets: [
  7.         {
  8.             name: "Some Data", chartType: "bar",
  9.             values: [25, 40, 30, 35, 8, 52, 17, -4]
  10.         },
  11.         {
  12.             name: "Another Set", chartType: "line",
  13.             values: [25, 50, -10, 15, 18, 32, 27, 14]
  14.         }
  15.     ]
  16. }

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

Or for es-modules (replace new frappe.Chart() with new Chart()):
  1. ```diff
  2. - const chart = new frappe.Chart("#chart", {
  3. + const chart = new Chart("#chart", {  // or a DOM element,
  4.                                     // new Chart() in case of ES6 module with above usage
  5.     title: "My Awesome Chart",
  6.     data: data,
  7.     type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
  8.     height: 250,
  9.     colors: ['#7cd6fd', '#743ee2']
  10. })
  11. ```


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.