# Frappe Charts

GitHub-inspired simple and modern charts for the web

with zero dependencies.

Click or use arrow keys to navigate data points

###### Create a chart

      <!--HTML-->
      <div id="chart"></div>

      // Javascript
      let chart = new Chart( "#chart", { // or DOM element
        data: {
          labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
          "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],

          datasets: [
            {
              label: "Some Data", type: 'bar',
              values: [25, 40, 30, 35, 8, 52, 17, -4]
            },
            {
              label: "Another Set", type: 'bar',
              values: [25, 50, -10, 15, 18, 32, 27, 14]
            },
            {
              label: "Yet Another", type: 'line',
              values: [15, 20, -3, -15, 58, 12, -17, 37]
            }
          ],

          yMarkers: [{ label: "Marker", value: 70 }],
          yRegions: [{ label: "Region", start: -10, end: 50 }]
        },

        title: "My Awesome Chart",
        type: 'axis-mixed', // or 'bar', 'line', 'pie', 'percentage'
        height: 250,
        colors: ['purple', '#ffa3ef', 'red']
      });

###### Update Values

###### Plot Trends

###### Listen to state change

###### Europa

Semi-major-axis: 671034 km

Mass: 4800000 x 10^16 kg

Diameter: 3121.6 km

      ...
        isNavigable: 1, // Navigate across data points; default 0
      ...

      chart.parent.addEventListener('data-select', (e) => {
        update_moon_data(e.index); // e contains index and value of current datapoint
      });

###### And a Month-wise Heatmap

      let heatmap = new Chart({
        parent: "#heatmap",
        type: 'heatmap',
        height: 115,
        data: heatmapData,  // object with date/timestamp-value pairs

        discreteDomains: 1  // default: 0

        start: startDate,
                      // A Date object;
                      // default: today's date in past year
                      //          for an annual heatmap

        legendColors: ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'],
                      // Set of five incremental colors,
                      // beginning with a low-saturation color for zero data;
                      // default: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']

      });

###### Available options:

      ...
      {
        data: {
          labels: [],
          datasets: [],
          yRegions: [],
          yMarkers: []
        }
        title: '',
        colors: [],
        height: 200,

        tooltipOptions: {
          formatTooltipX: d => (d + '').toUpperCase(),
          formatTooltipY: d => d + ' pts',
        }

        // Axis charts
        isNavigable: 1,        // default: 0
        valuesOverPoints: 1,   // default: 0
        barOptions: {
          stacked: 1           // default: 0
        }

        lineOptions: {
          dotSize: 6,          // default: 4
          hideLine: 0,         // default: 0
          hideDots: 1,         // default: 0
          heatline: 1,         // default: 0
          regionFill: 1        // default: 0
        }

        axisOptions: {
          yAxisMode: 'span',   // Axis lines, default
          xAxisMode: 'tick',   // No axis lines, only short ticks
          xIsSeries: 1         // Allow skipping x values for space
                               // default: 0
        },

        // Pie/Percentage charts

        maxLegendPoints: 6,    // default: 20
        maxSlices: 10,         // default: 20

        // Heatmap

        discreteDomains: 1,    // default: 1
        start: startDate,      // Date object
        legendColors: []
      }
      ...

        // Updating values
        chart.update(data);

        // Axis charts:
        chart.addDataPoint(label, valueFromEachDataset, index)
        chart.removeDataPoint(index)
        chart.updateDataset(datasetValues, index)

###### Install

Install via npm

      npm install frappe-charts

And include it in your project

      import { Chart } from "frappe-charts"

... or include it directly in your HTML

      <script src="https://unpkg.com/frappe-charts@1.0.0"></script>

View on GitHub

Star

License: MIT

Project maintained by Frappe. Used in ERPNext. Read the blog post.

Data from the American Meteor Society, SILSO and NASA Open APIs