# Can't edit style property on time series chart?

**URL:** <https://forum.inductiveautomation.com/t/cant-edit-style-property-on-time-series-chart/33283>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [March 20, 2020, 5:53pm UTC](https://forum.inductiveautomation.com/t/cant-edit-style-property-on-time-series-chart/33283 "2020-03-20T17:53:55Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![tmahaffey](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tmahaffey/32/30949_2.png) [@tmahaffey](https://forum.inductiveautomation.com/u/tmahaffey)\
**Post date:** [March 20, 2020, 5:53pm UTC](https://forum.inductiveautomation.com/t/cant-edit-style-property-on-time-series-chart/33283/1 "2020-03-20T17:53:55Z")

</div>

I’m trying to edit the x-trace font. Nothing seems to be taking effect if I change the color or font family:

{  
“visible”: true,  
“infoBox”: {  
“visible”: true,  
“showTime”: true,  
“width”: 400,  
“dataFormat”: “0,0.##”,  
“stroke”: {  
“color”: “”,  
“width”: 1,  
“opacity”: 0.5,  
“dashArray”: 0  
},  
“fill”: {  
“color”: “”,  
“opacity”: 0.9  
},  
“style”: {  
“classes”: “”,  
“color”: “#000000”,  
“fontFamily”: “Arial”  
}  
},  
“line”: {  
“visible”: true,  
“color”: “”,  
“width”: 1,  
“opacity”: 0.5,  
“dashArray”: 0,  
“style”: {  
“classes”: “”  
}  
}  
}

I am thinking this is something that just needs to be patched in?

---

<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:** [March 24, 2020, 4:39pm UTC](https://forum.inductiveautomation.com/t/cant-edit-style-property-on-time-series-chart/33283/2 "2020-03-24T16:39:24Z")

</div>

Yes, right now we don’t have style properties that target the date/time text of the xtrace display. You can only style the vertical line and the box. I recall a feature request being opened for this, but if not, I will open one.

---

<div class="post-metadata">

**Author:** ![joostjojo](https://avatars.discourse-cdn.com/v4/letter/j/ac91a4/32.png) [@joostjojo](https://forum.inductiveautomation.com/u/joostjojo)\
**Post date:** [April 10, 2020, 10:18am UTC](https://forum.inductiveautomation.com/t/cant-edit-style-property-on-time-series-chart/33283/3 "2020-04-10T10:18:23Z")

</div>

> [@jball](#):
>
> atu

same problem for the xy chart here.can't change the font family

---

<div class="post-metadata">

**Author:** ![matt.eaton](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matt.eaton/32/72046_2.png) [@matt.eaton](https://forum.inductiveautomation.com/u/matt.eaton)\
**Post date:** [January 21, 2021, 8:21pm UTC](https://forum.inductiveautomation.com/t/cant-edit-style-property-on-time-series-chart/33283/4 "2021-01-21T20:21:58Z")

</div>

Bumping this topic, on a grey background it can’t be seen at all.

---

<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 1, 2021, 6:29pm UTC](https://forum.inductiveautomation.com/t/cant-edit-style-property-on-time-series-chart/33283/5 "2021-02-01T18:29:02Z")

</div>

This isn’t available through component properties at the moment, but this can be done through theming. Below is a CSS snippet you’ll need to add to a style overrides file. Note that `!important` is needed to override the style applied at the library level until these are exposed via component props:

```auto
.ia_timeSeriesChartComponent__labelText {
    fill: blue !important;
}

```

Theme files are in the gateway’s install directory: `%installDirectory%\data\modules\com.inductiveautomation.perspective\themes\...` . Check out the `readme.md` file in that directory. The last two sections in the file talk about making modifications to themes or building custom ones.

As an aside… We did open a ticket recently to add the ability to style the x-trace text via component properties.

---

<div class="post-metadata">

**Author:** ![matt.eaton](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matt.eaton/32/72046_2.png) [@matt.eaton](https://forum.inductiveautomation.com/u/matt.eaton)\
**Post date:** [February 4, 2021, 10:58pm UTC](https://forum.inductiveautomation.com/t/cant-edit-style-property-on-time-series-chart/33283/6 "2021-02-04T22:58:31Z")

</div>

Close, but not the text I wanted to change. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/8/289cc3b6934d940149f138612e47db6deb076901.png)

The code above changes the colour of the text marked B, I want to change the colour of the text marked A. What’s the CSS selector for that text?

Edit: I found it, if you’re looking to change that colour its:

```auto
.ia_timeMarker text {
    fill: black !important;
}

```