Author: | frappe |
---|---|
Views Total: | 841 views |
Official Page: | Go to website |
Last Update: | October 11, 2018 |
License: | MIT |
Preview:

Description:
Frappé Charts is a pure JavaScript library to render modern, responsive, animated charts with various types using the SVG element.
Chart type supported:
- Bar chart
- Axis chart
- Base chart
- Line chart
- Scatter chart
- Percentage chart
- Github inspired heatmap
- More…
Basic usage:
Install the Frappé Charts with NPM:
# NPM $ npm install frappe-charts--save
Insert the frappe-charts.min.js
script into the document.
<script src="frappe-charts.min.js"></script>
Create a container in which you want to place your charts.
<div id="myChart"></div>
Define your data to be plotted in the chart.
let myData = { labels: ["2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"], datasets: [{ "title": "Events", "color": "orange", "values": report_count_list, // "formatted": report_count_list.map(d => d + " reports") }] };
Draw a basic bar chart inside the container you created.
let myChart = new Chart({ parent: "#myChart", title: "My Chart", data: myData });
Change the chart type you prefer.
let myChart = new Chart({ parent: "#myChart", title: "My Chart", data: myData, type: 'bar', // or 'axis-mixed', 'line', 'scatter', 'pie', 'percentage' });
Changelog:
10/11/2018
- v1.1.0