]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
Added documentation about tooltip templates 1874/head
authorTyler Romeo <tylerromeo@gmail.com>
Sat, 9 Jan 2016 04:02:45 +0000 (20:02 -0800)
committerTyler Romeo <tylerromeo@gmail.com>
Sat, 9 Jan 2016 04:02:45 +0000 (20:02 -0800)
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.

docs/00-Getting-Started.md

index a16692d53afb01ab655a8bf30e62b67b13bc925f..d6db4651f73724674dd2c216f97aa03159f1fc9c 100644 (file)
@@ -226,3 +226,22 @@ Chart.defaults.global.responsive = true;
 ```
 
 Now, every time we create a chart, `options.responsive` will be `true`.
+
+###Tooltip Templates
+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.**
+
+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.
+
+The available variables to print into the tooltip depends on the chart type. In general, the following variables are available:
+
+```javascript
+{
+       value : "value of the data point",
+       label : "label for the position the data point is at",
+       datasetLabel: "label for the dataset the point is from",
+       strokeColor : "stroke color for the dataset",
+       fillColor : "fill color for the dataset",
+       highlightFill : "highlight fill color for the dataset",
+       highlightStroke : "highlight stroke color for the dataset"
+}
+```