Prototype methods are automatically called during rendering and updates. You can also call them directly if you need to interfere with the rendering process. They are listed in the following table:
|
Method |
Description |
|
destroy() |
Destroys a chart instance. This can be used if you wish to reuse the canvas, or remove the chart completely. |
|
reset() |
Restores the chart to its initial state (after layout and before its initial animation). A new animation can be triggered with render() or update(). |
|
stop() |
Stops an animation loop. This is usually called in an onProgress callback. Calling render() or update() will resume the animation. |
|
clear() |
Clears the chart canvas (effective after the chart has finished rendering). You can call render() or update() to draw it again. |
|
resize() |
Resizes the chart. Called automatically every time the canvas is resized. |
|
update(config) |
Updates the chart. This should be called after any changes in the datasets. You can include a configuration object with the following properties: duration (Number) to control the redraw animation duration, lazy (boolean) to decide if the animation can be interrupted by others, and easing (String), to select an easing function. |
|
render(config) |
Redraws all chart elements but does not update the chart elements for new data. |
|
toBase64Image() |
Generates the chart as a new base64-encoded PNG image. It can be displayed in an HTML page, or converted into a blob for download. |
|
generateLegend() |
Returns the contents of the options.legendCallback property (an HTML legend) when called. |
|
getElementAtEvent(e) |
Used in event handlers to obtain the element at an event. |
|
getElementsAtEvent(e) |
Used in event handlers to obtain all elements with the same data index at an event. |
|
getDatasetAtEvent(e) |
Used in event handlers to obtain an array of elements that belong to a dataset. |
|
getDatasetMeta(index) |
Returns the metadata for the dataset corresponding to the index. |
Some of these methods are used to trigger the execution of life cycle callbacks in plugins. Many are already called automatically and may not be effective in all stages of an animation, since other stages may call methods that undo the desired effect.
In this chapter, we saw an example with generateLabels(), and in the previous chapter, we used update(). Event methods are common in event handlers, which receive a JavaScript event.
The toBase64Image() method generates a Base64 image string. Call it in animation.onComplete or in any callback function that is invoked only when the chart is fully drawn (otherwise it may generate a partially drawn or blank image). It returns a string that can be assigned to the src attribute of an HTML image for rendering on an HTML page:
<image id="image"></image>
…
<script>
new Chart("chart", { type: 'line', data: {…},
options: {
animation: {
onComplete: function () {
let image = document.getElementById('image');
image.src = this.toBase64Image();
}
}
});
</script>
You can also use it to create an image for download with a blob function. Use the b64-to-blob function available from www.npmjs.com/package/b64-to-blob or via CDN by adding the following line to your page:
<script src="https://unpkg.com/b64-to-blob"></script>
Add the following tag where you want the download link:
<a id=’link’ download=’chart.png’></a>
Then, place this code in the animation.onComplete function:
const link = document.getElementById('link');
const blob = b64toBlob(image.src.split(',')[1], 'image/png');
link.href = URL.createObjectURL(blob);
After the chart loads, it will create a link that, when clicked, will download a PNG image of the chart. The full code is in Extensions/ext-1-prototype.html.