Guide · Open source

How to use Frappe Charts: install and draw your first chart

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Frappe Charts is a JavaScript library that draws charts as SVG graphics in a web page. This guide shows you how to install it, create a chart from a small dataset, and update the data later. It is written for readers who are comfortable with basic web pages but are not charting specialists.

Frappe Chartsfrappe/charts · ★ 15.1k · MIT Install options & downloads

Quick start

1Install the package. Run npm install frappe-charts in your project folder. You need Node.js, or a web page where you can include a script tag.
2Import or include the library. Import Chart and the CSS file in a bundled project, or add the UMD script tag to your HTML page.
3Add a container element. Place a div with an id, such as chart, in the page where the chart should appear.
4Prepare the data object. Create labels and a datasets array, where each dataset has a name, a chartType and a list of values.
5Create the chart. Call new Chart with the container, data, type, height and colors options.
6Update the data. Use the chart's data methods to add, remove or update points, or refresh the whole dataset.

What Frappe Charts does and when to use it

Frappe Charts turns lists of values into bar, line, pie, area, percentage, mixed-axis and heatmap charts. Its API is designed to be simple, and its visual style is inspired by charts on GitHub.

It suits developers adding basic or medium-complexity charts to a web app, teams that want a small dependency-free option, and projects where charts need to resize across screen sizes.

Good fit: simple dashboards, sales history graphs, and charts that update in place.
Poor fit: 3D charts or highly specialized chart types, since the README lists only the types above.

Install Frappe Charts with npm

The recommended route is the npm package. You need Node.js, or a web page where you can include a script tag. Run the install command in your project folder.

npm install frappe-charts

Import the library and its CSS into your project

If you use a bundler or ES modules, import the Chart class and the stylesheet. The README also shows an ESM build path inside the dist folder.

import { Chart } from 'frappe-charts'
// or esm import
import { Chart } from 'frappe-charts/dist/frappe-charts.esm.js'
// import css
import 'frappe-charts/dist/frappe-charts.min.css'

Or include the script tag directly in HTML

If you are not using a build step, add the UMD script to your page. The README example loads version 1.6.1 from unpkg. After the script loads, the library is available as the global frappe object.

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

Create your first chart with data and options

A chart needs a data object with labels and datasets. Each dataset can have a name, a chartType and a list of values. Pass a container, either a CSS selector or a DOM element, along with the options. The README example creates a mixed chart with a bar series and a line series.

The type option accepts values such as 'axis-mixed', 'bar', 'line', 'scatter', 'pie' and 'percentage'. The height, title and colors options control appearance. Make sure the container element exists in the page before this code runs.

title sets the chart heading.
height sets the chart height in pixels.
colors takes a list of hex colour values, one per series.

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]
        }
    ]
}

const chart = new frappe.Chart("#chart", {  // or a DOM element,
                                            // new Chart() in case of ES6 module with above usage
    title: "My Awesome Chart",
    data: data,
    type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
    height: 250,
    colors: ['#7cd6fd', '#743ee2']
})

Add, remove and update data in place

The library can add, remove or update individual data points in place, or refresh the entire dataset. This lets you reflect new numbers without drawing a new chart. Use the data methods on the chart instance you created, and check the official documentation for the exact method names and arguments, since the README does not list them.

Keep a reference to the chart object returned by the constructor.
Annotations, tooltips and basic customization are also described in the README.

What people use it for

Showing a sales history graph for a company record, the use case that motivated the library according to its README.
Comparing bar and line series on one set of axes with the axis-mixed type.
Displaying percentage or pie breakdowns in a small dashboard widget.
Refreshing a chart's values as new numbers arrive, without rebuilding the page.

Frequently asked questions

Is Frappe Charts free to use?

Frappe Charts is released under the MIT licence, as stated in the project's listing. You can check the LICENSE file in the repository for the full terms before using it in a commercial project.

How do I install frappe-charts?

Run npm install frappe-charts in your project folder. If you do not use npm, you can include the UMD script from a CDN in your HTML page instead.

Does Frappe Charts have any dependencies?

The project describes itself as having zero dependencies. You need Node.js for the npm route, or a web page where you can include a script tag.

What chart types does Frappe Charts support?

The README lists Axis Charts, Area and Trends, Bar, Line, Pie, Percentage, Mixed Axis and Heatmap. The type option accepts values such as axis-mixed, bar, line, scatter, pie and percentage.

Can I update chart data after it is drawn?

Yes. The README says you can add, remove or update individual data points in place, or refresh the entire dataset. Check the documentation for the exact method names.

How does Frappe Charts compare with Chart.js or ApexCharts?

Comparable projects include Chart.js, ApexCharts, D3.js and Recharts. Frappe Charts focuses on a simple API and a small footprint, while the README describes only basic interactivity, so projects needing extensive interactivity may prefer one of the others.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Frappe Charts suits developers who need simple or medium-complexity charts with a small, dependency-free library and responsive resizing. Teams that need 3D charts, specialized chart types or extensive built-in interactivity should look at alternatives such as Chart.js, ApexCharts, D3.js or Recharts.

Install options & downloads