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
• Donut/Pie chart
• Github inspired heatmap
• More…

Basic usage:

1. Install the Frappé Charts with NPM:

# NPM
$ npm install frappe-charts--save

2. Import the Frappé Charts library.

// ES Module
import { Chart } from "frappe-charts/dist/frappe-charts.min.esm"
// Browser
<script src="/dist/frappe-charts.min.iife.js"></script>
// OR
<script src="/dist/frappe-charts.min.iife.js"></script>

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

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

4. 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")
  }]
};

5. Draw a basic bar chart inside the container you created.

const chart = new frappe.Chart("#myChart", {
    title: "My Chart",
    data: myData
});

6. Change the chart type you prefer: line | bar | axis-mixed | pie | percentage | heatmap.

const chart = new frappe.Chart("#myChart", {
    title: "My Chart",
    data: myData,
    type: 'bar',
});

7. Available options.

const chart = new frappe.Chart("#myChart", {{
      // data
      data: {
        labels: [], // required
        datasets: [], // required
        yRegions: [],
        yMarkers: []
      },
      // chart title
      title: '',
      // colors
      colors: ['light-blue', 'blue', 'violet', 'red', 'orange', 'yellow', 'green', 'light-green', 'purple', 'magenta', 'light-grey', 'dark-grey'],
      // height
      height: 240,
      // enable/disable animation
      animate: 1,
      // truncates Legends to a fixed length
      truncateLegends: false,
      // tooltip options
      tooltipOptions: {
        formatTooltipX: d => (d + '').toUpperCase(),
        formatTooltipY: d => d + ' pts',
      },
      // Axis charts
      isNavigable: 0,
      valuesOverPoints: 0,
      // bar options
      barOptions: {
        spaceRatio: 0.5,
        stacked: 0,
      },
  
      // line options
      lineOptions: {
        dotSize: 4,
        hideLine: 0,
        hideDots: 0,
        heatline: 0,
        regionFill: 0,
      },
      // axis options
      axisOptions: {
        yAxisMode: 'span', // span | tick
        xAxisMode: 'tick', // span | tick
        xIsSeries: 0,
      },
      // Pie/Percentage/Donut charts
      maxLegendPoints: 20, 
      maxSlices: 20, 
      // Heatmap
      discreteDomains: 1,
      
});

Changelog:

05/25/2022

• Updated demo
• Updated doc

05/12/2022

• v1.6.3