# XY Chart Tooltip - Is possible to use the if condition in the expression?

**URL:** <https://forum.inductiveautomation.com/t/xy-chart-tooltip-is-possible-to-use-the-if-condition-in-the-expression/96897>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [October 7, 2024, 12:30pm UTC](https://forum.inductiveautomation.com/t/xy-chart-tooltip-is-possible-to-use-the-if-condition-in-the-expression/96897 "2024-10-07T12:30:16Z")\
**Posts on this page:** 17\
**Page:** 1

<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:** [October 7, 2024, 12:30pm UTC](https://forum.inductiveautomation.com/t/xy-chart-tooltip-is-possible-to-use-the-if-condition-in-the-expression/96897/1 "2024-10-07T12:30:16Z")

</div>

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:

```python
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?

---

<div class="post-metadata">

**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\
**Post date:** [October 7, 2024, 12:34pm UTC](https://forum.inductiveautomation.com/t/xy-chart-tooltip-is-possible-to-use-the-if-condition-in-the-expression/96897/2 "2024-10-07T12:34:42Z")

</div>

Hi, make sure your path reference to stato\_lotto is right, for example:  
{.../Statos.custom.stato\_lotto}

---

<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:** [October 7, 2024, 12:35pm UTC](https://forum.inductiveautomation.com/t/xy-chart-tooltip-is-possible-to-use-the-if-condition-in-the-expression/96897/3 "2024-10-07T12:35:56Z")

</div>

Hi Alejandro, actually is not based on a custom property, but is a property of the dataSources

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [October 7, 2024, 12:44pm UTC](https://forum.inductiveautomation.com/t/xy-chart-tooltip-is-possible-to-use-the-if-condition-in-the-expression/96897/4 "2024-10-07T12:44:09Z")

</div>

You are quoting `stato_lotto`, so it is just a string with curly braces. For curly braces to be evaluated in an expression, they must **not** be quoted. Where you wish to perform string operations, use `concat()` or arithmetic `+`, combined with quoted constant strings.

---

<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:** [October 7, 2024, 1:05pm UTC](https://forum.inductiveautomation.com/t/xy-chart-tooltip-is-possible-to-use-the-if-condition-in-the-expression/96897/5 "2024-10-07T13:05:16Z")

</div>

Forgive me Phil, I don't think to have understood correctly.

You mean something like this?

```python
if( concat('{', 'stato_lotto', '}') = 'NO',

```

I have no error with this expression but is not working, but I'm sure I don't understand right your explanation.  
If I don't quote the curly braces I have error in the Binding Preview.

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [October 7, 2024, 1:13pm UTC](https://forum.inductiveautomation.com/t/xy-chart-tooltip-is-possible-to-use-the-if-condition-in-the-expression/96897/6 "2024-10-07T13:13:30Z")

</div>

> [@Aiasa21](#):
>
> If I don't quote the curly braces I have error in the Binding Preview.

Use the property selector to insure you get the correct reference to the property that you want, the error is undoubtedly because the path is not recognized.

I would expect something more like this:

```python
if(this.props.dataSources.stato_loto} = 'NO', ...

```

Don't confuse the markup in the text with the expression language, the chart knows how to interpret the markup.

If you're trying to vary the tooltip based on the value of a column, I'm not sure you're headed in the correct direction. The expression language doesn't natively loop.

---

<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:** [October 7, 2024, 1:36pm UTC](https://forum.inductiveautomation.com/t/xy-chart-tooltip-is-possible-to-use-the-if-condition-in-the-expression/96897/7 "2024-10-07T13:36:36Z")

</div>

> [@lrose](#):
>
> Use the property selector to insure you get the correct reference to the property that you want

This "work" but of course in this way I have to choose the index statically.

> [@lrose](#):
>
> If you're trying to vary the tooltip based on the value of a column, I'm not sure you're headed in the correct direction. The expression language doesn't natively loop.

Yes, that's what I need to do. I guess that using directly the property of the tooltip (that is dynamic based on the value of the column I could do it.

Eventually, how could be possible to manage different tooltip text?

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [October 7, 2024, 1:41pm UTC](https://forum.inductiveautomation.com/t/xy-chart-tooltip-is-possible-to-use-the-if-condition-in-the-expression/96897/8 "2024-10-07T13:41:50Z")

</div>

> [@Aiasa21](#):
>
> Eventually, how could be possible to manage different tooltip text?

It's a little unclear to me exactly what you are wanting to do with the tool tip. Can you explain in detail, what conditions would make the tool tip change and what that change would be?

---

<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:** [October 7, 2024, 1:48pm UTC](https://forum.inductiveautomation.com/t/xy-chart-tooltip-is-possible-to-use-the-if-condition-in-the-expression/96897/9 "2024-10-07T13:48:10Z")

</div>

Of course sorry, I try to explain it.

I have this XY chart set as column that show the show the production status of some machines.

The tooltip show me the time the machine was off, the yield and other information about that machines. In other cases (but not always) I need to show more information in the tooltip, I know when to show this information because the property of every column "stato\_lotto" could be "YES" or "NO".

So I need to know the `stato_lotto` property of that specific column so to manage the tooltip text.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [October 7, 2024, 2:17pm UTC](https://forum.inductiveautomation.com/t/xy-chart-tooltip-is-possible-to-use-the-if-condition-in-the-expression/96897/10 "2024-10-07T14:17:33Z")

</div>

You can have a look at [Perspective XY Chart xAxes tooltip text {dateX}](https://forum.inductiveautomation.com/t/perspective-xy-chart-xaxes-tooltip-text-datex/53580/) where I've "documented" some of my findings for tooltip formatting.

There's a link in there somewhere to the AM Charts documentation. If they don't support expressions then Ignition probably can't help you. (The XY Chart component is based on the AM Charts XY Chart.)

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [October 7, 2024, 3:57pm UTC](https://forum.inductiveautomation.com/t/xy-chart-tooltip-is-possible-to-use-the-if-condition-in-the-expression/96897/11 "2024-10-07T15:57:04Z")

</div>

My [Embr-Charts](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/45) module’s `Chart.js` component allows for totally custom tooltip content.

> **[Tooltip | Chart.js](https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks)**
>
> Open source HTML5 Charts for your website

You can create callbacks that modify a section of the tooltip (title, body, footer, labels, etc.), or you go fully custom and create the entire tooltip yourself using the “External HTML Tooltip” functionality.

The `contex` parameter passed into the callback functions allows you to access the current hovered point (+ the rest of the chart’s properties), so you can choose what information you put on the tooltip.

The `self` parameter available in the callback is the Perspective component itself, which allows you access things like custom properties from within the callbacks.

I will say that this is fairly advanced and if you aren’t comfortable with Javascript you’ll probably have a bad time.

---

<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:** [October 8, 2024, 7:18am UTC](https://forum.inductiveautomation.com/t/xy-chart-tooltip-is-possible-to-use-the-if-condition-in-the-expression/96897/12 "2024-10-08T07:18:05Z")

</div>

@Transistor, I'm reading the documentation, the only thing that maybe could be useful is this is this, but I don't know how to implement it.

https://www.amcharts.com/docs/v4/tutorials/different-tooltip-content-per-each-level-of-force-directed-nodes/

@bmusson, thanks for your help, I wouldn't start from the beginning with all the work, I prefer to continue using the XY chart.. and as you say I have no knowledge in Javascript, but thanks again for the input

---

<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:** [October 10, 2024, 7:47am UTC](https://forum.inductiveautomation.com/t/xy-chart-tooltip-is-possible-to-use-the-if-condition-in-the-expression/96897/13 "2024-10-10T07:47:09Z")

</div>

> [@Transistor](#):
>
> If they don't support expressions then Ignition probably can't help you

I'm trying to do some tests about this, actually expressions are supported because if I do something like this

```python
if( True, 
concat( '{', 'labelYaxis', '}'),
concat('{', 'stato_lotto', '}') 
)

```

if I change True to False for example I've different return, what doesn't work is the string in the `if`, so if I try this

```python
if( concat('{', 'inProduzione', '}') = True, 
concat( '{', 'labelYaxis', '}'),
concat('{', 'stato_lotto', '}') 
)

```

or

```python
if( concat('{', 'inProduzione', '}') = '1', 
concat( '{', 'labelYaxis', '}'),
concat('{', 'stato_lotto', '}') 
)

```

they don't work. Any idea about this?

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [October 10, 2024, 8:08am UTC](https://forum.inductiveautomation.com/t/xy-chart-tooltip-is-possible-to-use-the-if-condition-in-the-expression/96897/14 "2024-10-10T08:08:40Z")

</div>

Those are bindings which determine what is fed _into_ the tooltip. They are not expressions _inside_ the tooltip - which is what you were asking about.

`if( True, ... `  
This is always true.

`if( concat('{', 'inProduzione', '}') = True, ...`  
This is never true. It would be the same as `if("hat" = true, ..., ...)` . It will always be false.

`if( concat('{', 'inProduzione', '}') = '1', ...`  
This is checking if the string '{inProduzione}' = '1'` which it doesn't. It will always return false.

Re-read what lrose wrote in post #5.

---

<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:** [October 10, 2024, 8:20am UTC](https://forum.inductiveautomation.com/t/xy-chart-tooltip-is-possible-to-use-the-if-condition-in-the-expression/96897/15 "2024-10-10T08:20:46Z")

</div>

Transistor, thank you for your reply, I appreciate it.

> [@Transistor](#):
>
> They are not expressions _inside_ the tooltip

I was missing this, I thought I could interpretate in the same way of the tooltip.  
So I surrender, I also try to insert a script change on the _tooltip \> text_ property because I guess maybe it changes but actually the text is static so I don't have any fire.

Thank you all for the help

---

<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:** [October 10, 2024, 2:08pm UTC](https://forum.inductiveautomation.com/t/xy-chart-tooltip-is-possible-to-use-the-if-condition-in-the-expression/96897/16 "2024-10-10T14:08:32Z")

</div>

In the end I opted to create a second series in order to manage the tooltips individually by setting the same Xaxis and creating a new Yaxis and then hiding it.

Thank you all for the help

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [October 10, 2024, 3:04pm UTC](https://forum.inductiveautomation.com/t/xy-chart-tooltip-is-possible-to-use-the-if-condition-in-the-expression/96897/17 "2024-10-10T15:04:29Z")

</div>

Yes, that works. You would need to generate two sets of data: one for each tooltip style. You could format them so they appear identical and nobody will ever know!

Don't forget to mark one of the posts as "Solution" - even your own - and it will show up quoted below the question.
