Harness the power of the Chart.js library to create dynamic charts and diagrams and make data more engaging.

11. Improve pie colouring

Chart.js does not contain a random colour generator – if you don't provide a colour array, colours won't change. As designing systems based purely on colours is inefficient – many individuals suffer from colour blindness. A nice way around the problem is the patternomaly library.

12. Use patterns

Actually applying a pattern is not difficult. As shown above, simply instantiate them using the name from the figure and a colour screen to be used as a background. Ensure that the array contains enough elements to cover each member of the data field.

13. Address tooltip issues

The tooltip window cannot discern colour information at the moment

Running the program with enabled developer tools finds an interesting problem. When passing the mouse cursor over the chart elements, errors pop up. This is caused by the tooltip window, which is not able to discern colour information from pie elements loaded with a pattern.

14. Overwrite information

The problem at hand can be remedied by overriding parts of the tooltip's element. Chart.js lets you submit event handlers that get called as a tooltip window pops up – overwriting labelColor disables the snooping algorithm responsible for the emission of the warning seen before.

15. Add a title

Especially when diagrams are intended for export or saving, adding a title improves the meaningfulness of the information displayed. The code shown next to this step takes care of the problem effectively – additional customisation, such as the choice of fonts, can be accomplished with additional parameters.

16. Add one more chart

So far, our diagrams were limited to one bit of information at a time. Adding a second 'level' to a data field motivates Chart.js to create a chart made up of more than one data set. The Labels array is important, as its omission makes the program skip parts of the data.

17. Populate the data array

Generating the label's array can get tedious. If your information is sourced from somewhere where ordinal information is readily available, the data array can also be populated with an array of Point[] fields. In this case, use the syntax shown below.

data: [{
x: 10,
y: 20
}, {
x: 15,
y: 10
}]

18. Adjust placement of charts

The above-mentioned spacing problem makes positioning diagrams difficult. Chart.js addresses this problem via the padding attribute found in the options field – it allows you to declare a keep-out zone on each of the four margins of the container, thereby constraining rendering.

19. Set the layout globally

Assigning layout settings to each diagram is tedious. A smarter approach involves the Chart.defaults.global element. It exposes the default settings Chart.js will use for new diagrams, and can save a lot of code if multiple diagrams are to be hosted next to one another.

20. Look at examples

The Chart.js developers provide a set of examples to show the framework in action. Take a look at the various options – the source code, usually, is commented well. The library also comes with extremely detailed documentation. Simply open it in a browser of choice, and navigate to the sector which interests you the most.