Getting Started

Let’s get started using Chart.js!

First, we need to have a canvas in our page. It’s recommended to give the chart its own container for responsiveness.

  1. <div>
  2.   <canvas id="myChart"></canvas>
  3. </div>

Now that we have a canvas we can use, we need to include Chart.js in our page.

  1. <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Now, we can create a chart. We add a script to our page:

Getting Started - 图1

config setup

  1. const config = {
  2.   type: 'line',
  3.   data,
  4.   options: {}
  5. };
  1. const labels = [
  2.   'January',
  3.   'February',
  4.   'March',
  5.   'April',
  6.   'May',
  7.   'June',
  8. ];
  9. const data = {
  10.   labels: labels,
  11.   datasets: [{
  12.     label: 'My First dataset',
  13.     backgroundColor: 'rgb(255, 99, 132)',
  14.     borderColor: 'rgb(255, 99, 132)',
  15.     data: [0, 10, 5, 2, 20, 30, 45],
  16.   }]
  17. };

It’s that easy to get started using Chart.js! From here you can explore the many options that can help you customise your charts with scales, tooltips, labels, colors, custom actions, and much more.

All our examples are available onlineGetting Started - 图2 (opens new window) but you can also download the Chart.js.zip archive attached to every releaseGetting Started - 图3 (opens new window) to experiment with our samples locally from the /samples folder.