Chart.js

Chart.js is a popular open-source charting library supporting 8 chart types, rendered via Canvas with responsive design.

Trigger Scenarios

• User requests to create/generate/draw a chart
• User mentions Chart.js or data visualization
• User requests to visualize data with a chart
• User uploads data and requests visualization

Installation

npm:

npm install chart.js

CDN (Script Tag):

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

Webpack/Rollup (recommended for tree-shaking):

import Chart from 'chart.js/auto';  // Full features, no manual registration needed

Chart Types and Required Components

Each chart type has minimal dependencies; importing on demand optimizes bundle size:

| Chart Type | Controller | Element | Default Scale | |---------|-----------|---------|-----------| | Bar | BarController | BarElement | CategoryScale(x) + LinearScale(y) | | Line | LineController | LineElement + PointElement | CategoryScale(x) + LinearScale(y) | | Pie | PieController | ArcElement | — | | Doughnut | DoughnutController | ArcElement | — | | PolarArea | PolarAreaController | ArcElement | RadialLinearScale | | Radar | RadarController | LineElement + PointElement | RadialLinearScale | | Scatter | ScatterController | PointElement | LinearScale(x/y) | | Bubble | BubbleController | PointElement | LinearScale(x/y) |

Basic Usage

HTML:

<div style="max-width: 600px">
  <canvas id="myChart"></canvas>
</div>

JavaScript:

const ctx = document.getElementById('myChart');
new Chart(ctx, {
  type: 'bar',  // Chart type
  data: {
    labels: ['January', 'February', 'March'],
    datasets: [{
      label: 'Sales (10k)',
      data: [12, 19, 3],
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    scales: {
      y: { beginAtZero: true }
    }
  }
});

Common Configurations

Responsive (auto-adapts to container width)

options: {
  responsive: true,
  maintainAspectRatio: false
}

Fill Line Chart (Area)

datasets: [{
  fill: true,        // or 'origin'/'start'/'end'
  tension: 0.4       // Curve smoothness 0-1
}]

Multiple Datasets

datasets: [
  { label: '2023', data: [1, 2, 3], borderColor: 'red' },
  { label: '2024', data: [3, 2, 1], borderColor: 'blue' }
]

Quick Color Settings

backgroundColor: [
  'rgba(255, 99, 132, 0.5)',
  'rgba(54, 162, 235, 0.5)',
]

Interaction Events

Click to get data point values (requires helpers import):

import Chart from 'chart.js/auto';
import { getRelativePosition } from 'chart.js/helpers';

options: {
  onClick: (e) => {
    const pos = getRelativePosition(e, chart);
    const x = chart.scales.x.getValueForPixel(pos.x);
    const y = chart.scales.y.getValueForPixel(pos.y);
    console.log(x, y);
  }
}

Time Scale

Requires a date adapter (e.g., chartjs-adapter-moment):

import moment from 'moment';
import 'chartjs-adapter-moment';
// Then configure scales with type: 'time'

Output Methods

After generation, there are two output paths:

1. Render directly in an HTML page — Generate a complete HTML file containing canvas + Chart.js CDN, open with a browser
2. Screenshot/PDF — Take a screenshot using the browser tool, or generate an image file using puppeteer/canvas

Tip: Generating HTML is the simplest and most reliable output method; let Chart.js handle responsive layout itself.

More References

For detailed API and examples, see references/api.md.