Chart.JS reduce bundle size using specific charts

Question

In the documentation of Chart.JS at the Quick start it says when importing the package as import Chart from 'chart.js/auto' it will include all the features.

I only wanted to use the line chart but there is no documentation on how to use it. In the part of Bundle optimization it says "you need to import and register the components that are needed in your application" which I do not get how can I only import the components that are needed for the line chart.

I have to do this since the disk space is very limited for the environment that I am developing.

Answer 1

Import components separately

More information from ChartJS docs: https://www.chartjs.org/docs/latest/getting-started/integration.html#bundle-optimization

You can import specific components, like...

Example (line chart):

  import {
    Chart,
    LineController,
    LineElement,
    LinearScale,
    CategoryScale,
    PointElement,
  } from "chart.js";

  Chart.register(
    LineController,
    LineElement,
    LinearScale,
    CategoryScale,
    PointElement
  );

I had already answered this issue on github

https://github.com/chartjs/Chart.js/issues/11247