| commit | author | age | ||
| 83c3f6 | 1 | # Chart Prototype Methods |
| SP | 2 | |
| 3 | For each chart, there are a set of global prototype methods on the shared `ChartType` which you may find useful. These are available on all charts created with Chart.js, but for the examples, let's use a line chart we've made. | |
| 4 | ||
| 5 | ```javascript | |
| 6 | // For example: | |
| 7 | var myLineChart = new Chart(ctx, config); | |
| 8 | ``` | |
| 9 | ||
| 10 | ## .destroy() | |
| 11 | ||
| 12 | 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. | |
| 13 | This must be called before the canvas is reused for a new chart. | |
| 14 | ||
| 15 | ```javascript | |
| 16 | // Destroys a specific chart instance | |
| 17 | myLineChart.destroy(); | |
| 18 | ``` | |
| 19 | ||
| 20 | ## .update(config) | |
| 21 | ||
| 22 | 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. | |
| 23 | ||
| 24 | ```javascript | |
| 25 | // duration is the time for the animation of the redraw in milliseconds | |
| 26 | // lazy is a boolean. if true, the animation can be interrupted by other animations | |
| 27 | myLineChart.data.datasets[0].data[2] = 50; // Would update the first dataset's value of 'March' to be 50 | |
| 28 | myLineChart.update(); // Calling update now animates the position of March from 90 to 50. | |
| 29 | ``` | |
| 30 | ||
| 31 | > **Note:** replacing the data reference (e.g. `myLineChart.data = {datasets: [...]}` only works starting **version 2.6**. Prior that, replacing the entire data object could be achieved with the following workaround: `myLineChart.config.data = {datasets: [...]}`. | |
| 32 | ||
| 33 | A `config` object can be provided with additional configuration for the update process. This is useful when `update` is manually called inside an event handler and some different animation is desired. | |
| 34 | ||
| 35 | The following properties are supported: | |
| 36 | * **duration** (number): Time for the animation of the redraw in milliseconds | |
| 37 | * **lazy** (boolean): If true, the animation can be interrupted by other animations | |
| 38 | * **easing** (string): The animation easing function. See [Animation Easing](../configuration/animations.md) for possible values. | |
| 39 | ||
| 40 | Example: | |
| 41 | ```javascript | |
| 42 | myChart.update({ | |
| 43 | duration: 800, | |
| 44 | easing: 'easeOutBounce' | |
| 45 | }) | |
| 46 | ``` | |
| 47 | ||
| 48 | See [Updating Charts](updates.md) for more details. | |
| 49 | ||
| 50 | ## .reset() | |
| 51 | ||
| 52 | Reset the chart to it's state before the initial animation. A new animation can then be triggered using `update`. | |
| 53 | ||
| 54 | ```javascript | |
| 55 | myLineChart.reset(); | |
| 56 | ``` | |
| 57 | ||
| 58 | ## .render(config) | |
| 59 | ||
| 60 | Triggers a redraw of all chart elements. Note, this does not update elements for new data. Use `.update()` in that case. | |
| 61 | ||
| 62 | See `.update(config)` for more details on the config object. | |
| 63 | ||
| 64 | ```javascript | |
| 65 | // duration is the time for the animation of the redraw in milliseconds | |
| 66 | // lazy is a boolean. if true, the animation can be interrupted by other animations | |
| 67 | myLineChart.render({ | |
| 68 | duration: 800, | |
| 69 | lazy: false, | |
| 70 | easing: 'easeOutBounce' | |
| 71 | }); | |
| 72 | ``` | |
| 73 | ||
| 74 | ## .stop() | |
| 75 | ||
| 76 | Use this to stop any current animation loop. This will pause the chart during any current animation frame. Call `.render()` to re-animate. | |
| 77 | ||
| 78 | ```javascript | |
| 79 | // Stops the charts animation loop at its current frame | |
| 80 | myLineChart.stop(); | |
| 81 | // => returns 'this' for chainability | |
| 82 | ``` | |
| 83 | ||
| 84 | ## .resize() | |
| 85 | ||
| 86 | Use this to manually resize the canvas element. This is run each time the canvas container is resized, but you can call this method manually if you change the size of the canvas nodes container element. | |
| 87 | ||
| 88 | ```javascript | |
| 89 | // Resizes & redraws to fill its container element | |
| 90 | myLineChart.resize(); | |
| 91 | // => returns 'this' for chainability | |
| 92 | ``` | |
| 93 | ||
| 94 | ## .clear() | |
| 95 | ||
| 96 | Will clear the chart canvas. Used extensively internally between animation frames, but you might find it useful. | |
| 97 | ||
| 98 | ```javascript | |
| 99 | // Will clear the canvas that myLineChart is drawn on | |
| 100 | myLineChart.clear(); | |
| 101 | // => returns 'this' for chainability | |
| 102 | ``` | |
| 103 | ||
| 104 | ## .toBase64Image() | |
| 105 | ||
| 106 | This returns a base 64 encoded string of the chart in it's current state. | |
| 107 | ||
| 108 | ```javascript | |
| 109 | myLineChart.toBase64Image(); | |
| 110 | // => returns png data url of the image on the canvas | |
| 111 | ``` | |
| 112 | ||
| 113 | ## .generateLegend() | |
| 114 | ||
| 115 | Returns an HTML string of a legend for that chart. The legend is generated from the `legendCallback` in the options. | |
| 116 | ||
| 117 | ```javascript | |
| 118 | myLineChart.generateLegend(); | |
| 119 | // => returns HTML string of a legend for this chart | |
| 120 | ``` | |
| 121 | ||
| 122 | ## .getElementAtEvent(e) | |
| 123 | ||
| 124 | Calling `getElementAtEvent(event)` on your Chart instance passing an argument of an event, or jQuery event, will return the single element at the event position. If there are multiple items within range, only the first is returned. The value returned from this method is an array with a single parameter. An array is used to keep a consistent API between the `get*AtEvent` methods. | |
| 125 | ||
| 126 | ```javascript | |
| 127 | myLineChart.getElementAtEvent(e); | |
| 128 | // => returns the first element at the event point. | |
| 129 | ``` | |
| 130 | ||
| 131 | To get an item that was clicked on, `getElementAtEvent` can be used. | |
| 132 | ||
| 133 | ```javascript | |
| 134 | function clickHandler(evt) { | |
| 135 | var firstPoint = myChart.getElementAtEvent(evt)[0]; | |
| 136 | ||
| 137 | if (firstPoint) { | |
| 138 | var label = myChart.data.labels[firstPoint._index]; | |
| 139 | var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index]; | |
| 140 | } | |
| 141 | } | |
| 142 | ``` | |
| 143 | ||
| 144 | ## .getElementsAtEvent(e) | |
| 145 | ||
| 146 | Looks for the element under the event point, then returns all elements at the same data index. This is used internally for 'label' mode highlighting. | |
| 147 | ||
| 148 | Calling `getElementsAtEvent(event)` on your Chart instance passing an argument of an event, or jQuery event, will return the point elements that are at that the same position of that event. | |
| 149 | ||
| 150 | ```javascript | |
| 151 | canvas.onclick = function(evt){ | |
| 152 | var activePoints = myLineChart.getElementsAtEvent(evt); | |
| 153 | // => activePoints is an array of points on the canvas that are at the same position as the click event. | |
| 154 | }; | |
| 155 | ``` | |
| 156 | ||
| 157 | This functionality may be useful for implementing DOM based tooltips, or triggering custom behaviour in your application. | |
| 158 | ||
| 159 | ## .getDatasetAtEvent(e) | |
| 160 | ||
| 161 | Looks for the element under the event point, then returns all elements from that dataset. This is used internally for 'dataset' mode highlighting | |
| 162 | ||
| 163 | ```javascript | |
| 164 | myLineChart.getDatasetAtEvent(e); | |
| 165 | // => returns an array of elements | |
| 166 | ``` | |
| 167 | ||
| 168 | ## .getDatasetMeta(index) | |
| 169 | ||
| 170 | 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. | |
| 171 | ||
| 172 | The `data` property of the metadata will contain information about each point, rectangle, etc. depending on the chart type. | |
| 173 | ||
| 174 | Extensive examples of usage are available in the [Chart.js tests](https://github.com/chartjs/Chart.js/tree/master/test). | |
| 175 | ||
| 176 | ```javascript | |
| 177 | var meta = myChart.getDatasetMeta(0); | |
| 178 | var x = meta.data[0]._model.x | |
| 179 | ``` | |
