Infogram allows you to customize the content and style of Line chart tooltips—the small information boxes that appear when you hover over a chart. You can provide deeper context and clarity for the data points.
Customizing tooltip content
- Select the chart and navigate to the Tooltip tab in the settings panel.
- Click on Customize content.
- A syntax-based editor will open, displaying the default tooltip content: category names, time series, or other labels for the X-axis (xLabel), and values (yLabel). Use this text box to arrange and format the tooltip content as desired.
- Optionally, you can remove the Color bubble from the tooltip with the toggle at the bottom.
- Preview the changes to the chart tooltip above to ensure the tooltip looks correct.
- You can always click Reset to come back to the default layout and style or use Ctrl+Z / Cmd+Z to go one step back.
Using the syntax editor
-
To remove any item, delete it from the text box.
-
To insert additional text, type it in the editor.
-
Use Add data to insert dynamic data from your dataset: Category, Value, and X-axis labels.
- You can change the position for all the placeholders in the text editor.
-
Format the content by selecting the text and applying Bold/Italic text formatting. It is possible to apply the same formatting using HTML syntax below:
Bold: Wrap text with <b> and </b> tags. Example: <b>{{xLabel}}</b>
Remove Bold by removing the tags.
Italic: Wrap text with <i> and </i> tags. Example: <i>{{xLabel}}</i>
Remove Italic by removing the tags.
Changing tooltip style
- Select the chart and navigate to the Tooltip tab in the settings panel.
- Click on Edit tooltip style.
- In the Style dropdown menu, select the Dark, Light or Transparent style.