How Do I Add Tooltips to a Timeseries Chart?

How Do I Add Tooltips to a Timeseries Chart?

Timeseries charts are usually so dense that tooltips are hard to select, so they don't have them. However, if you really need them, then you can add them yourself.

  1. When you're filling-in the Chart Builder for a custom Timeseries chart, scroll down to the bottom of the Series Editor form on the left.

  2. Expand the Additional Pipeline (post-render) accordion.

  3. In the Monaco Editor window, paste the following code:
{ 
   "$addFields":{
        "chart.series.0.bullets": [{
            "type": "Circle",
            "width": 10, "height": 10,
            "strokeOpacity": 0, "fillOpacity": 0, 
            "showTooltipOn": "hover",
            "tooltipText": "{dateX.formatDate('MMM dd')} – {valueY}"
        }]
    }
}
  1. Toggle-on the Use Pipeline checkbox. You can preview the change in the Render Preview window in the upper-right.

  2. Click the OK button to accept the change.


The new stage changes the "bullet" that marks the tip of each point in the line in the chart: making it a bigger but transparent circular tooltip target. Then the stage adds the value paths for the tooltip and some modifiers and formatting.