Time Series chart xtrace font

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:

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

1 Like

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.

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

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)

1 Like

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.

Yes, I think we are headed that way.

Not sure of the timing.

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

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

This will apply to both the label and value

image

2 Likes

Sweet, works perfect :ok_hand:t3:

Thanks! :slight_smile:

1 Like

image
@victordcq do you happen to have a solution for creating a background color for the top part of this xtrace information?

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)

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

2 Likes