1 | <div align="center">
|
2 | <img src="https://github.com/frappe/design/blob/master/logos/logo-2019/frappe-charts-logo.png" height="128">
|
3 | <a href="https://frappe.github.io/charts">
|
4 | <h2>Frappe Charts</h2>
|
5 | </a>
|
6 | <p align="center">
|
7 | <p>GitHub-inspired modern, intuitive and responsive charts with zero dependencies</p>
|
8 | <a href="https://frappe.github.io/charts">
|
9 | <b>Explore Demos » </b>
|
10 | </a>
|
11 | <a href="https://codepen.io/pratu16x7/pen/wjKBoq">
|
12 | <b> Edit at CodePen »</b>
|
13 | </a>
|
14 | </p>
|
15 | </div>
|
16 |
|
17 | <p align="center">
|
18 | <a href="https://travis-ci.org/frappe/charts">
|
19 | <img src="https://img.shields.io/travis/frappe/charts.svg?style=flat-square">
|
20 | </a>
|
21 | <a href="http://github.com/frappe/charts/tree/master/dist/js/frappe-charts.min.iife.js">
|
22 | <img src="http://img.badgesize.io/frappe/charts/master/dist/frappe-charts.min.iife.js.svg?compression=gzip">
|
23 | </a>
|
24 | <a href="https://travis-ci.org/frappe/charts">
|
25 | <img src="https://img.shields.io/travis/frappe/charts.svg?style=flat-square">
|
26 | </a>
|
27 | </p>
|
28 |
|
29 | <p align="center">
|
30 | <a href="https://frappe.github.io/charts">
|
31 | <img src=".github/example.gif">
|
32 | </a>
|
33 | </p>
|
34 |
|
35 | ### Contents
|
36 | * [Installation](#installation)
|
37 | * [Usage](#usage)
|
38 | * [Contribute](https://frappe.io/charts/docs/contributing)
|
39 | * [Updates](#updates)
|
40 | * [License](#license)
|
41 |
|
42 | #### Installation
|
43 | * Install via [`npm`](https://www.npmjs.com/get-npm):
|
44 |
|
45 | ```console
|
46 | $ npm install frappe-charts
|
47 | ```
|
48 |
|
49 | and include in your project:
|
50 | ```js
|
51 | import { Chart } from "frappe-charts"
|
52 | ```
|
53 |
|
54 | ...or include following for es-modules(eg:vuejs):
|
55 | ```js
|
56 | import { Chart } from 'frappe-charts/dist/frappe-charts.esm.js'
|
57 | // import css
|
58 | import 'frappe-charts/dist/frappe-charts.min.css'
|
59 | ```
|
60 |
|
61 | * ...or include within your HTML
|
62 |
|
63 | ```html
|
64 | <script src="https://cdn.jsdelivr.net/npm/frappe-charts@1.1.0/dist/frappe-charts.min.iife.js"></script>
|
65 | <!-- or -->
|
66 | <script src="https://unpkg.com/frappe-charts@1.1.0/dist/frappe-charts.min.iife.js"></script>
|
67 | ```
|
68 |
|
69 | #### Usage
|
70 | ```js
|
71 | const data = {
|
72 | labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
|
73 | "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
|
74 | ],
|
75 | datasets: [
|
76 | {
|
77 | name: "Some Data", type: "bar",
|
78 | values: [25, 40, 30, 35, 8, 52, 17, -4]
|
79 | },
|
80 | {
|
81 | name: "Another Set", type: "line",
|
82 | values: [25, 50, -10, 15, 18, 32, 27, 14]
|
83 | }
|
84 | ]
|
85 | }
|
86 |
|
87 | const chart = new frappe.Chart("#chart", { // or a DOM element,
|
88 | // new Chart() in case of ES6 module with above usage
|
89 | title: "My Awesome Chart",
|
90 | data: data,
|
91 | type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
|
92 | height: 250,
|
93 | colors: ['#7cd6fd', '#743ee2']
|
94 | })
|
95 | ```
|
96 |
|
97 | ...or for es-modules:
|
98 | ```js
|
99 |
|
100 | //replace new frappe.Chart() with new Chart()
|
101 | const chart = new Chart("#chart", { // or a DOM element,
|
102 | // new Chart() in case of ES6 module with above usage
|
103 | title: "My Awesome Chart",
|
104 | data: data,
|
105 | type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
|
106 | height: 250,
|
107 | colors: ['#7cd6fd', '#743ee2']
|
108 | })
|
109 | ```
|
110 |
|
111 |
|
112 | If you want to contribute:
|
113 |
|
114 | 1. Clone this repo.
|
115 | 2. `cd` into project directory
|
116 | 3. `npm install`
|
117 | 4. `npm run dev`
|
118 |
|
119 | #### Updates
|
120 |
|
121 | ##### v1.0.0
|
122 | - Major rewrite out. Some new features include:
|
123 | - Mixed type axis datasets
|
124 | - Stacked bar charts
|
125 | - Value over data points
|
126 | - Y Markers and regions
|
127 | - Dot size, Bar space size, and other options
|
128 | - Legend for axis charts
|
129 | - We would be looking to incorporate existing PRs and issues in the meantime.
|
130 |
|
131 | ##### Please read [#93](https://github.com/frappe/charts/issues/93) for v0.1.0 updates on rework and development.
|
132 |
|
133 | ##### v0.0.7
|
134 | - [Custom color values](https://github.com/frappe/charts/pull/71) for charts as hex codes. The API now takes an array of colors for all charts instead of a color for each dataset.
|
135 | - [@iamkdev's](https://github.com/iamkdev) blog on [usage with Angular](https://medium.com/@iamkdev/frappé-charts-with-angular-c9c5dd075d9f).
|
136 |
|
137 | ##### v0.0.5
|
138 | - More [flexible Y values](https://github.com/frappe/charts/commit/3de049c451194dcd8e61ff91ceeb998ce131c709): independent from exponent, minimum Y axis point for line graphs.
|
139 | - Customisable [Heatmap colors](https://github.com/frappe/charts/pull/53); check out the Halloween demo on the [website](https://frappe.github.io/charts) :D
|
140 | - Tooltip values can be [formatted](https://github.com/frappe/charts/commit/e3d9ed0eae14b65044dca0542cdd4d12af3f2b44).
|
141 |
|
142 | ##### v0.0.4
|
143 | - Build update: [Shipped](https://github.com/frappe/charts/pull/35) an ES6 module, along with the browser friendly IIFE.
|
144 |
|
145 | ##### v0.0.2
|
146 | - We have an animated [Pie Chart](https://github.com/frappe/charts/issues/29)! Thanks [@sheweichun](https://github.com/sheweichun).
|
147 | - [@tobiaslins](https://github.com/tobiaslins) contributed tweaks for his quest to make these easy to use with React. Check out his [repo](https://github.com/tobiaslins/frappe-charts-react-example) and updates at [#24](https://github.com/frappe/charts/issues/24) to learn more :)
|
148 | - A new logo.
|
149 |
|
150 | ##### v0.0.1
|
151 | - The very first version out, with animatable bars and lines, a percentage chart and a heatmap. GitHub-style.
|
152 |
|
153 | #### License
|
154 | This repository has been released under the [MIT License](LICENSE)
|
155 |
|
156 | ------------------
|
157 | Project maintained by [Frappe](https://frappe.io).
|
158 | Used in [ERPNext](https://erpnext.com). Read the [blog post](https://medium.com/@pratu16x7/so-we-decided-to-create-our-own-charts-a95cb5032c97).
|
159 |
|