Chart templates and palettes

To make it simpler to create and configure charts in Digital Assistant, we provide several templates out of the box that reduce the minimum amount of configuration required in the connector.

The names of these templates and a preview of the resulting charts is outlined below. Where these templates should be specified is outline in the chart definition reference.

There are also several color palettes provided, which can again be defined in the chart definition.

Available templates

• bar: Bar chart

• barStacked: Bar chart where values of multiple series are stacked on top of one another, rather than beside one another

• gauge: Special kind of chart that shows a percentage value on a circular gauge. This chart is not included in Chart.js by default, so documentation on its use is found on the radial gauge chart GitHub repo.

• horizontalBar: Bar chart that goes horizontally from left to right, rather than vertically bottom to top

• horizontalBarStacked: Same as a horizontal bar, but stacked

• line: Line chart

• pie: Pie chart

• radar: Radar chart

• sparkline: Special type of line chart with no axes or labels

• bar-labels: A bar chart with data label annotations

• pie-labels: A pie chart with data label annotations

• line-labels: A line chart with data label annotations

Any style settings added by the above palettes will be overidden by values set explicitly in the chart definition.

Color palettes

All colors are set via the palette key, again in the chart definition, or explicitly in the regular Chart.js configuration.

If using palettes, the palette key simply needs to be given a value from those provided by the chartjs-plugin-colorschemes options.

For example, to use the first palette in the list, simply set palette: 'brewer.YlGn3'. The first color in the palette is applied to the first dataset, the second color to the second dataset, and so on.