Modern, Open Source SVG Charts


GitHub-inspired simple and modern SVG charts for the web with zero dependencies.

Documentation

Click or use arrow keys to navigate data points

 let chart = new frappe.Chart( "#frost-chart", { // or DOM element data: { labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm", "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"], datasets: [ { name: "Some Data", chartType: 'bar', values: [25, 40, 30, 35, 8, 52, 17, -4] }, { name: "Another Set", chartType: 'bar', values: [25, 50, -10, 15, 18, 32, 27, 14] }, { name: "Yet Another", chartType: 'line', values: [15, 20, -3, -15, 58, 12, -17, 37] } ], yMarkers: [{ label: "Marker", value: 70, options: { labelPos: 'left' }}], yRegions: [{ label: "Region", start: -10, end: 50, options: { labelPos: 'right' }}] }, title: "My Awesome Chart", type: 'axis-mixed', // or 'bar', 'line', 'pie', 'percentage' height: 300, colors: ['purple', '#ffa3ef', 'light-blue'], tooltipOptions: { formatTooltipX: d => (d + '').toUpperCase(), formatTooltipY: d => d + ' pts', } }); chart.export(); 
 let heatmap = new frappe.Chart("#heatmap", { type: 'heatmap', title: "Monthly Distribution", data: { dataPoints: { '1524064033': 8, /* ... */}, // object with timestamp-value pairs start: startDate end: endDate // Date objects }, countLabel: 'Level', discreteDomains: 0 // default: 1 colors: ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'], // Set of five incremental colors, // preferably with a low-saturation color for zero data; // def: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'] }); 

See the Pen Frappe Charts Demo by Prateeksha Singh (@pratu16x7) on CodePen.

Install via npm

 npm install frappe-charts

And include it in your project

 import { Chart } from "frappe-charts"

Use as:

 new Chart(); // ES6 module // or new frappe.Chart(); // Browser

... or include it directly in your HTML

 <script src="https://unpkg.com/frappe-charts@1.1.0"></script>