-
Notifications
You must be signed in to change notification settings - Fork 722
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
f333096
commit 6d05a89
Showing
1 changed file
with
46 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,43 +1,42 @@ | ||
<div align="center"> | ||
<img src="https://github.com/frappe/design/blob/master/logos/logo-2019/frappe-charts-logo.png" height="128"> | ||
<a href="https://frappe.github.io/charts"> | ||
<h2>Frappe Charts</h2> | ||
</a> | ||
<p align="center"> | ||
<p>GitHub-inspired modern, intuitive and responsive charts with zero dependencies</p> | ||
<a href="https://frappe.io/charts"> | ||
<b>Explore Demos » </b> | ||
</a> | ||
<a href="https://codesandbox.io/s/frappe-charts-demo-viqud"> | ||
<b> Edit at CodeSandbox »</b> | ||
</a> | ||
<a href="https://frappe.io/charts/docs"> | ||
<b>Documentation » </b> | ||
</a> | ||
</p> | ||
</div> | ||
<div align="center" markdown="1"> | ||
|
||
<img width="80" alt="charts-logo" src="https://github.com/user-attachments/assets/37b7ffaf-8354-48f2-8b9c-fa04fae0135b" /> | ||
|
||
# Frappe Charts | ||
**GitHub-inspired modern, intuitive and responsive charts with zero dependencies** | ||
|
||
<p align="center"> | ||
<a href="https://bundlephobia.com/result?p=frappe-charts"> | ||
<img src="https://img.shields.io/bundlephobia/minzip/frappe-charts"> | ||
</a> | ||
</p> | ||
|
||
<p align="center"> | ||
<a href="https://frappe.github.io/charts"> | ||
<img src=".github/example.gif"> | ||
</a> | ||
</p> | ||
<img src=".github/example.gif"> | ||
|
||
<div> | ||
|
||
[Explore Demos](https://frappe.io/charts) - [Edit at CodeSandbox](https://codesandbox.io/s/frappe-charts-demo-viqud) - [Documentation](https://frappe.io/charts/docs) | ||
|
||
</div> | ||
|
||
### Contents | ||
* [Installation](#installation) | ||
* [Usage](#usage) | ||
* [Contribute](https://frappe.io/charts/docs/contributing) | ||
* [License](#license) | ||
</div> | ||
|
||
## Frappe Charts | ||
Frappe Charts is a simple charting library with a focus on a simple API. The design is inspired by various charts you see on GitHub. | ||
|
||
### Motivation | ||
|
||
ERPNext needed a simple sales history graph for its user company master to help users track sales. While using c3.js for reports, the library didn’t align well with our product’s classic design. Existing JS libraries were either too complex or rigid in their structure and behavior. To address this, I decided to create a library for translating value pairs into relative shapes or positions, focusing on simplicity. | ||
|
||
### Key Features | ||
|
||
#### Installation | ||
- **Variety of chart types**: Frappe Charts supports various chart types, including Axis Charts, Area and Trends, Bar, Line, Pie, Percentage, Mixed Axis, and Heatmap. | ||
- **Annotations and tooltips**: Charts can be annotated with x and y markers, regions, and tooltips for enhanced data context and clarity. | ||
- **Dynamic data handling**: Add, remove, or update individual data points in place, or refresh the entire dataset to reflect changes. | ||
- **Customizable configurations**: Flexible options like colors, animations, and custom titles allow for a highly personalized chart experience. | ||
|
||
## Installation | ||
|
||
##### Via NPM | ||
Install via [`npm`](https://www.npmjs.com/get-npm): | ||
|
||
```sh | ||
|
@@ -56,15 +55,15 @@ import { Chart } from 'frappe-charts/dist/frappe-charts.esm.js' | |
import 'frappe-charts/dist/frappe-charts.min.css' | ||
``` | ||
|
||
##### or include within your HTML | ||
or include within your HTML | ||
|
||
```html | ||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/frappe-charts.min.umd.js"></script> | ||
<!-- or --> | ||
<script src="https://unpkg.com/[email protected]/dist/frappe-charts.min.umd.js"></script> | ||
``` | ||
|
||
#### Usage | ||
## Usage | ||
```js | ||
const data = { | ||
labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am", | ||
|
@@ -106,17 +105,26 @@ Or for es-modules (replace `new frappe.Chart()` with `new Chart()`): | |
``` | ||
|
||
|
||
If you want to contribute: | ||
## Contributing | ||
|
||
1. Clone this repo. | ||
2. `cd` into project directory | ||
3. `npm install` | ||
4. `npm i npm-run-all -D` (*optional --> might be required for some developers*) | ||
5. `npm run dev` | ||
|
||
#### License | ||
This repository has been released under the [MIT License](LICENSE) | ||
## Links | ||
|
||
- [Read the blog](https://medium.com/@pratu16x7/so-we-decided-to-create-our-own-charts-a95cb5032c97) | ||
|
||
|
||
------------------ | ||
Project maintained by [Frappe](https://frappe.io). | ||
Used in [ERPNext](https://erpnext.com). Read the [blog post](https://medium.com/@pratu16x7/so-we-decided-to-create-our-own-charts-a95cb5032c97). | ||
<br> | ||
<br> | ||
<div align="center"> | ||
<a href="https://frappe.io" target="_blank"> | ||
<picture> | ||
<source media="(prefers-color-scheme: dark)" srcset="https://frappe.io/files/Frappe-white.png"> | ||
<img src="https://frappe.io/files/Frappe-black.png" alt="Frappe Technologies" height="28"/> | ||
</picture> | ||
</a> | ||
</div> |