Frappe Charts

Create a chart

  <!--HTML-->
<div id="chart"></div>

  // Javascript
let chart = new Chart( "#chart", { // or DOM element
data: {
  labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
  "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],

  datasets: [
	{
	  label: "Some Data", type: 'bar',
	  values: [25, 40, 30, 35, 8, 52, 17, -4]
	},
	{
	  label: "Another Set", type: 'bar',
	  values: [25, 50, -10, 15, 18, 32, 27, 14]
	},
	{
	  label: "Yet Another", type: 'line',
	  values: [15, 20, -3, -15, 58, 12, -17, 37]
	}
  ],

  yMarkers: [{ label: "Marker", value: 70 }],
  yRegions: [{ label: "Region", start: -10, end: 50 }]
},

title: "My Awesome Chart",
type: 'axis-mixed', // or 'bar', 'line', 'pie', 'percentage'
height: 250,
colors: ['purple', '#ffa3ef', 'red']
});

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

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 Chart("#heatmap", {
type: 'heatmap',
height: 115,
data: heatmapData,  // object with date/timestamp-value pairs

discreteDomains: 1  // default: 0

start: startDate,
			  // A Date object;
			  // default: today's date in past year
			  //          for an annual heatmap

legendColors: ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'],
			  // Set of five incremental colors,
			  // beginning with a low-saturation color for zero data;
			  // default: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']

});

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: {
  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

// Heatmap

discreteDomains: 1,    // default: 1
start: startDate,      // Date object
legendColors: []
}
...

// Updating values
chart.update(data);

// Axis charts:
chart.addDataPoint(label, valueFromEachDataset, index)
chart.removeDataPoint(index)
chart.updateDataset(datasetValues, index)

Install

Install via npm

  npm install frappe-charts

And include it in your project

  import Chart from "frappe-charts/dist/frappe-charts.min.esm"

... or include it directly in your HTML

  <script src="https://unpkg.com/[email protected]/dist/frappe-charts.min.iife.js"></script>