Can't edit style property on time series chart?

Ignition
1

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?

2

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.

3

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

4

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

1 Like
5

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:

.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.

1 Like
6

Close, but not the text I wanted to change. image

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:

.ia_timeMarker text {
    fill: black !important;
}
1 Like