Integration | Chart.js (original) (raw)

Chart.js can be integrated with plain JavaScript or with different module loaders. The examples below show how to load Chart.js in different systems.

If you're using a front-end framework (e.g., React, Angular, or Vue), please see available integrations (opens new window).

# Script Tag

# Bundlers (Webpack, Rollup, etc.)

Chart.js is tree-shakeable, so it is necessary to import and register the controllers, elements, scales and plugins you are going to use.

# Quick start

If you don't care about the bundle size, you can use the auto package ensuring all features are available:

# Bundle optimization

When optimizing the bundle, you need to import and register the components that are needed in your application.

The options are categorized into controllers, elements, plugins, scales. You can pick and choose many of these, e.g. if you are not going to use tooltips, don't import and register the Tooltip plugin. But each type of chart has its own bare-minimum requirements (typically the type's controller, element(s) used by that controller and scale(s)):

• Bar chart
  • BarController
  • BarElement
  • Default scales: CategoryScale (x), LinearScale (y)
• Bubble chart
  • BubbleController
  • PointElement
  • Default scales: LinearScale (x/y)
• Doughnut chart
  • DoughnutController
  • ArcElement
  • Not using scales
• Line chart
  • LineController
  • LineElement
  • PointElement
  • Default scales: CategoryScale (x), LinearScale (y)
• Pie chart
  • PieController
  • ArcElement
  • Not using scales
• PolarArea chart
  • PolarAreaController
  • ArcElement
  • Default scale: RadialLinearScale (r)
• Radar chart
  • RadarController
  • LineElement
  • PointElement
  • Default scale: RadialLinearScale (r)
• Scatter chart
  • ScatterController
  • PointElement
  • Default scales: LinearScale (x/y)

Available plugins:

• Decimation
• Filler - used to fill area described by LineElement, see Area charts
• Legend
• SubTitle
• Title
• Tooltip

Available scales:

• Cartesian scales (x/y)
  • CategoryScale
  • LinearScale
  • LogarithmicScale
  • TimeScale
  • TimeSeriesScale
• Radial scales (r)
  • RadialLinearScale

# Helper functions

If you want to use the helper functions, you will need to import these separately from the helpers package and use them as stand-alone functions.

Example of Converting Events to Data Values using bundlers.

# CommonJS

Because Chart.js is an ESM library, in CommonJS modules you should use a dynamic import:

# RequireJS

Important: RequireJS can load only AMD modules (opens new window), so be sure to require one of the UMD builds instead (i.e. dist/chart.umd.js).

Last Updated: 4/15/2025, 1:19:05 PM