-
-
-
-
-
- Frappe Charts
-GitHub-inspired simple and modern SVG charts for the web
-with zero dependencies.
-
-
-
- Click or use arrow keys to navigate data points
-
-
-
-
-
-
-
-
-
+
+
+
+
-
-
-
-
- Create a chart
- <!--HTML-->
+
+ Frappe Charts
+ GitHub-inspired simple and modern SVG charts for the web
with zero dependencies.
+
+ Click or use arrow keys to navigate data points
+
+
+
+
+ Create a chart
+ <!--HTML-->
<div id="chart"></div>
- // Javascript
+ // Javascript
let chart = new frappe.Chart( "#chart", { // or DOM element
data: {
labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
@@ -87,130 +74,91 @@
chart.export();
-
-
-
-
-
-
-
-
-
+
+
+
+
-
-
- - Update Values -
- - -
-
+
-
- - Plot Trends -
- - - - -Update Values
+ + + +Plot Trends
+ -
-
-
-
-
- - Listen to state change -
-
-
-
-
-
-
-
-
-
-
- 
-
-
-
-
- Europa
-Semi-major-axis: 671034 km
-Mass: 4800000 x 10^16 kg
-Diameter: 3121.6 km
- ...
- isNavigable: 1, // Navigate across data points; default 0
+
+
+
+
+
+ Listen to state change
+
+
+
+
+
+
+
+
+
+ Europa
+ Semi-major-axis: 671034 km
+ Mass: 4800000 x 10^16 kg
+ Diameter: 3121.6 km
+
+
+
+ ...
+ isNavigable: 1, // Navigate across data points; default 0
...
chart.parent.addEventListener('data-select', (e) => {
update_moon_data(e.index); // e contains index and value of current datapoint
});
-
-
-
-
-
- - And a Month-wise Heatmap -
- - - - - let heatmap = new frappe.Chart("#heatmap", {
+
+
+
+
+ And a Month-wise Heatmap
+
+
+
+
+
+ let heatmap = new frappe.Chart("#heatmap", {
type: 'heatmap',
title: "Monthly Distribution",
data: {
@@ -222,141 +170,126 @@
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']
+ // 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. -
- -
-
-
-
-
- Available options:
-
- ...
- {
- data: {
- labels: [],
- datasets: [],
- yRegions: [],
- yMarkers: []
+
+
+
+ Demo
+
+ See the Pen Frappe Charts Demo
+ by Prateeksha Singh (@pratu16x7) on
+ CodePen.
+
+
+
+
+
+ Available options
+
+ ...
+ {
+ data: {
+ labels: [],
+ datasets: [],
+ yRegions: [],
+ yMarkers: []
+ }
+ title: '',
+ colors: [],
+ height: 200,
+
+ tooltipOptions: {
+ formatTooltipX: d => (d + '').toUpperCase(),
+ formatTooltipY: d => d + ' pts',
+ }
+
+ // Axis charts
+ isNavigable: 1, // default: 0
+ valuesOverPoints: 1, // default: 0
+ barOptions: {
+ spaceRatio: 1 // default: 0.5
+ stacked: 1 // default: 0
+ }
+
+ lineOptions: {
+ dotSize: 6, // default: 4
+ hideLine: 0, // default: 0
+ hideDots: 1, // default: 0
+ heatline: 1, // default: 0
+ regionFill: 1 // default: 0
+ }
+
+ axisOptions: {
+ yAxisMode: 'span', // Axis lines, default
+ xAxisMode: 'tick', // No axis lines, only short ticks
+ xIsSeries: 1 // Allow skipping x values for space
+ // default: 0
+ },
+
+ // Pie/Percentage charts
+ maxLegendPoints: 6, // default: 20
+ maxSlices: 10, // default: 20
+
+ // Percentage chart
+ barOptions: {
+ height: 15 // default: 20
+ depth: 5 // default: 2
+ }
+
+ // Heatmap
+ discreteDomains: 1, // default: 1
}
- title: '',
- colors: [],
- height: 200,
+ ...
- tooltipOptions: {
- formatTooltipX: d => (d + '').toUpperCase(),
- formatTooltipY: d => d + ' pts',
- }
-
- // Axis charts
- isNavigable: 1, // default: 0
- valuesOverPoints: 1, // default: 0
- barOptions: {
- spaceRatio: 1 // default: 0.5
- stacked: 1 // default: 0
- }
-
- lineOptions: {
- dotSize: 6, // default: 4
- hideLine: 0, // default: 0
- hideDots: 1, // default: 0
- heatline: 1, // default: 0
- regionFill: 1 // default: 0
- }
-
- axisOptions: {
- yAxisMode: 'span', // Axis lines, default
- xAxisMode: 'tick', // No axis lines, only short ticks
- xIsSeries: 1 // Allow skipping x values for space
- // default: 0
- },
+ // Updating values
+ chart.update(data);
- // Pie/Percentage charts
- maxLegendPoints: 6, // default: 20
- maxSlices: 10, // default: 20
+ // Axis charts:
+ chart.addDataPoint(label, valueFromEachDataset, index)
+ chart.removeDataPoint(index)
+ chart.updateDataset(datasetValues, index)
- // Percentage chart
- barOptions: {
- height: 15 // default: 20
- depth: 5 // default: 2
- }
+ // Exporting
+ chart.export();
- // Heatmap
- discreteDomains: 1, // default: 1
- }
- ...
+ // Unbind window-resize events
+ chart.unbindWindowEvents();
- // Updating values
- chart.update(data);
-
- // Axis charts:
- chart.addDataPoint(label, valueFromEachDataset, index)
- chart.removeDataPoint(index)
- chart.updateDataset(datasetValues, index)
-
- // Exporting
- chart.export();
-
- // Unbind window-resize events
- chart.unbindWindowEvents();
-
-
-
-
-
-
-
-
+
- Install
-Install via npm
- npm install frappe-chartsAnd include it in your project
- import { Chart } from "frappe-charts"... or include it directly in your HTML
- <script src="https://unpkg.com/frappe-charts@1.1.0"></script>Use as:
- new Chart(); // ES6 module
+Install
+Install via npm
+ npm install frappe-chartsAnd include it in your project
+ import { Chart } from "frappe-charts"... or include it directly in your HTML
+ <script src="https://unpkg.com/frappe-charts@1.1.0"></script>Use as:
+ new Chart(); // ES6 module
// or
new frappe.Chart(); // Browser
-
-
-
-
-
-
-