Tooltips
Tooltips are informational messages that display when the user hovers over parts of a chart. Tooltips are defined in the Chart Tooltip field on the metric property settings.
Tooltip properties
Property | Description |
|---|---|
headerFormat | This is the first string that is added to the tooltip area. You can do string replacement, HTML, and CSS in this string. The default value of this will vary by chart type. |
pointFormat | This will be added immediately after the headerFormat. It works the same as the headerFormat. The default value of this will vary by chart type. This will repeat for each dimension when shared is set to true. |
footerFormat | This string will be added immediately after the pointFormat. It works exactly the same as the headerFormat. The default value of this will vary by chart type. |
enabled | This will turn the tooltip on or off. If its value is "true," the tooltip is enabled. If it is set to false," the tooltip is disabled. The default is "true." |
shared | When the tooltip is shared, the entire column of data you hover over will all be shown in the same tooltip. Otherwise, a tooltip will only show the data for the point you are currently hovering over. This is set to True by default. |
hideDelay | The number of milliseconds the tooltip will continue to show after you mouse off from a point or chart. Defaults to 500. |
valuePrefix | This string will be prepended to the y values in the tooltip. |
valueSuffix | This string will be appended to the y values in the tooltip. |
Formats
The object format should be used when you only want to specify one tooltip for the entire chart, and you want to set more properties than the pointFormat property.
You begin and end the object format with a curly bracket. Between the curly brackets, you add any properties you want, followed by a colon, followed by the value for that property. Each property must be separated by a comma.
For example:
{
pointFormat: "This is the value", shared: false,
hideDelay: 1000
}
Array format
Array format should be used when you want to specify multiple tooltips on the chart. This allows you to have a different tooltip for each type of layer in your template (i.e., you can have a different tooltip for your bar layer than you have for your line layer).
For the array format, you begin and end with a square bracket. Between the brackets, you can add as many tooltip object formats as you like. They must be separated by commas and an additional “layerType” property must be specified to say which layer type the tooltip should be applied to.
For example:
[{
layerType: "column",
pointFormat: "This will be shown for column layers.", shared: false,
hideDelay: 1000
},
{
layerType: "line",
pointFormat: "This will be shown for line layers"
}]
String format
This format should be used if you are only interested in setting the pointFormat value for the entire chart. If your format does not start with a bracket or curly brace, it is assumed to be a String format. Anything you enter into the tooltip field will appear in the tooltip as the value of the pointFormat property.
Layer types
Available layer types include Area, arearange, areaspline, areasplinerange, bar, boxplot, bubble, column, columnrange, errorbar, funnel, gauge, heatmap, line, pie, and pyramid.