Skip to content

Commit c5f1413

Browse files
committed
Added documentation about tooltip templates
It can be a little unclear what the actual format for tooltip templates are. Added information concerning how the tooltip templates are evaluated, and what context, i.e., variables, is available inside of them.
1 parent 299c4b3 commit c5f1413

File tree

1 file changed

+19
-0
lines changed

1 file changed

+19
-0
lines changed

docs/00-Getting-Started.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -226,3 +226,22 @@ Chart.defaults.global.responsive = true;
226226
```
227227

228228
Now, every time we create a chart, `options.responsive` will be `true`.
229+
230+
###Tooltip Templates
231+
For the `tooltipTemplate` and `multiTooltipTemplate` configuration options, you may use special template blocks. **Do not use user input in the tooltip template, as it may be executed as raw JavaScript.**
232+
233+
Anything in between `<%` and `%>` will be executed as JavaScript. As in the example shown above, `<% if (label) { %>` and later `<% } %>`. Using `<%= expr %>` will print the value of the variable named by `expr` into the tooltip.
234+
235+
The available variables to print into the tooltip depends on the chart type. In general, the following variables are available:
236+
237+
```javascript
238+
{
239+
value : "value of the data point",
240+
label : "label for the position the data point is at",
241+
datasetLabel: "label for the dataset the point is from",
242+
strokeColor : "stroke color for the dataset",
243+
fillColor : "fill color for the dataset",
244+
highlightFill : "highlight fill color for the dataset",
245+
highlightStroke : "highlight stroke color for the dataset"
246+
}
247+
```

0 commit comments

Comments
 (0)