Chart.js is a powerful, flexible JavaScript library for creating interactive charts in web applications. It supports a wide range of chart types and is highly customizable, allowing developers to create both simple and complex visualizations with ease.
Line Charts
Create line charts to display data trends over time or categories. The code sample initializes a line chart with a dataset and labels for the x-axis.
new Chart(document.getElementById('line-chart'), { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May'], datasets: [{ label: 'Dataset 1', data: [0, 10, 5, 2, 20], fill: false }] }, options: { title: { display: true, text: 'Line Chart' } } });Bar Charts
Create bar charts to compare different sets of data. The code sample sets up a bar chart with different colored bars and a y-axis that starts at zero.
new Chart(document.getElementById('bar-chart'), { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'], datasets: [{ label: 'Dataset 1', data: [12, 19, 3, 5, 2], backgroundColor: ['rgba(255, 99, 132, 0.2)'] }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } });Pie Charts
Create pie charts to illustrate numerical proportions in a dataset. The code sample creates a pie chart with three segments, each representing a portion of the whole.
new Chart(document.getElementById('pie-chart'), { type: 'pie', data: { labels: ['Red', 'Blue', 'Yellow'], datasets: [{ data: [300, 50, 100], backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'] }] }, options: { title: { display: true, text: 'Pie Chart' } } });Radar Charts
Create radar charts to compare multiple quantitative variables. The code sample demonstrates a radar chart that compares different activities of a person.
new Chart(document.getElementById('radar-chart'), { type: 'radar', data: { labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'], datasets: [{ label: 'Person A', data: [65, 59, 90, 81, 56, 55, 40], fill: true }] }, options: { title: { display: true, text: 'Radar Chart' } } });Highcharts is a charting library that offers a wide variety of chart types and is known for its high level of interactivity and customization options. It is often compared to Chart.js for its ease of use and rich feature set, but it is not free for commercial use.
D3.js is a powerful data visualization library that uses SVG, HTML, and CSS. D3 is more flexible and has a steeper learning curve compared to Chart.js. It is suitable for creating complex, interactive visualizations.
ECharts is an open-source visualization library that provides an array of chart types, similar to Chart.js. It is known for its rich interactive features and support for large datasets. ECharts is often praised for its performance with large data sets.
Plotly.js is a high-level charting library that is built on top of d3.js and stack.gl. It is capable of producing sophisticated, interactive, web-based data visualizations. Plotly.js offers more advanced features like 3D charts and is often considered more powerful than Chart.js.
Simple yet flexible JavaScript charting for designers & developers
Instructions on building and testing Chart.js can be found in the documentation. Before submitting an issue or a pull request, please take a moment to look over the contributing guidelines first. For support, please post questions on Stack Overflow with the chartjs tag.
Chart.js is available under the MIT license.
FAQs
Simple HTML5 charts using the canvas element.
The npm package chart.js receives a total of 2,737,972 weekly downloads. As such, chart.js popularity was classified as popular.
We found that chart.js demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.