Overview

The following configuration is recommended for implementing chart.js.

SDS Global Chart.js plugin

The sds-chart.js file provides a global Chart.js plugin which is automatically registered with all chart.js instances. This plugin provides some additional sds classname injection on the charts, and provides additional functionality for dial-charts.

SDS Chart.js config files

SDS includes existing Chart.js config files to style the charts that can be loaded using standard javascript module imports.

You can import the Chart.js modules as follows:

If it’s not possible to import the modules directly, you can view the files hosted on assets, and copy and paste the code locally and manually implement the charts.

Colors

If you are importing one of the SDS chart.js modules, you can load the SDS colors at the same time by using:

See SDS color javascript for more details.

Examples

Bar chart

Vertical

Vertical with scale

Horizontal

Horizontal with scale

Horizontal, multiple bars per row with custom color

Line chart

Basic example

Line area chart

Dial chart

Dial chart expects two values. The first value and the total of both values will be displayed.

Basic example

With Title and labels

DMY/Y label

Styles

Clipped

In specific situations, the styling requires the chart to bleed off the right and left hand sides. To do this correctly, 2 extra data points must be included in the chart – and the first and last records will be presented clipped off.

To achieve this (for example on the ‘7 Day’ chart below):

1. Include 1 extra data entry before the 7 days (i.e. 8th day)
2. Include 1 extra data entry the after the 7 days (i.e. duplicate the latest entry, or a predicted value)
3. It’s recommend the label for the extra data points is left blank

Add the class ds-chart --clip --9 (9 is the total number of data records on a 7 day chart).

The chart will display with the left and right side clipped. SDS currently supports clipping between --3 and --16. This style is currently only tested with line/area charts.

Compare the chart below, with the standard presentation above.