# How to do a dynamic tooltip in the XYChart Component

**URL:** <https://forum.inductiveautomation.com/t/how-to-do-a-dynamic-tooltip-in-the-xychart-component/114061>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [February 19, 2026, 10:13am UTC](https://forum.inductiveautomation.com/t/how-to-do-a-dynamic-tooltip-in-the-xychart-component/114061 "2026-02-19T10:13:09Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![danielps1818](https://avatars.discourse-cdn.com/v4/letter/d/ecae2f/32.png) [@danielps1818](https://forum.inductiveautomation.com/u/danielps1818)\
**Post date:** [February 19, 2026, 10:13am UTC](https://forum.inductiveautomation.com/t/how-to-do-a-dynamic-tooltip-in-the-xychart-component/114061/1 "2026-02-19T10:13:09Z")

</div>

Hi!

I have a XYChart configured this way:

 ![{FB3C1931-77CC-484F-A918-3C31B1EEB211}](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/a/1abd38056e93ae5c6f6dce6ecbc0f5967c9a9ef6.png)

As you can see is a column series with 2 groups. Here is the JSON:

> **XYChart JSON**
>
> ```python
> [
> {
> "type": "ia.chart.xy",
> "version": 0,
> "props": {
> "xAxes": [
> {
> "name": "time",
> "label": {
> "enabled": false,
> "text": "Time",
> "color": ""
> },
> "visible": true,
> "tooltip": {
> "enabled": true,
> "text": "",
> "cornerRadius": 3,
> "pointerLength": 4,
> "background": {
> "color": "",
> "opacity": 1
> }
> },
> "inversed": false,
> "render": "date",
> "category": {
> "break": {
> "enabled": false,
> "startCategory": "",
> "endCategory": "",
> "size": 0.05
> }
> },
> "date": {
> "baseInterval": {
> "enabled": true,
> "timeUnit": "minute",
> "count": 1,
> "skipEmptyPeriods": false
> },
> "range": {
> "max": "",
> "min": "",
> "useStrict": false
> },
> "break": {
> "enabled": false,
> "startDate": "",
> "endDate": "",
> "size": 0.05
> },
> "inputFormat": "yyyy-MM-dd hh:mm:ss",
> "format": "MM/dd h a"
> },
> "value": {
> "range": {
> "max": "",
> "min": "",
> "useStrict": false
> },
> "logarithmic": false,
> "break": {
> "enabled": false,
> "startValue": 0,
> "endValue": 100,
> "size": 0.05
> },
> "format": "#,###.##"
> },
> "appearance": {
> "opposite": true,
> "inside": false,
> "labels": {
> "color": "",
> "opacity": 1,
> "rotation": 0,
> "verticalCenter": "middle",
> "horizontalCenter": "middle"
> },
> "grid": {
> "color": "",
> "opacity": 0.4,
> "dashArray": "",
> "minDistance": 60,
> "position": 0
> },
> "font": {
> "size": "12px",
> "weight": 500
> }
> },
> "renderer": {
> "labels": {
> "template": {
> "maxWidth": 70,
> "wrap": true
> }
> }
> }
> }
> ],
> "yAxes": [
> {
> "name": "state",
> "label": {
> "enabled": false,
> "text": "Process Temp",
> "color": ""
> },
> "visible": true,
> "tooltip": {
> "enabled": true,
> "text": "",
> "cornerRadius": 3,
> "pointerLength": 4,
> "background": {
> "color": "",
> "opacity": 1
> }
> },
> "inversed": true,
> "render": "category",
> "category": {
> "break": {
> "enabled": false,
> "startCategory": "",
> "endCategory": "",
> "size": 0.05
> }
> },
> "date": {
> "baseInterval": {
> "enabled": false,
> "timeUnit": "hour",
> "count": 1,
> "skipEmptyPeriods": false
> },
> "range": {
> "max": "",
> "min": "",
> "useStrict": false
> },
> "break": {
> "enabled": false,
> "startDate": "",
> "endDate": "",
> "size": 0.05
> },
> "inputFormat": "yyyy-MM-dd kk:mm:ss",
> "format": "M/d/yyyy HH:mm:ss"
> },
> "value": {
> "range": {
> "max": "",
> "min": "",
> "useStrict": false
> },
> "logarithmic": false,
> "break": {
> "enabled": false,
> "startValue": 0,
> "endValue": 100,
> "size": 0.05
> },
> "format": "#,###.##"
> },
> "appearance": {
> "opposite": false,
> "inside": false,
> "labels": {
> "color": "",
> "opacity": 1,
> "rotation": 0,
> "verticalCenter": "middle",
> "horizontalCenter": "middle"
> },
> "grid": {
> "color": "",
> "opacity": 0,
> "dashArray": "",
> "minDistance": null,
> "position": 0.5
> },
> "font": {
> "size": "",
> "weight": 500
> }
> }
> }
> ],
> "series": [
> {
> "name": "timeline",
> "label": {
> "text": ""
> },
> "visible": true,
> "hiddenInLegend": true,
> "defaultState": {
> "visible": true
> },
> "data": {
> "source": "data",
> "x": "start",
> "y": "name"
> },
> "xAxis": "time",
> "yAxis": "state",
> "zIndex": 0,
> "tooltip": {
> "enabled": true,
> "text": "{tooltip}",
> "cornerRadius": 3,
> "pointerLength": 4,
> "background": {
> "color": "",
> "opacity": 1
> }
> },
> "render": "column",
> "candlestick": {
> "open": {
> "x": "",
> "y": ""
> },
> "high": {
> "x": "",
> "y": ""
> },
> "low": {
> "x": "",
> "y": ""
> },
> "appearance": {
> "fill": {
> "color": "",
> "opacity": 1
> },
> "stroke": {
> "color": "",
> "opacity": 1,
> "width": 1
> },
> "stacked": false,
> "deriveFieldsFromData": {
> "fill": {
> "color": "",
> "opacity": ""
> },
> "stroke": {
> "color": "",
> "opacity": "",
> "width": ""
> }
> },
> "heatRules": {
> "enabled": false,
> "max": "",
> "min": "",
> "dataField": ""
> }
> }
> },
> "column": {
> "open": {
> "x": "end",
> "y": ""
> },
> "appearance": {
> "fill": {
> "color": "",
> "opacity": 1
> },
> "stroke": {
> "color": "",
> "opacity": 0,
> "width": 0
> },
> "width": null,
> "height": 70,
> "stacked": false,
> "deriveFieldsFromData": {
> "fill": {
> "color": "color",
> "opacity": ""
> },
> "stroke": {
> "color": "",
> "opacity": "",
> "width": ""
> }
> },
> "heatRules": {
> "enabled": false,
> "max": "",
> "min": "",
> "dataField": ""
> }
> }
> },
> "line": {
> "open": {
> "x": "",
> "y": ""
> },
> "appearance": {
> "connect": true,
> "tensionX": 1,
> "tensionY": 1,
> "minDistance": 0.5,
> "stroke": {
> "width": 3,
> "opacity": 1,
> "color": "",
> "dashArray": ""
> },
> "fill": {
> "color": "",
> "opacity": 0
> },
> "bullets": [
> {
> "enabled": false,
> "render": "circle",
> "width": 10,
> "height": 10,
> "label": {
> "text": "{value}",
> "position": {
> "dx": 0,
> "dy": 0
> }
> },
> "tooltip": {
> "enabled": true,
> "text": "{name}: [bold]{valueY}[/]",
> "cornerRadius": 3,
> "pointerLength": 4,
> "background": {
> "color": "",
> "opacity": 1
> }
> },
> "fill": {
> "color": "",
> "opacity": 1
> },
> "stroke": {
> "color": "",
> "width": 1,
> "opacity": 1
> },
> "rotation": 0,
> "deriveFieldsFromData": {
> "fill": {
> "color": "",
> "opacity": ""
> },
> "stroke": {
> "color": "",
> "opacity": "",
> "width": ""
> },
> "rotation": ""
> },
> "heatRules": {
> "enabled": false,
> "max": 100,
> "min": 2,
> "dataField": ""
> }
> }
> ]
> }
> },
> "stepLine": {
> "open": {
> "x": "",
> "y": ""
> },
> "appearance": {
> "connect": true,
> "tensionX": 1,
> "tensionY": 1,
> "minDistance": 0.5,
> "stroke": {
> "width": 3,
> "opacity": 1,
> "color": "",
> "dashArray": ""
> },
> "fill": {
> "color": "",
> "opacity": 0
> },
> "bullets": [
> {
> "enabled": true,
> "render": "circle",
> "width": 10,
> "height": 10,
> "label": {
> "text": "{value}",
> "position": {
> "dx": 0,
> "dy": 0
> }
> },
> "tooltip": {
> "enabled": true,
> "text": "{name}: [bold]{valueY}[/]",
> "cornerRadius": 3,
> "pointerLength": 4,
> "background": {
> "color": "",
> "opacity": 1
> }
> },
> "fill": {
> "color": "",
> "opacity": 1
> },
> "stroke": {
> "color": "",
> "width": 1,
> "opacity": 1
> },
> "rotation": 0,
> "deriveFieldsFromData": {
> "fill": {
> "color": "",
> "opacity": ""
> },
> "stroke": {
> "color": "",
> "opacity": "",
> "width": ""
> },
> "rotation": ""
> },
> "heatRules": {
> "enabled": false,
> "max": 100,
> "min": 2,
> "dataField": ""
> }
> }
> ]
> }
> }
> }
> ],
> "dataSources": {}
> },
> "meta": {
> "name": "XYChart"
> },
> "position": {
> "shrink": 0,
> "basis": "190px"
> },
> "custom": {},
> "propConfig": {
> "props.dataSources.data": {
> "binding": {
> "config": {
> "path": "view.custom.data"
> },
> "type": "property"
> }
> }
> }
> }
> ]
> 
> ```

However, I would like to have different tooltip depending on where I place the cursor (top or bottom row). I tried to set a tooltip format in the data itself, so later I can reference the tooltip doing `{tooltip}`. However, then it doesn't show correctly.

 ![{BD1F301D-D772-47BF-B45E-1AA79605DC87}](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/d/dd51f7bfabe612bb5b873dec9ff04889905fe07a.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/5/f5123e9491e409136ace6bfcbe1775b94d4b7a01.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/8/f8a671e18344fceb593bbcedc5252802a8cbfaaa.png)

Any idea on how can I do this?

Thanks!

---

<div class="post-metadata">

**Author:** ![lane.duncan](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lane.duncan/32/83700_2.png) [@lane.duncan](https://forum.inductiveautomation.com/u/lane.duncan)\
**Post date:** [February 20, 2026, 10:18am UTC](https://forum.inductiveautomation.com/t/how-to-do-a-dynamic-tooltip-in-the-xychart-component/114061/2 "2026-02-20T10:18:05Z")

</div>

In your configuration you have one X axis, one Y axis, and one Series.....yet there are two distinct groups of data, one for State, the other for Planned.

I suspect that you need to form your input data differently so that the end product has two series, then each series will have unique tool tips.

Or maybe consider using the Equipment Schedule component instead of the XY chart?

---

<div class="post-metadata">

**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\
**Post date:** [February 20, 2026, 10:47am UTC](https://forum.inductiveautomation.com/t/how-to-do-a-dynamic-tooltip-in-the-xychart-component/114061/3 "2026-02-20T10:47:52Z")

</div>

I asked more or less the same here if it can help

> [@XY Chart Tooltip - Is possible to use the if condition in the expression?](https://forum.inductiveautomation.com/t/xy-chart-tooltip-is-possible-to-use-the-if-condition-in-the-expression/96897):
>
> Good morning, I'm struggling trying to display the tooltip in an XY Chart basing on a condition. I would like to change the text depending on the value of a series property. In my case I have the "stato\_lotto" property and I'm trying to do something like this: if( '{stato\_lotto}' = 'NO', 'Posizione: [bold] {nomeTooltip}' + "[/] \n" , 'Lotto: [bold] {stato\_lotto}' + "[/] \n" ) The tooltip is shown, but it doesn't change based on {stato\_lotto} value. Is this approach wrong?