Author: | frappe |
---|---|
Views Total: | 213 views |
Official Page: | Go to website |
Last Update: | May 24, 2022 |
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
- Donut/Pie chart
- Github inspired heatmap
- More…
Basic usage:
1. Install the Frappé Charts with NPM:
# NPM $ npm install frappe-charts--save
2. Import the Frappé Charts library.
// ES Module import { Chart } from "frappe-charts/dist/frappe-charts.min.esm" // Browser <script src="/dist/frappe-charts.min.iife.js"></script> // OR <script src="/dist/frappe-charts.min.iife.js"></script>
3. Create a container in which you want to place your charts.
<div id="myChart"></div>
4. 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") }] };
5. Draw a basic bar chart inside the container you created.
const chart = new frappe.Chart("#myChart", { title: "My Chart", data: myData });
6. Change the chart type you prefer: line | bar | axis-mixed | pie | percentage | heatmap.
const chart = new frappe.Chart("#myChart", { title: "My Chart", data: myData, type: 'bar', });
7. Available options.
const chart = new frappe.Chart("#myChart", {{ // data data: { labels: [], // required datasets: [], // required yRegions: [], yMarkers: [] }, // chart title title: '', // colors colors: ['light-blue', 'blue', 'violet', 'red', 'orange', 'yellow', 'green', 'light-green', 'purple', 'magenta', 'light-grey', 'dark-grey'], // height height: 240, // enable/disable animation animate: 1, // truncates Legends to a fixed length truncateLegends: false, // tooltip options tooltipOptions: { formatTooltipX: d => (d + '').toUpperCase(), formatTooltipY: d => d + ' pts', }, // Axis charts isNavigable: 0, valuesOverPoints: 0, // bar options barOptions: { spaceRatio: 0.5, stacked: 0, }, // line options lineOptions: { dotSize: 4, hideLine: 0, hideDots: 0, heatline: 0, regionFill: 0, }, // axis options axisOptions: { yAxisMode: 'span', // span | tick xAxisMode: 'tick', // span | tick xIsSeries: 0, }, // Pie/Percentage/Donut charts maxLegendPoints: 20, maxSlices: 20, // Heatmap discreteDomains: 1, });
Changelog:
05/25/2022
- Updated demo
- Updated doc
05/12/2022
- v1.6.3