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 on GitHub or just use these Chart.js CDN links.
To install via npm:
npm install chart.js --save
To Install via bower, please follow these instructions.
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.