Configuration

The configuration is used to change how the chart behaves. There are properties to control styling, fonts, the legend, etc.

Configuration object structure

The top level structure of Chart.js configuration:

  1. const config = {
  2. type: 'line'
  3. data: {}
  4. options: {}
  5. plugins: []
  6. }

type

Chart type determines the main type of the chart.

note A dataset can override the type, this is how mixed charts are constructed.

data

See Data Structures for details.

options

Majority of the documentation talks about these options.

plugins

Inline plugins can be included in this array. It is an alternative way of adding plugins for single chart (vs registering the plugin globally). More about plugins in the developers section.

Global Configuration

This concept was introduced in Chart.js 1.0 to keep configuration DRYConfiguration - 图1 (opens new window), and allow for changing options globally across chart types, avoiding the need to specify options for each instance, or the default for a particular chart type.

Chart.js merges the options object passed to the chart with the global configuration using chart type defaults and scales defaults appropriately. This way you can be as specific as you would like in your individual chart configuration, while still changing the defaults for all chart types where applicable. The global general options are defined in Chart.defaults. The defaults for each chart type are discussed in the documentation for that chart type.

The following example would set the interaction mode to ‘nearest’ for all charts where this was not overridden by the chart type defaults or the options passed to the constructor on creation.

  1. Chart.defaults.interaction.mode = 'nearest';
  2. // Interaction mode is set to nearest because it was not overridden here
  3. const chartInteractionModeNearest = new Chart(ctx, {
  4. type: 'line',
  5. data: data
  6. });
  7. // This chart would have the interaction mode that was passed in
  8. const chartDifferentInteractionMode = new Chart(ctx, {
  9. type: 'line',
  10. data: data,
  11. options: {
  12. interaction: {
  13. // Overrides the global setting
  14. mode: 'index'
  15. }
  16. }
  17. });

Dataset Configuration

Options may be configured directly on the dataset. The dataset options can be changed at multiple different levels. See options for details on how the options are resolved.

The following example would set the showLine option to ‘false’ for all line datasets except for those overridden by options passed to the dataset on creation.

  1. // Do not show lines for all datasets by default
  2. Chart.defaults.datasets.line.showLine = false;
  3. // This chart would show a line only for the third dataset
  4. const chart = new Chart(ctx, {
  5. type: 'line',
  6. data: {
  7. datasets: [{
  8. data: [0, 0],
  9. }, {
  10. data: [0, 1]
  11. }, {
  12. data: [1, 0],
  13. showLine: true // overrides the `line` dataset default
  14. }, {
  15. type: 'scatter', // 'line' dataset default does not affect this dataset since it's a 'scatter'
  16. data: [1, 1]
  17. }]
  18. }
  19. });