Frappe Charts

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

Documentation

Click or use arrow keys to navigate data points

Make a Chart


  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();
		

Update Values

Plot Trends

A Month-wise Heatmap


  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']
  });
		

Demo

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

Install

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>
Get Started Download

View on GitHub

License: MIT