API

    Use this to destroy any chart instances that are created. This will clean up any references stored to the chart object within Chart.js, along with any associated event listeners attached by Chart.js. This must be called before the canvas is reused for a new chart.

    .update(mode?)

    Triggers an update of the chart. This can be safely called after updating the data object. This will update all scales, legends, and then re-render the chart.

    1. myLineChart.data.datasets[0].data[2] = 50; // Would update the first dataset's value of 'March' to be 50
    2. myLineChart.update(); // Calling update now animates the position of March from 90 to 50.

    A mode string can be provided to indicate transition configuration should be used. Core calls this method using any of 'active', 'hide', 'reset', 'resize', 'show' or undefined. 'none' is also a supported mode for skipping animations for single update. Please see docs for more details.

    Example:

    1. myChart.update('active');

    See Updating Charts for more details.

    .reset()

    Reset the chart to its state before the initial animation. A new animation can then be triggered using update.

    1. myLineChart.reset();

    .render()

    Triggers a redraw of all chart elements. Note, this does not update elements for new data. Use .update() in that case.

    .stop()

    Use this to stop any current animation. This will pause the chart during any current animation frame. Call .render() to re-animate.

    1. // Stops the charts animation loop at its current frame
    2. myLineChart.stop();
    3. // => returns 'this' for chainability

    You can call .resize() with no parameters to have the chart take the size of its container element, or you can pass explicit dimensions (e.g., for printing).

    .clear()

    Will clear the chart canvas. Used extensively internally between animation frames, but you might find it useful.

    2. myLineChart.clear();
    3. // => returns 'this' for chainability

    .toBase64Image(type?, quality?)

    This returns a base 64 encoded string of the chart in its current state.

    1. myLineChart.toBase64Image();
    2. // => returns png data url of the image on the canvas
    4. myLineChart.toBase64Image('image/jpeg', 1)
    5. // => returns a jpeg data url in the highest quality of the canvas

    .getElementsAtEventForMode(e, mode, options, useFinalPosition)

    Calling getElementsAtEventForMode(e, mode, options, useFinalPosition) on your Chart instance passing an event and a mode will return the elements that are found. The options and useFinalPosition arguments are passed through to the handlers.

    To get an item that was clicked on, getElementsAtEventForMode can be used.

    1. function clickHandler(evt) {
    2.     const points = myChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
    4.         const firstPoint = points[0];
    5.         const label = myChart.data.labels[firstPoint.index];
    6.         const value = myChart.data.datasets[firstPoint.datasetIndex].data[firstPoint.index];
    7.     }
    8. }

    .getDatasetMeta(index)

    Looks for the dataset that matches the current index and returns that metadata. This returned data has all of the metadata that is used to construct the chart.

    The property of the metadata will contain information about each point, bar, etc. depending on the chart type.

    Extensive examples of usage are available in the .

    1. const meta = myChart.getDatasetMeta(0);
    2. const x = meta.data[0].x;
    1. chart.setDatasetVisibility(1, false); // hides dataset at index 1
    2. chart.update(); // chart now renders with dataset hidden

    toggleDataVisibility(index)

    Toggles the visibility of an item in all datasets. A dataset needs to explicitly support this feature for it to have an effect. From internal chart types, doughnut / pie, polar area, and bar use this.

    getDataVisibility(index)

    Returns the stored visibility state of an data index for all datasets. Set by toggleDataVisibility. A dataset controller should use this method to determine if an item should not be visible.

    1. const visible = chart.getDataVisibility(2);

    hide(datasetIndex, dataIndex?)

    If dataIndex is not specified, sets the visibility for the given dataset to false. Updates the chart and animates the dataset with 'hide' mode. This animation can be configured under the hide key in animation options. Please see animations docs for more details.

    If dataIndex is specified, sets the hidden flag of that element to true and updates the chart.

    1. chart.hide(1); // hides dataset at index 1 and does 'hide' animation.
    2. chart.hide(0, 2); // hides the data element at index 2 of the first dataset.

    show(datasetIndex, dataIndex?)

    If dataIndex is not specified, sets the visibility for the given dataset to true. Updates the chart and animates the dataset with 'show' mode. This animation can be configured under the show key in animation options. Please see animations docs for more details.

    If dataIndex is specified, sets the hidden flag of that element to false and updates the chart.

    1. chart.show(1); // shows dataset at index 1 and does 'show' animation.
    2. chart.show(0, 2); // shows the data element at index 2 of the first dataset.

    Sets the active (hovered) elements for the chart. See the “Programmatic Events” sample file to see this in action.

    1. chart.setActiveElements([
    2.     {datasetIndex: 0, index: 1},
    3. ]);

    Static: getChart(key)

    Finds the chart instance from the given key. If the key is a string, it is interpreted as the ID of the Canvas node for the Chart. The key can also be a CanvasRenderingContext2D or an HTMLDOMElement. This will return if no Chart is found. To be found, the chart must have previously been created.

    1. const chart = Chart.getChart("canvas-id");