chart.js

Simple HTML5 charts using the canvas element.

weekly downloads6.6M

versionv4.5.1

licenseMIT

categorydata-viz

canvaschartsdatagraphshtml5responsive

Overview

Chart.js is a battle-tested JavaScript charting library that renders visualizations using the HTML5 canvas element. It provides 8 core chart types (line, bar, pie, doughnut, radar, polar area, bubble, scatter) with a straightforward API that balances simplicity and customization. Unlike SVG-based alternatives, Chart.js leverages canvas rendering for superior performance with large datasets, handling 1M+ data points efficiently through decimation plugins.

The library has evolved significantly in version 4.x with tree-shaking support, allowing developers to import only the components they need and reduce bundle sizes by dozens of kilobytes. It requires explicit registration of chart types and scales (e.g., Chart.register(BarController, LinearScale)), which aligns with modern bundler optimizations. The API revolves around datasets and labels, where each dataset represents a series of data points with configurable styling, animations, and interactions.

With 6.6 million weekly downloads, Chart.js dominates the ecosystem for standard business charts. It powers dashboards in enterprise applications, analytics platforms, and admin panels where developers need reliable, responsive visualizations without the complexity of lower-level libraries like D3.js. The project maintains official adapters for React, Vue, and Svelte, and supports advanced features like mixed chart types, custom scales (including datetime and logarithmic), and extensive plugin architecture for annotations, zoom, and data labels.

Chart.js excels in scenarios where canvas performance matters and developers want minimal configuration for common chart types. It removed the Moment.js dependency in v3, requires time adapters only when needed, and provides consistent behavior across IE11+ and modern browsers. The MIT license and active maintenance make it a safe long-term choice for production applications.

Quick Start

typescript

import { Chart, CategoryScale, LinearScale, BarController, BarElement, LineController, LineElement, PointElement, Legend, Tooltip } from 'chart.js';

// Register components for tree-shaking
Chart.register(CategoryScale, LinearScale, BarController, BarElement, LineController, LineElement, PointElement, Legend, Tooltip);

const ctx = document.getElementById('salesChart').getContext('2d');

const chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [
      {
        type: 'bar',
        label: 'Revenue',
        data: [12000, 19000, 15000, 25000, 22000, 30000],
        backgroundColor: 'rgba(54, 162, 235, 0.6)',
        borderColor: 'rgba(54, 162, 235, 1)',
        borderWidth: 1
      },
      {
        type: 'line',
        label: 'Target',
        data: [15000, 18000, 20000, 23000, 26000, 28000],
        borderColor: 'rgba(255, 99, 132, 1)',
        backgroundColor: 'rgba(255, 99, 132, 0.1)',
        tension: 0.4,
        fill: false
      }
    ]
  },
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'top'
      },
      tooltip: {
        callbacks: {
          label: (context) => `${context.dataset.label}: $${context.parsed.y.toLocaleString()}`
        }
      }
    },
    scales: {
      y: {
        beginAtZero: true,
        ticks: {
          callback: (value) => `$${value / 1000}k`
        }
      }
    },
    interaction: {
      mode: 'index',
      intersect: false
    }
  }
});

// Update chart data dynamically
setTimeout(() => {
  chart.data.datasets[0].data[5] = 35000;
  chart.update('active');
}, 2000);

Use Cases

Real-time analytics dashboards that update charts with live data streams, where canvas rendering efficiently handles frequent redraws without DOM manipulation overhead. The library's animation system smoothly transitions between data states, making it ideal for monitoring tools and IoT dashboards.

Financial reporting interfaces displaying quarterly revenue, expense breakdowns, or portfolio performance. Chart.js handles mixed chart types (combining bar and line charts) and logarithmic scales for stock data, with responsive design ensuring charts adapt to mobile and desktop viewports.

E-commerce admin panels showing sales trends, inventory levels, and customer metrics. The straightforward dataset API allows developers to map API responses directly to chart configurations, and the plugin ecosystem provides features like data labels for exact values and zoom for detailed inspection.

Educational platforms and data journalism where interactive charts explain concepts or visualize research. The library's accessibility features, customizable tooltips, and legend interactions help users understand complex data, while the small bundle size keeps page load times fast.

Progressive web apps requiring offline-capable visualizations, since Chart.js has no external dependencies for basic charts and renders entirely client-side. The tree-shaking support ensures mobile users download only necessary code, making it suitable for bandwidth-constrained environments.

Pros & Cons

Pros

