Dependency Free Modern & Responsive SVG Charts – Frappe Charts

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:

• It can be installed with NPM and YARN.
• Multiple datasets supported.
• Supports multiple axis and mixed axis accordingly.
• Supports line, bar, axis-mixed, pie, percentage, and heatmap chart.
• Very easy to use and customizeable.

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:

const chart = new Chart('#chart', options);
// or
const container = document.querySelector('#chart');
const chart = new Chart(container, 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);