# Infobox/ Tooltip on Timeseries chart

**URL:** <https://forum.inductiveautomation.com/t/infobox-tooltip-on-timeseries-chart/48926>\
**Category:** Ignition\
**Tags:** ignition80, perspective, ignition81\
**Created:** [July 17, 2021, 11:07pm UTC](https://forum.inductiveautomation.com/t/infobox-tooltip-on-timeseries-chart/48926 "2021-07-17T23:07:42Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![sathianandan.dharmas](https://avatars.discourse-cdn.com/v4/letter/s/53a042/32.png) [@sathianandan.dharmas](https://forum.inductiveautomation.com/u/sathianandan.dharmas)\
**Post date:** [July 17, 2021, 11:07pm UTC](https://forum.inductiveautomation.com/t/infobox-tooltip-on-timeseries-chart/48926/1 "2021-07-17T23:07:42Z")

</div>

Hi All  
Is it possible to customize the infobox under xTrace property for a time series chart. I want to be able to do an expression transform for an axis (not time) value and display a string instead of an integer in the infobox when hovered over. TIA

Cheers  
Sam

---

<div class="post-metadata">

**Author:** ![jespinmartin1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jespinmartin1/32/57175_2.png) [@jespinmartin1](https://forum.inductiveautomation.com/u/jespinmartin1)\
**Post date:** [July 18, 2021, 4:35am UTC](https://forum.inductiveautomation.com/t/infobox-tooltip-on-timeseries-chart/48926/2 "2021-07-18T04:35:55Z")

</div>

Everything is possible via JFreeChart libraries, you’ll need to get the domains axis and transform it to symbolic axis where, starting from 0, you can map integer values to any string.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [July 18, 2021, 6:48am UTC](https://forum.inductiveautomation.com/t/infobox-tooltip-on-timeseries-chart/48926/3 "2021-07-18T06:48:54Z")

</div>

You’re talking about Vision, but Perspective is tagged 🙂

---

<div class="post-metadata">

**Author:** ![sathianandan.dharmas](https://avatars.discourse-cdn.com/v4/letter/s/53a042/32.png) [@sathianandan.dharmas](https://forum.inductiveautomation.com/u/sathianandan.dharmas)\
**Post date:** [July 18, 2021, 2:31pm UTC](https://forum.inductiveautomation.com/t/infobox-tooltip-on-timeseries-chart/48926/4 "2021-07-18T14:31:28Z")

</div>

So not possible in perspective?

---

<div class="post-metadata">

**Author:** ![jespinmartin1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jespinmartin1/32/57175_2.png) [@jespinmartin1](https://forum.inductiveautomation.com/u/jespinmartin1)\
**Post date:** [July 18, 2021, 10:01pm UTC](https://forum.inductiveautomation.com/t/infobox-tooltip-on-timeseries-chart/48926/5 "2021-07-18T22:01:41Z")

</div>

Those tags I never read haha

---

<div class="post-metadata">

**Author:** ![jespinmartin1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jespinmartin1/32/57175_2.png) [@jespinmartin1](https://forum.inductiveautomation.com/u/jespinmartin1)\
**Post date:** [July 18, 2021, 10:05pm UTC](https://forum.inductiveautomation.com/t/infobox-tooltip-on-timeseries-chart/48926/6 "2021-07-18T22:05:07Z")

</div>

for now this looks impossible in perspective via infoBox

---

<div class="post-metadata">

**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\
**Post date:** [January 7, 2022, 9:42pm UTC](https://forum.inductiveautomation.com/t/infobox-tooltip-on-timeseries-chart/48926/7 "2022-01-07T21:42:08Z")

</div>

I was trying to make the infobox more visible. Though I would like to manipulate the axis possibly as well.

I can’t get any results from changing the style below it.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/9/69bd8ec6684a125cc3e99d1c377d45abd6d2879f.png)  
I thought that styles would modify it

still very light small grayish text for me  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/e/4e9a6f92a4c34de86a2747a5a6e2ad0f3087dafe.png)

---

<div class="post-metadata">

**Author:** ![swolnisty](https://avatars.discourse-cdn.com/v4/letter/s/7bcc69/32.png) [@swolnisty](https://forum.inductiveautomation.com/u/swolnisty)\
**Post date:** [January 7, 2022, 11:33pm UTC](https://forum.inductiveautomation.com/t/infobox-tooltip-on-timeseries-chart/48926/8 "2022-01-07T23:33:45Z")

</div>

The Power Chart component has the same issue. The only way I’ve found to change the x trace infobox text style for that component has been editing the CSS it uses. Here are the properties I found to do so:

```auto
/* timestamp text above the x-trace box */
.ia_timeMarker > g > text {
  fill: #205287 !important;
}

/* x-trace box itself */
.ia_timeSeriesChartComponent __xTrace__ box {
  fill: transparent;
  stroke: transparent !important;
}

/* text within the x-trace box */
.ia_timeSeriesChartComponent__labelText {
  fill: #205287 !important;
}

```

Personally, I like to make the x-trace box itself transparent because its width does not seem to adjust to the text inside it. You can also use the fill/stroke properties exposed on the component to do this.

Those CSS properties either need to be added to one of your theme CSS files or you could “inject” them via a style class property that takes a string value, a la @victordcq .

---

<div class="post-metadata">

**Author:** ![jespinmartin1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jespinmartin1/32/57175_2.png) [@jespinmartin1](https://forum.inductiveautomation.com/u/jespinmartin1)\
**Post date:** [January 8, 2022, 7:24am UTC](https://forum.inductiveautomation.com/t/infobox-tooltip-on-timeseries-chart/48926/9 "2022-01-08T07:24:31Z")

</div>

Wait, but how do you make the string dynamic based on the range axis?  
Via value mapping and style binding, right?

How the binding should look?

---

<div class="post-metadata">

**Author:** ![swolnisty](https://avatars.discourse-cdn.com/v4/letter/s/7bcc69/32.png) [@swolnisty](https://forum.inductiveautomation.com/u/swolnisty)\
**Post date:** [January 8, 2022, 7:39am UTC](https://forum.inductiveautomation.com/t/infobox-tooltip-on-timeseries-chart/48926/10 "2022-01-08T07:39:01Z")

</div>

Unfortunately, I don’t think you can modify the string that the text displays. My modifications apply only to the style in which the text is shown. If that is possible, maybe another, more knowledgeable forum dweller will let us know.
