# Time Series chart xtrace font

**URL:** <https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670>\
**Category:** Ignition\
**Created:** [February 2, 2022, 5:23pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670 "2022-02-02T17:23:03Z")\
**Posts on this page:** 11\
**Page:** 2

<div class="post-metadata">

**Author:** ![jball](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jball/32/11128_2.png) [@jball](https://forum.inductiveautomation.com/u/jball)\
**Post date:** [February 3, 2022, 5:54pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/21 "2022-02-03T17:54:00Z")

</div>

You’ll need to create an axis to use with the trend that you’ll configure for a given plot. Once both are in place, the property you’ll change is `plots[x].axes[x].tick.label.format`:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/5/250f23a03bd0d8a485139393491a8489b55f05a1.png)

There’s an option for “Comma-Separated Integer” that will give you the above display for your axis.

---

<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:** [February 3, 2022, 6:04pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/22 "2022-02-03T18:04:08Z")

</div>

I am in 8.1.0

I do not have that, and require a css workaround for now I think.

I could also benefit from a count too.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/9/c93cf97ee520eb1e378be329b00d680d7fd791df.png)

---

<div class="post-metadata">

**Author:** ![jball](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jball/32/11128_2.png) [@jball](https://forum.inductiveautomation.com/u/jball)\
**Post date:** [February 3, 2022, 7:22pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/23 "2022-02-03T19:22:22Z")

</div>

Gotcha. 8.1.11 was the release that included the prop for the axis data format.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [February 4, 2022, 8:59am UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/24 "2022-02-04T08:59:20Z")

</div>

Css is not able to format text like that.  
It can extent text with some symbols, but that also doesnt work in svgs.  
And the chart is in svg.  
The format igntion is doing is done in javascript (probably? it could be the gateway too i guess), which you dont have acces too (unless creating your own perspective module)

---

<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:** [February 4, 2022, 2:05pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/25 "2022-02-04T14:05:28Z")

</div>

I would be working to convince your company to upgrade. It’s just a minor upgrade so should go very smoothly and take only a few minutes. The benefit of all the bug fixes and added features far outweigh the risk, imnsho.

---

<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:** [February 4, 2022, 4:07pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/26 "2022-02-04T16:07:23Z")

</div>

Yes, I think we are headed that way.

Not sure of the timing.

---

<div class="post-metadata">

**Author:** ![andreas](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/andreas/32/18981_2.png) [@andreas](https://forum.inductiveautomation.com/u/andreas)\
**Post date:** [February 23, 2022, 1:12pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/27 "2022-02-23T13:12:53Z")

</div>

Hi Victor,

Do you know how to change the font-weight of the text in front of the colon in the xTrace-box (the label)?  
If I change to ‘font-weight:lighter’ e.g. it seems like it is only affecting the font of the value.

Now it’s like: **Label** :Value  
I want it to be: Label:Value

Best regards  
Andreas

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [February 23, 2022, 1:40pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/28 "2022-02-23T13:40:49Z")

</div>

```auto
.ia_timeSeriesChartComponent__labelText > tspan{
  font-weight:lighter !important;
}

```

This will apply to both the label and value

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/7/9765779bd31d398131d0dad10e88e50362c0f5d8.png)

---

<div class="post-metadata">

**Author:** ![andreas](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/andreas/32/18981_2.png) [@andreas](https://forum.inductiveautomation.com/u/andreas)\
**Post date:** [February 23, 2022, 1:50pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/29 "2022-02-23T13:50:38Z")

</div>

Sweet, works perfect 👌🏼

Thanks! 🙂

---

<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:** [July 8, 2022, 7:32pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/30 "2022-07-08T19:32:54Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/5/458bf34d8d5761bc4f6517021730e3ba78215fa9.png)  
@victordcq do you happen to have a solution for creating a background color for the top part of this xtrace information?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [July 11, 2022, 7:11am UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/31 "2022-07-11T07:11:15Z")

</div>

Unfortunatly you cant really add a normal background to svg text elements…

You could add a shadow and a clip to kinda create a box around it though

(just using red as an example, best to use a white/transparent i guess)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/6/667cd7312288686cd2bf39956ba9e3272f7ff6c8.png)

```auto
.ia_timeSeriesChartComponent __eventMarker__ box__timeLabel{
    filter: drop-shadow( 0px 0px 6px #F00);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%);
}

```

(you can go over a 100% to get a little bit of padding, might want to change the blur on the shadow a bit too)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/1/515a4c642caaa7704d5967f2f2a3b33e70048393.png)

[Previous page](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670.md?page=1)