Product
Introducing Ruby Support in Socket
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
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 HTML5 Charts using the canvas element chartjs.org
You can download the latest version of Chart.js from the GitHub releases or use a Chart.js CDN.
To install via npm:
npm install chart.js --save
To install via bower:
bower install chart.js --save
Chart.js provides two different builds that are available for your use. The Chart.js
and Chart.min.js
files include Chart.js and the accompanying color parsing library. If this version is used and you require the use of the time axis, Moment.js will need to be included before Chart.js.
The Chart.bundle.js
and Chart.bundle.min.js
builds include Moment.js in a single file. This version should be used if you require time axes and want a single file to include, select this version. Do not use this build if your application already includes Moment.js. If you do, Moment.js will be included twice, increasing the page load time and potentially introducing version issues.
You can find documentation at www.chartjs.org/docs. The markdown files that build the site are available under /docs
. Previous version documentation is available at www.chartjs.org/docs/#notes-previous-versions.
Before submitting an issue or a pull request to the project, please take a moment to look over the contributing guidelines first.
For support using Chart.js, please post questions with the chartjs
tag on Stack Overflow.
To build, run gulp build
.
To test, run gulp test
.
To test against code standards, run gulp lint
.
More information on building and testing can be found in gulpfile.js.
Thanks to BrowserStack for allowing our team to test on thousands of browsers.
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,153,728 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.
Product
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.