cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Learn all about the Community Ranking System, a fun gamification element of the PTC Community. X

Change Series Styling Options on Dynamic InfoTables

MP_10287512
12-Amethyst

Change Series Styling Options on Dynamic InfoTables

Hello,

 

In our solution we have several graphs and charts that are populated through dynamically created InfoTables and, as such, sometimes, the number of lines/bars is dynamic. However, we would like to style the bars and lines individually even still. For example, we'd like to have the first bar in a chart be Blue and the last one Red, regardless of the number of bars in the chart.

 

Is this possible?

ACCEPTED SOLUTION

Accepted Solutions
MP_10287512
12-Amethyst
(To:jensc)

Hello,

I apologize for taking so long to reply.
We have managed to do this through Custom CSS although I am having some trouble understanding how to change the Legend colors accordingly. But in any case, here's the Custom CSS that allowed us to change the first and the last column of a Waterfall Chart we created:

 

@supports (ptcs-style-unit: "PTCS-CHART-CORE-WATERFALL") {
#bars > div:first-child > [part~="bar"] {
border-color: red;
background: red;
}
#bars > div:last-child > [part~="bar"] {
border-color: cyan;
background: cyan;
}
}

 

In our use case, for the Waterfall Chart to keep its functionality we needed to have both the first and last bars be based off of the same Field in the InfoTable. However, they were different things, so we wanted to display both of them in different colors just to highlight that they are in fact different. This was the solution we came up with then.

View solution in original post

3 REPLIES 3

Hi @MP_10287512,

 

I don't think that's possible to style a specific bar or line in a bar/line chart.

Bar/line data having the same color usually suggest they are of the same series.

What's the use case/reason behind this requirement BTW?

 

Tony
jensc
17-Peridot
(To:TonyZhang)

Hello,

 

We could have similar use cases in my organization where we might have a certain type of product that is "connected" to a certain colour due to company regulations.

 

X product might always be shown with green and Y with red, and anything in-between might also have a set colour.

But all of these products might not always exist or be returned by some query.

 

I think this would be similar to the use case of OP. 

MP_10287512
12-Amethyst
(To:jensc)

Hello,

I apologize for taking so long to reply.
We have managed to do this through Custom CSS although I am having some trouble understanding how to change the Legend colors accordingly. But in any case, here's the Custom CSS that allowed us to change the first and the last column of a Waterfall Chart we created:

 

@supports (ptcs-style-unit: "PTCS-CHART-CORE-WATERFALL") {
#bars > div:first-child > [part~="bar"] {
border-color: red;
background: red;
}
#bars > div:last-child > [part~="bar"] {
border-color: cyan;
background: cyan;
}
}

 

In our use case, for the Waterfall Chart to keep its functionality we needed to have both the first and last bars be based off of the same Field in the InfoTable. However, they were different things, so we wanted to display both of them in different colors just to highlight that they are in fact different. This was the solution we came up with then.

Announcements


Top Tags