Chart.js — Options

Image for post
Image for post
Photo by Lukas Blazek on Unsplash

We can make creating charts on a web page easy with Chart.js.

In this article, we’ll look at how to create charts with Chart.js.

Printing Resizable Charts

We can add an event handler for the beforeprint event to trigger the resizing of the charts before we print them.

For example, we can write:

to add the beforeprint handler and resize all the chart instances that are found with Chart.instances .

Events

We can set which events a chart responds to.

For example, we can add the options.event property with an array of event name strings to set the events it responds to:

We have the ['click'] array so that it only respond to click events.

Interaction Modes

We can configure the interaction of tooltips.

For example, we can write:

to find all the items that intersect the point.

We can get the items that are nearest to the point with the 'nearest' value.

This means that the tooltip is only triggered when the mouse position intersects an item in the graph.

Scriptable Options

We can set scriptable options with a function.

For example, we can change the color option dynamically by writing:

We changed the background colors of the bars with the backgroundColor options.

index has the index of the graph.

value has the value of the y-axis.

So if value , we show red.

Otherwise, we alternate between blue and green.

Conclusion

We can change various options with Chart.js.

Also, we can resize charts to fit when we print them.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store