--- redirect_to: "https://frappe.io/charts" ---

###### Create a chart

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

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

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

          yMarkers: [{ label: "Marker", value: 70,
            options: { labelPos: 'left' }}],
          yRegions: [{ label: "Region", start: -10, end: 50,
            options: { labelPos: 'right' }}]
        },

        title: "My Awesome Chart",
        type: 'axis-mixed', // or 'bar', 'line', 'pie', 'percentage', 'donut'
        height: 300,
        colors: ['purple', '#ffa3ef', 'light-blue'],

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

      chart.export();

###### 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 frappe.Chart("#heatmap", {
        type: 'heatmap',
        title: "Monthly Distribution",
        data: {
          dataPoints: {'1524064033': 8, /* ... */},
                            // object with timestamp-value pairs
          start: startDate
          end: endDate      // Date objects
        },
        countLabel: 'Level',
        discreteDomains: 0  // default: 1
        colors: ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'],
                    // Set of five incremental colors,
                    // preferably with a low-saturation color for zero data;
                    // def: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
      });

###### Demo

See the Pen Frappe Charts Demo by Prateeksha Singh (@pratu16x7) on CodePen.

###### 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: {
            spaceRatio: 1        // default: 0.5
            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/Donut charts
          maxLegendPoints: 6,    // default: 20
          maxSlices: 10,         // default: 20

          // Percentage chart
          barOptions: {
            height: 15           // default: 20
            depth: 5             // default: 2
          }

          // Heatmap
          discreteDomains: 1,    // default: 1
        }
        ...

      // Updating values
      chart.update(data);

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

      // Exporting
      chart.export();

      // Unbind window-resize events
      chart.unbindWindowEvents();

###### Install

Install via npm

      npm install frappe-charts

And include it in your project

      import { Chart } from "frappe-charts"

(for ES6+ import the ESModule from the dist folder)

      import { Chart } from "frappe-charts/dist/frappe-charts.esm.js"

... or include it directly in your HTML

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

Use as:

      new Chart();          // ES6 module
                            // or
      new frappe.Chart();   // Browser

View on GitHub

Star

License: MIT