Community Tip - Stay updated on what is happening on the PTC Community by subscribing to PTC Community Announcements. X
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?
Solved! Go to Solution.
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.
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?
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.
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.