Modern SVG Based Chart Library – Frappé Charts

Preview:

Description:

Frappé Charts is a pure JavaScript library to render modern, responsive, animated charts with various types using the SVG element.

Chart type supported:

• Bar chart
• Axis chart
• Base chart
• Line chart
• Scatter chart
• Percentage chart
• Github inspired heatmap
• More…

Basic usage:

Install the Frappé Charts with NPM:

# NPM
$ npm install frappe-charts--save

Insert the frappe-charts.min.js script into the document.

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

Create a container in which you want to place your charts.

<div id="myChart"></div>

Define your data to be plotted in the chart.

let myData = {
  labels: ["2007", "2008", "2009", "2010", "2011", "2012",
    "2013", "2014", "2015", "2016", "2017"],
  datasets: [{
    "title": "Events",
    "color": "orange",
    "values": report_count_list,
    // "formatted": report_count_list.map(d => d + " reports")
  }]
};

Draw a basic bar chart inside the container you created.

let myChart = new Chart({
    parent: "#myChart",
    title: "My Chart",
    data: myData
});

Change the chart type you prefer.

let myChart = new Chart({
    parent: "#myChart",
    title: "My Chart",
    data: myData,
    type: 'bar', // or 'axis-mixed', 'line', 'scatter', 'pie', 'percentage'
});

Changelog:

10/11/2018

• v1.1.0