Modern SVG Based Chart Library – Frappé Charts

Category: Chart & Graph , Javascript , Recommended | October 11, 2018
Author: frappe
Views Total: 1,246
Official Page: Go to website
Last Update: October 11, 2018
License: MIT

Preview:

Modern SVG Based Chart Library – Frappé Charts

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

You Might Be Interested In:

Leave a Reply