Guide · Open source
How to use Chart.js: set up and draw your first chart
Updated · written with AI from the project's own documentation and checked against our catalogue data
Chart.js is a JavaScript library for adding charts to web pages. It draws the graphic on an HTML canvas element, so you pass it your data and options and it renders the chart in the browser. This guide explains what the project covers, where to find the official documentation, and what you need to know before you start writing code.
Chart.jschartjs/Chart.js · ★ 67.8k · MIT Install options & downloads Quick start
- 1Clone the repository. Run git clone https://github.com/chartjs/Chart.js to get the source code locally.
- 2Read Getting Started. Open the Getting Started section on chartjs.org to learn the basic setup and installation approach.
- 3Check the chart types. Look through the Charts section of the version 4 documentation to confirm the chart type you need.
- 4Set up the data and options. Learn the data structures and configuration options described in the General and Configuration sections.
- 5Add a canvas to your page. Place a canvas element in your HTML where the chart should appear.
- 6Render the chart. Create the chart in your browser script by passing it your data and options, then compare with the samples.
- 7Ask for help if stuck. Post questions on Stack Overflow with the chart.js tag, after reading the contributing guidelines if you plan to file an issue.
What Chart.js is and who it suits
Chart.js is a library, not a finished chart tool. You use it by writing JavaScript that gives it data and options, and it renders the chart on a canvas element. It is described in its README as simple yet flexible JavaScript charting for designers and developers.
It suits web developers who need standard charts such as line or bar charts on a site, designers who want chart styling they can configure in code, and teams building browser dashboards who want an MIT-licensed library.
Get the source code and find the documentation
The README lists one install-related command: cloning the repository from GitHub. The project's homepage is https://www.chartjs.org/, and the README links to the documentation there, including a Getting Started section and an Installation page.
The README states that its links point to version 4 of the library. Older documentation is available by putting a specific version in the docs URL, as shown in the README.
- Introduction and Getting Started pages on chartjs.org
- General, Configuration, Charts and Axes sections of the docs
- Samples page at chartjs.org/samples/
- Popular extensions listed in the awesome repository
git clone https://github.com/chartjs/Chart.jsUnderstand the data and options model
Every Chart.js chart is built from two things: the data you want to show and the options that control how it looks and behaves. The General section of the documentation covers data structures, and the Configuration section covers options.
The README itself gives little detail on specific chart types, so check the Charts section of the documentation for the types available in version 4 before you commit to a design.
Render a chart on a page
Chart.js draws onto a canvas element, so your page needs a canvas for the chart to appear in. The usual pattern is to add a canvas to your HTML, then create a chart on it in JavaScript by passing the data and options. The samples page on chartjs.org shows working examples you can adapt.
Because rendering happens in the browser, Chart.js is for client-side pages. The README describes browser canvas usage, so it is not a way to produce charts on a server.
- Add a canvas element to the page where the chart should appear
- Pass your data and options to the chart in your script
- Compare your code with the samples on chartjs.org/samples/
Get help and contribute
The README asks people to post support questions on Stack Overflow using the chart.js tag. Before filing an issue or pull request, read the contributing guidelines. Instructions for building and testing the project are in the developers section of the documentation.
What people use it for
- Showing a line chart of metrics on a marketing or product web page
- Building bar charts for a browser-based admin dashboard
- Adding styled charts to a site where designers configure colours and layout in code
Frequently asked questions
Is Chart.js free to use?
Yes. The README states that Chart.js is available under the MIT license, which is a permissive open-source licence. Check the LICENSE.md file in the repository for the full terms.
What do I need to install Chart.js?
The README lists no prerequisites. Its install-related instruction is to clone the repository with git clone https://github.com/chartjs/Chart.js, and the Getting Started section on chartjs.org covers installation in more detail.
Does Chart.js need coding knowledge?
Yes. It is a JavaScript library, so you write code to pass it data and options. If you need a chart tool with no coding, Chart.js is not the right fit.
Can Chart.js render charts on a server?
The README describes browser canvas usage, so Chart.js is designed for rendering in the browser. Do not assume it will produce charts on a server without checking the documentation.
How does Chart.js compare with D3.js or Apache ECharts?
Chart.js is aimed at standard charts such as line and bar charts with configurable styling. Comparable projects such as D3.js, Apache ECharts, Plotly.js and ApexCharts are alternatives; the README here does not compare their features, so review each project's documentation for your needs.
Where can I get help with Chart.js?
The README asks users to post questions on Stack Overflow with the chart.js tag. Read the contributing guidelines before submitting an issue or pull request.
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
Use Chart.js if you are a web developer or designer who wants standard browser charts you can configure in code, under an MIT licence. Pick another option if you need a no-code chart tool, server-side rendering, or specific chart types that the documentation does not cover for your project.
Install options & downloads