mirror of https://github.com/frappe/charts.git
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.
|
3 months ago | |
---|---|---|
.github | 2 years ago | |
docs | 3 months ago | |
src | 3 months ago | |
.babelrc | 4 months ago | |
.eslintrc.json | 4 months ago | |
.gitignore | 3 months ago | |
.travis.yml | 4 months ago | |
LICENSE | 6 years ago | |
Makefile | 5 years ago | |
README.md | 1 year ago | |
package-lock.json | 4 months ago | |
package.json | 4 months ago | |
rollup.config.js | 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:
- Clone this repo.
cd
into project directorynpm install
npm run dev
License
This repository has been released under the MIT License
Project maintained by Frappe. Used in ERPNext. Read the blog post.