Chart.js

slackChart.js - 图2 (opens new window)

Installation

You can get the latest version of Chart.js from npmChart.js - 图3 (opens new window), the GitHub releasesChart.js - 图4 (opens new window), or use a Chart.js CDNChart.js - 图5 (opens new window). Detailed installation instructions can be found on the installation page.

If you’re using a front-end framework (e.g., React, Angular, or Vue), please check available integrationsChart.js - 图6 (opens new window).

Creating a Chart

It’s easy to get started with Chart.js. All that’s required is the script included in your page along with a single <canvas> node to render the chart.

In this example, we create a bar chart for a single dataset and render that in our page. You can see all the ways to use Chart.js in the usage documentation.

  1. <canvas id="myChart" width="400" height="400"></canvas>
  2. <script>
  3. const ctx = document.getElementById('myChart').getContext('2d');
  4. const myChart = new Chart(ctx, {
  5. type: 'bar',
  6. data: {
  7. labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  8. datasets: [{
  9. label: '# of Votes',
  10. data: [12, 19, 3, 5, 2, 3],
  11. backgroundColor: [
  12. 'rgba(255, 99, 132, 0.2)',
  13. 'rgba(54, 162, 235, 0.2)',
  14. 'rgba(255, 206, 86, 0.2)',
  15. 'rgba(75, 192, 192, 0.2)',
  16. 'rgba(153, 102, 255, 0.2)',
  17. 'rgba(255, 159, 64, 0.2)'
  18. ],
  19. borderColor: [
  20. 'rgba(255, 99, 132, 1)',
  21. 'rgba(54, 162, 235, 1)',
  22. 'rgba(255, 206, 86, 1)',
  23. 'rgba(75, 192, 192, 1)',
  24. 'rgba(153, 102, 255, 1)',
  25. 'rgba(255, 159, 64, 1)'
  26. ],
  27. borderWidth: 1
  28. }]
  29. },
  30. options: {
  31. scales: {
  32. y: {
  33. beginAtZero: true
  34. }
  35. }
  36. }
  37. });
  38. </script>

Contributing

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 OverflowChart.js - 图7 (opens new window).

License

Chart.js is available under the MIT licenseChart.js - 图8 (opens new window).

Documentation is copyright © 2014-2022 Chart.js contributors.