DOCSEARCHbyAlgolia
Submit Docs

Frappe Charts

repository·master·Indexed 12 days ago

https://github.com/frappe/charts

A lightweight, zero-dependency JavaScript charting library designed for simplicity and responsiveness. It supports various chart types including bar, line, scatter, pie, percentage, heatmap, and axis-mixed. Version v1.6.3 provides a Chart class for translating value pairs into intuitive visual shapes with built-in support for SVG export.

Tokens
1.9K
Snippets
8
Records
9
Agent score
96%

What's inside Frappe Charts

  2. Import Frappe Charts into your project

    master

    Depending on your module system, you can import the Chart class and the required CSS.

    If using standard ES6 modules:

    import { Chart } from 'frappe-charts'
// or specifically from the ESM build
import { Chart } from 'frappe-charts/dist/frappe-charts.esm.js'
// import the required CSS
import 'frappe-charts/dist/frappe-charts.min.css'

    If you are not using a module bundler, you can include the UMD build directly in your HTML via a script tag:

    <script src="https://unpkg.com/frappe-charts@1.6.1/dist/frappe-charts.min.umd.js"></script>

  3. Create a chart with the Chart class

    master

    To render a chart, instantiate the Chart class by passing a CSS selector (or a DOM element) and a configuration object.

    The configuration object requires a data object containing labels and datasets. Each dataset in datasets should have a name, chartType, and values array.

    const data = {
    labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
        "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
    ],
    datasets: [
        {
            name: "Some Data", chartType: "bar",
            values: [25, 40, 30, 35, 8, 52, 17, -4]
        },
        {
            name: "Another Set", chartType: "line",
            values: [25, 50, -10, 15, 18, 32, 27, 14]
        }
    ]
}

// If using ES6 modules, use: new Chart('#chart', { ... })
// If using the UMD script, use: new frappe.Chart('#chart', { ... })
const chart = new frappe.Chart("#chart", {
    title: "My Awesome Chart",
    data: data,
    type: 'axis-mixed', // options: 'bar', 'line', 'scatter', 'pie', 'percentage', 'axis-mixed'
    height: 250,
    colors: ['#7cd6fd', '#743ee2']
})

  4. Supported chart types in Frappe Charts

    master

    Frappe Charts supports several chart types via the type option in the configuration object:

    • bar (Bar charts)
    • line (Line charts)
    • scatter (Scatter plots)
    • pie (Pie charts)
    • percentage (Percentage charts)
    • axis-mixed (Mixed axis charts)

    Additionally, individual datasets within the data.datasets array can specify their own chartType to allow for mixed-type visualizations.

  5. Use the Frappe Charts library

    master

    Frappe Charts is a library for creating beautiful, responsive, and interactive charts. The library is exported as a default object containing the core charting functionality, along with metadata like NAME and VERSION.

    To use it, import the default export from the package. The main entry point provides access to the Chart class (aliased via the default export) which is used to instantiate and manage charts.

    import FrappeCharts from 'frappe-charts';

// The library exports a default object containing the Chart functionality
// and metadata like NAME and VERSION.
console.log(FrappeCharts.NAME); // "Frappe Charts"
console.log(FrappeCharts.VERSION); // "1.6.2"

  6. Download chart data as a file with downloadFile()

    master

    The downloadFile function allows you to trigger a browser download of data formatted as an SVG file. It creates a Blob from the provided data, generates a temporary URL, and simulates a click on a hidden anchor element to initiate the download. The data is treated as image/svg+xml; charset=utf-8.

    // Example usage for downloading an SVG string
const svgData = '<svg>...</svg>';
const filename = 'my-chart.svg';

downloadFile(filename, [svgData]);

  7. Prepare SVG for export with prepareForExport()

    master

    The prepareForExport function prepares an SVG element for high-fidelity export (such as saving to a file). It performs the following steps:

    1. Clones the provided SVG element.
    2. Adds the chart-container class to the clone.
    3. Sets the necessary XML namespaces (xmlns and xmlns:xlink).
    4. Injects the internal Frappe Charts CSS (CSSTEXT) into a new <style> element at the beginning of the SVG.
    5. Wraps the result in a <div> and returns the inner HTML string.

    This ensures that the exported file contains all the styles required to render the chart correctly outside of the original web page.

    // Assuming 'svgElement' is a reference to the chart's SVG DOM node
const exportHtml = prepareForExport(svgElement);

// You can then use this HTML string with downloadFile
const blob = new Blob([exportHtml], { type: 'image/svg+xml; charset=utf-8' });
downloadFile('chart.svg', [exportHtml]);

  9. Default color schemes for different chart types

    master

    Frappe Charts uses different color palettes depending on the chart type. Most charts use a standard set of colors, while heatmaps use specific color gradients.

    Standard Colors

    Used by bar, line, pie, percentage, and donut charts. The default palette includes:

    • pink, blue, green, grey, red, yellow, purple, teal, cyan, orange

    Heatmap Color Gradients

    Heatmaps use a 5-step distribution. The default is HEATMAP_COLORS_GREEN, but other gradients are available:

    • Green Gradient (HEATMAP_COLORS_GREEN): ["#ebedf0", "#c6e48b", "#7bc96f", "#239a3b", "#196127"]
    • Blue Gradient (HEATMAP_COLORS_BLUE): ["#ebedf0", "#c0ddf9", "#73b3f3", "#3886e1", "#17459e"]
    • Yellow Gradient (HEATMAP_COLORS_YELLOW): ["#ebedf0", "#fdf436", "#ffc700", "#ff9100", "#06001c"]
    export const DEFAULT_COLORS = {
  bar: DEFAULT_CHART_COLORS,
  line: DEFAULT_CHART_COLORS,
  pie: DEFAULT_CHART_COLORS,
  percentage: DEFAULT_CHART_COLORS,
  heatmap: HEATMAP_COLORS_GREEN,
  donut: DEFAULT_CHART_COLORS,
};