An Introduction to Chart.js 2.0

This article is part of our Modern JavaScript anthology. For a comprehensive guide to modern JavaScript, explore SitePoint Premium and download your copy.

Peer reviewed by Tim Severien and Simon Codrington. Thanks to all SitePoint's peer reviewers!

Data-heavy websites demand effective data visualization. Raw numbers are hard for humans to grasp; charts and graphs offer intuitive, accessible alternatives, even for non-English speakers. Clear visuals enhance understanding and website appeal.

This tutorial introduces Chart.js, a JavaScript charting library. Through six examples, we'll demonstrate its use and configuration.

Key Features of Chart.js 2.0:

• Versatile and user-friendly JavaScript library for diverse chart creation.
• Simple installation and quick learning curve.
• Supports various chart types: line, bar, radar, polar area, pie, and doughnut. Chart type is easily changed via the type property.
• Enhanced features: mobile responsiveness and integrated titles.
• Customizable interactivity (e.g., toggling datasets via legend clicks).
• Extensive customization options for appearance (colors, tooltips, animations).

Why Chart.js?

Chart.js balances ease of use with powerful customization. It avoids the steep learning curve of more complex libraries while offering ample flexibility. Its eight chart types cover most visualization needs. The active open-source community ensures high-quality maintenance. Version 2.0 introduced significant syntax improvements and mobile support. This tutorial uses Chart.js 2.0. A section on the 1.0 to 2.0 transition is included.

Installing Chart.js:

Chart.js prioritizes simplicity. The easiest installation method is via a CDN:

<code class="language-html"></code>

You'll also need a <canvas></canvas> element:

<code class="language-html"><canvas id="myChart"></canvas></code>

Alternatively, use a package manager (see the Getting Started guide for details).

Let's explore Chart.js's capabilities.

Line Chart:

This minimal line chart demonstrates Chart.js's core structure:

<code class="language-javascript">var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
    datasets: [{
      label: 'apples',
      data: [12, 19, 3, 17, 6, 3, 7],
      backgroundColor: "rgba(153,255,51,0.4)"
    }, {
      label: 'oranges',
      data: [2, 29, 5, 5, 2, 3, 10],
      backgroundColor: "rgba(255,153,0,0.4)"
    }]
  }
});</code>

See CodePen Example

Explanation:

• ctx: Gets the 2D rendering context of the <canvas></canvas>.
• new Chart(ctx, { ... }): Creates the chart object. type specifies the chart type; data holds the chart data. Array indices determine graph positions.

Pro Tip: Clicking legends toggles datasets. This applies to all chart types.

Bar Chart:

Simply change type: 'line' to type: 'bar' in the previous example.

See CodePen Example

Radar Chart:

Change type to 'radar'. Adjust backgroundColor and borderColor for better readability with overlapping data.

See CodePen Example

Polar Chart:

Change type to 'polarArea'. Polar charts visualize single datasets.

See CodePen Example

Pie and Doughnut Charts:

Change type to 'pie' or 'doughnut'. Doughnut charts use cutoutPercentage to control the hole size.

See CodePen Example (Pie) See CodePen Example (Doughnut)

Chart.js Configuration (options):

The options property allows extensive customization:

• Titles: Add titles using options: { title: { display: true, text: 'My Chart' } }.
• cutoutPercentage: Controls the doughnut chart's hole size (0-50).
• Stacked Bar Charts: Use options: { scales: { yAxes: [{ stacked: true }] } } for stacked bars.

Event Handling:

Customize legend click behavior:

<code class="language-html"></code>

Example: Dynamic Caption Update:

See CodePen Example This example updates a caption based on legend clicks.

Chart.js 2.0 vs. 1.0:

Key differences:

• Chart declaration: 2.0 uses a single new Chart() call with type, data, and options. 1.0 uses function chaining.
• Mobile support: 2.0 includes native mobile support.
• Integrated titles: 2.0 offers built-in titles.

Conclusion:

Chart.js is ideal for rapid chart prototyping. Its diverse chart types and ease of use make it a valuable tool for any web developer. Refer to the official Chart.js documentation for comprehensive details.

(Note: Replace https://www.php.cn/link/144b646e159cb47f13a4ebb4c8d00628 with actual CodePen links for each chart type.)

The above is the detailed content of An Introduction to Chart.js 2.0. For more information, please follow other related articles on the PHP Chinese website!