+Canvas rendering delivers excellent performance with large datasets (1M+ points) and smooth animations, outperforming SVG-based libraries in data-heavy scenarios
+Tree-shaking in v4 allows importing only needed chart types and scales, reducing bundle size from ~300KB to as low as 50KB minified
+Simple, intuitive API with extensive documentation makes it accessible for developers new to charting while providing deep customization through options and plugins
+Strong ecosystem with official framework integrations (React, Vue, Svelte), community plugins for zoom/annotations/datalabels, and active maintenance
+No runtime dependencies for core charts; time scale adapters (date-fns, Luxon) are optional, avoiding the Moment.js bloat of earlier versions

Cons

−Canvas-based rendering lacks the DOM accessibility and print quality of SVG; screen readers require additional ARIA configuration
−Limited out-of-the-box interactivity compared to Plotly.js or Highcharts—advanced features like crosshairs, synced charts, or export require plugins
−Custom chart types demand understanding Chart.js controller architecture; extending beyond the 8 built-in types is significantly more complex than D3.js custom shapes
−Manual registration of components in v4 (Chart.register) adds boilerplate and can confuse developers migrating from v2.x auto-registration
−Responsive behavior sometimes requires manual destroy/recreate cycles when parent containers change size dynamically, rather than pure CSS solutions

Alternatives

d3v7.9.0

Data-Driven Documents

data-vizd3dom

7.2M / week

plotly.jsv3.3.1

The open source javascript graphing library that powers plotly

data-vizgraphingplotting

449K / week

Comparisons

Install

bash

npm install chart.js

bash

pnpm add chart.js

bash

bun add chart.js

Overview

Quick Start

typescript

import { Chart, CategoryScale, LinearScale, BarController, BarElement, LineController, LineElement, PointElement, Legend, Tooltip } from 'chart.js';

// Register components for tree-shaking
Chart.register(CategoryScale, LinearScale, BarController, BarElement, LineController, LineElement, PointElement, Legend, Tooltip);

const ctx = document.getElementById('salesChart').getContext('2d');

const chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [
      {
        type: 'bar',
        label: 'Revenue',
        data: [12000, 19000, 15000, 25000, 22000, 30000],
        backgroundColor: 'rgba(54, 162, 235, 0.6)',
        borderColor: 'rgba(54, 162, 235, 1)',
        borderWidth: 1
      },
      {
        type: 'line',
        label: 'Target',
        data: [15000, 18000, 20000, 23000, 26000, 28000],
        borderColor: 'rgba(255, 99, 132, 1)',
        backgroundColor: 'rgba(255, 99, 132, 0.1)',
        tension: 0.4,
        fill: false
      }
    ]
  },
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'top'
      },
      tooltip: {
        callbacks: {
          label: (context) => `${context.dataset.label}: $${context.parsed.y.toLocaleString()}`
        }
      }
    },
    scales: {
      y: {
        beginAtZero: true,
        ticks: {
          callback: (value) => `$${value / 1000}k`
        }
      }
    },
    interaction: {
      mode: 'index',
      intersect: false
    }
  }
});

// Update chart data dynamically
setTimeout(() => {
  chart.data.datasets[0].data[5] = 35000;
  chart.update('active');
}, 2000);

Use Cases

Pros & Cons

Pros

+Canvas rendering delivers excellent performance with large datasets (1M+ points) and smooth animations, outperforming SVG-based libraries in data-heavy scenarios
+Tree-shaking in v4 allows importing only needed chart types and scales, reducing bundle size from ~300KB to as low as 50KB minified
+Simple, intuitive API with extensive documentation makes it accessible for developers new to charting while providing deep customization through options and plugins
+Strong ecosystem with official framework integrations (React, Vue, Svelte), community plugins for zoom/annotations/datalabels, and active maintenance
+No runtime dependencies for core charts; time scale adapters (date-fns, Luxon) are optional, avoiding the Moment.js bloat of earlier versions

Cons

−Canvas-based rendering lacks the DOM accessibility and print quality of SVG; screen readers require additional ARIA configuration
−Limited out-of-the-box interactivity compared to Plotly.js or Highcharts—advanced features like crosshairs, synced charts, or export require plugins
−Custom chart types demand understanding Chart.js controller architecture; extending beyond the 8 built-in types is significantly more complex than D3.js custom shapes
−Manual registration of components in v4 (Chart.register) adds boilerplate and can confuse developers migrating from v2.x auto-registration
−Responsive behavior sometimes requires manual destroy/recreate cycles when parent containers change size dynamically, rather than pure CSS solutions