Skip to main content
M
MP_1028751212-Amethyst
12-Amethyst
October 18, 2022
Solved

Change Series Styling Options on Dynamic InfoTables

  • October 18, 2022
  • 1 reply
  • 1412 views

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?

Best answer by MP_10287512

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.

1 reply

T
TonyZhangCommunity Manager
Support
November 14, 2022

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?

 

J
jensc17-Peridot
17-Peridot
November 15, 2022

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. 

M
MP_1028751212-AmethystAuthorAnswer
12-Amethyst
November 15, 2022

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.

    Terms & ConditionsAccessibility statement