Chart.js configuration

Chart.js has an extremely versatile set of options for configuring the display of charts, so here we will just cover the essential properties under our configuration key in the chart definition. For further information on more advanced features, please refer to the Chart.js documentation.

Breakdown

A basic configuration object would be as follows:

Copy to clipboard
activity.Response.Data.chart.configuration = {
  data: {
    labels: ['UK', 'USA', 'Germany'],
    datasets: [
      {
        label: '2018',
        data: [3750, 2500, 3250]
      },
      {
        label: '2019',
        data: [4250, 3500, 5250]
      }
    ]
  },
  options: {
    title: {
      display: true,
      text: 'Order Volume'
    }
  }
};
Expand (21 lines)

There are three possible sub-keys: data, which contains the chart's display data; options, which contains stylistic properties; and type, which defines the chart type.

• data: The data key contains the information that the chart will display. An array of strings labels defines the names of each point along the x-axis. An array of objects datasets contains a dataset for each series in the chart - for a single series, only one dataset object is needed. It contains an array of y-axis values - one for each x-axis label (in order), and an optional label (the name of the series). This key also accepts numerous options related to how the data should be displayed - see the Chart.js documentation for a complete reference.

• options: The options key contains stylistic settings that are independent of the data provided, and are not specific to chart type. These include title text and style, axes labels and styles, legend styles, plugin configuration, and so on. In the example above we only set one option, that provides the title "Order Volume" and tells Chart.js that it should be displayed rather than hidden. Again, a complete reference of available options can be found in the Chart.js documentation.

• type: This key accepts the name of one of the Chart.js chart types. We do not recommend using this key, and instead use one of our provided templates, which will set not just the type but improve the default styling in accordance with the type of chart being rendered. If this key is used instead of a template, it is then required to set the dimensions key of the chart definition.

We also support a custom chart type Radial Gauge that is not included in Chart.js. It can be used by setting the gauge template or radialGauge chart type. It has unique configuration options that can be found in its GitHub documentation.

It should be noted that any keys in the configuration that may take JavaScript functions (callbacks) as values, will not have any effect if a callback is used as the value. As the configuration is transmitted via JSON from the server to the browser, functions are unable to be sent to Chart.js to be rendered.

Plugins

We have two plugins added to Chart.js by default, Datalabels and Colorschemes. The configuration of these plugins is briefly outlined below.

Datalabels

The datalabels plugin can be configured by adding settings at the options.plugins.datalabels key, using options as outline in the datalabels plugin documentation.

There are some templates provided with basic labels enabled, or they can be enabled directly by setting options.plugins.datalabels.display = true.

It's also possible to use a labelled template, then customize the display settings in the above configuration without having to set display = true.

Colorschemes

The Chart.js colorschemes plugin is enabled by default, but is proxied to the palette key of the chart definition for easier use - so there is no need to configure it directly via options.plugins.colorschemes.