Chart.js

You will create a simple responsive bar chart in a web page using Chart.js, with a canvas element, a chart configuration object, and options that let the chart resize with its container.

What it is

Chart.js is a JavaScript charting library that draws charts on an HTML <canvas> element. The mental model is simple: you provide a drawing context and a configuration object, and Chart.js renders the chart, handles axes, legends, tooltips, and resizing.

Related terms include chart type such as bar, line, or pie; data, which contains labels and datasets; and options, which control behavior and appearance.

Why it matters

• It lets you add common charts without writing low-level canvas drawing code.
• Charts can resize automatically when the browser window or container changes.
• It supports interactive features like tooltips and legends by default.
• It works well for dashboards, reports, and simple data summaries.

Syntax or steps

1. Add a <canvas> element inside a container that has a height.
2. Load Chart.js, then get the canvas 2D context with getContext('2d').
3. Call new Chart(ctx, config) with a configuration object.
4. Set type, data, and options.
5. Use responsive: true and maintainAspectRatio: false when you want the chart to fill a fixed-height container.

Example

<div id="chart-container" style="height: 300px;">
  <canvas id="salesChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('salesChart').getContext('2d');

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    datasets: [{
      label: 'Sales',
      data: [12, 19, 3, 5],
      backgroundColor: 'rgba(54, 162, 235, 0.5)'
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false
  }
});
</script>

Part by part:

• The <div> gives the chart a visible height. Without a height, a responsive chart may collapse.
• document.getElementById('salesChart').getContext('2d') gets the drawing surface.
• new Chart(ctx, ...) creates the chart.
• type: 'bar' selects a bar chart.
• labels define the x-axis categories, and datasets define the plotted values.
• options.responsive lets Chart.js resize the canvas, while maintainAspectRatio: false allows it to use the container height.

Common mistakes

• Forgetting a container height when using maintainAspectRatio: false. Fix it by giving the parent element a CSS height.
• Passing a string like 'salesChart' to new Chart(). Fix it by passing the canvas context or canvas element.
• Creating a new chart on the same canvas without updating or destroying the old one. Fix it by calling chart.destroy() or updating the existing chart.
• Expecting the chart to resize when responsive: false. Fix it by setting responsive: true.

When to use it

Chart.js is best when you need standard charts quickly. D3.js is better when you need highly custom visualizations or data-driven DOM manipulation.

Practice

Guided exercise: change the example to a line chart by setting type: 'line' and adding borderColor: 'rgba(54, 162, 235, 1)' to the dataset. Expected output: a responsive line chart with the same labels and values.

Challenge: add a second dataset called Expenses with values [8, 10, 4, 6]. Hint: add another object inside the datasets array.

Quick check

Question: Which two options help a Chart.js chart fill a fixed-height container?

Answer: responsive: true and maintainAspectRatio: false, with a parent container that has a height.

Summary

Chart.js turns a canvas context and a configuration object into an interactive chart. For simple responsive charts, provide a sized container, choose a chart type, supply labels and datasets, and enable responsive options.