Back to post

Frappe Charts is a modern and responsive SVG charts plugin that supports line, bar, axis-mixed, pie, percentage, and heatmap chart. There are various types of options and you can use them accordingly as you need.

Features:

Install with npm

$ npm install frappe-charts

How to use it:

1. Include the Javascript frappe-charts.min.iife.js at the bottom of the web page.

<script src="path/to/frappe-charts.min.iife.js"></script>

2. Include the CSS frappe-charts.min.css in the header of the page.

<link rel="stylesheet" href="path/to/frappe-charts.min.css">

3. Add the basic HTML to the page.

<div id="chart"></div>

4. Initialize the plugin and we're ready to go. 

const data = {
    labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
        "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
    ],
    datasets: [
        {
            name: "Some Data", type: "bar",
            values: [25, 40, 30, 35, 8, 52, 17, -4]
        },
        {
            name: "Another Set", type: "line",
            values: [25, 50, -10, 15, 18, 32, 27, 14]
        }
    ]
}
const chart = new frappe.Chart("#chart", {  // or a DOM element,
    title: "My Awesome Chart",
    data: data,
    type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
    height: 450,
    colors: ['#7cd6fd', '#743ee2']
});

Plugin's default options:

Name Default Type Description
Container 
const chart = new Chart('#chart', options);
// or
const container = document.querySelector('#chart');
const chart = new Chart(container, options);
 The first parameter required by the Chart constructor is the container element. You can pass in a CSS Selector or a DOM Object.
Options 
const options = {
    data: {
        labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm", "12pm-3pm"],
        datasets: [
            {
                name: "Some Data", values: [25, 40, 30, 35, 8]
            },
            {
                name: "Another Set", values: [25, 50, -10, 15, 18]
            }
        ]
    }
}
const chart = new Chart(container, options);
 The second parameter required by the Chart constructor is the options object. The minimum required configuration is to pass data values, which itself requires an array of labels and an array of datasets.
data Required Properties: labels, datasets
Optional Properties: yMarkers, yRegions		 Object Contains an array of labels and an array of datasets, each a value for the 2-dimensional data points.
title '' String Add a title to the Chart.
type line
Values: line | bar | axis-mixed | pie | percentage | heatmap 		String Let the chart know what type to render.
colors ['light-blue', 'blue', 'violet', 'red', 'orange', 'yellow', 'green', 'light-green', 'purple', 'magenta', 'light-grey', 'dark-grey'] Array Set the colors to be used for each individual unit type, depending on the chart type.
height 240 Number Set the height of the chart in pixels.
axisOptions {} Object
xAxisMode and yAxisMode Default: span
Values: span | tick 		String Display axis points as short ticks or long spanning lines.
xIsSeries 0 Boolean The X axis (often the time axis) is usually continuous. That means we can reduce the redundancy of rendering every X label by setting xIsSeries to 1 and allowing only a few periodic ones.
TooltipOptions {} Object Customizing options for the format of the label and value displayed on hover tooltips.
# {} function
barOptions
barOptions {} Object Can be used to set various properties on bar plots.
spaceRatio Default:0.5
Min: 0
Max: 1 		Number In order to set the bar width, instead of defining it and the space between the bars independently, we simply define the ratio of the space between bars to the bar width. The chart then adjusts the actual size proportional to the chart container.
stacked 0 Boolean Renders multiple bar datasets in a stacked configuration, rather than the default adjacent.
lineOptions {} Object Can be used to set various properties on line plots, turn them into Area Charts and so on.
isNavigable 0 Boolean Makes the chart interactive with arrow keys and highlights the current active data point.
valuesOverPoints 0 Boolean To display data values over bars or dots in an axis graph.

Mixed Axis Chart

HTML structure

<div id="axis-mixed"></div>

Script

const data = {
    labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
        "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
    ],
    datasets: [
        {
            name: "Some Data",
            values: [25, 40, 30, 35, 8, 52, 17, -4],
            chartType: 'bar'
        },
        {
            name: "Another Set",
            values: [25, 50, -10, 15, 18, 32, 27, 14],
            chartType: 'line'
        }
    ]
}
const chart = new frappe.Chart("#axis-mixed", {
    title: "Mixed Axis Chart",
    data: data,
    type: 'axis-mixed',
    height: 450,
    colors: ['#7cd6fd', '#743ee2']
});

Pie Chart

HTML structure

<div id="pie-chart"></div>

Script

const data2 = {
    labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
        "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
    ],
    datasets: [
        {
            name: "Some Data",
            values: [25, 40, 30, 35, 8, 52, 17, -4],
        }
    ]
}
const chart2 = new frappe.Chart("#pie-chart", {
    title: "Pie Chart",
    data: data2,
    type: 'pie',
    height: 450,
    colors: ['#7cd6fd', '#743ee2']
});

Multiple Axis Chart

HTML structure

<div id="multiple-axis"></div>

Script

const data3 = {
    labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
        "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
    ],
    datasets: [
        {
            name: "Some Data",
            values: [25, 40, 30, 35, 8, 52, 17, -4]
        },
        {
            name: "Another Set",
            values: [25, 50, -10, 15, 18, 32, 27, 14]
        }
    ]
}
const chart3 = new frappe.Chart("#multiple-axis", {
    title: "Multiple Axis Chart",
    data: data3,
    type: 'axis-mixed',
    height: 450,
    colors: ['#7cd6fd', '#743ee2']
});

Percentage Chart

HTML structure

<div id="percentage-chart"></div>

Script

const data2 = {
    labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
        "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
    ],
    datasets: [
        {
            name: "Some Data",
            values: [25, 40, 30, 35, 8, 52, 17, -4],
        }
    ]
}
const chart4 = new frappe.Chart("#percentage-chart", {
    title: "Percentage Chart",
    data: data2,
    type: 'percentage',
    height: 450
});