Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/frappe/charts

Simple, responsive, modern SVG Charts with zero dependencies
https://github.com/frappe/charts

chart graph hacktoberfest javascript svg svg-chart zero-dependency

Last synced: about 1 month ago
JSON representation

Simple, responsive, modern SVG Charts with zero dependencies

Lists

README 

        


    

    

        
Frappe Charts


    

    


        


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


        

            Explore Demos » 

        

        

             Edit at CodeSandbox »

        

        

            Documentation » 

        

    






    

        

    






    

        

    




### Contents

* [Installation](#installation)

* [Usage](#usage)

* [Contribute](https://frappe.io/charts/docs/contributing)

* [License](#license)



#### Installation



##### Via NPM

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



```sh

$ npm install frappe-charts

```



and include in your project:

```js

import { Chart } from "frappe-charts"

```



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

```js

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



```html



```



#### Usage

```js

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()`):

```diff

- 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 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)



------------------

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).