219
Views
7
Comments
Solved
OutSystems Chart with multiple series and color
Application Type
Reactive
Service Studio Version
11.54.59 (Build 63275)

Hi... need your enlightenment here...
I want to create 2 charts : a column chart and a donut chart.
Both are from the same data, the difference is just, in the column chart, I want to group by Month..

I have successfully created both (screen capture attached)

My questions are :

1a. I didn't set the styling, leave them to the default. Why the colors different in both? 

1b. In the stacked column chart, there are series with the same color, although the series value is different, how come? This issue is not happening with the donut chart

2. How to specify the colors, so that the series in the first chart, corresponds with the series in second chart, like Red for series 1, blue for series 2 etc ? (I have put the same sort attribute in both data actions). . The problem is, I cannot state the series name as it's dynamic, so I cannot use multiple styling.


Thanks in advance for the enlightenment.


Screenshot 2024-05-15 181639.png
2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

Yes you can set series colors with dynamic series without knowing the names at design time.  

You just need to put together a list with series name + color.  (I would do that in same data action where you fetch data points.

Then in your chart widget add a list of series styling blocks, based on it.

2025-08-07 02-38-35
Christian B Susanto

Hi @Dorine Boudry thanks...

I specified the color in the data action, and both of them displayed correctly..

But one thing still bothering me... why the legend in the column chart has incorrect colors, while in the donut, they were correct?

2021-09-06 15-09-53
Dorine Boudry
 
MVP

I would say you (also) set the colors of the datapoints, not the series.

can you share an example oml ?

2025-08-07 02-38-35
Christian B Susanto

Oh right.... I put the color for the datapoints, not the series... how can I assign color to the series?

This chart is only a small part of bigger module... how can I share just this part as oml?  

2021-09-06 15-09-53
Dorine Boudry
 
MVP

Hi,

to answer your second question first, you can't share parts, so you would typically make a new small module with only enough in it to demonstrate the problem.

But in this case, the reason is you were not even styling the series yet, so no need for you to share, here's what you first try :

1) You need to create a list of the series that are in your chart, holding the series name with the desired color.  I would do that in the same data action that fetches the datapoints, probably somehow extracting the distinct series that you have datapoints for.

2) You need to put a listwidget inside the AddOns_Placeholder of the chart, and move the ChartSeriesStyling widget inside that list.

3) make the list of series you put together in 1) the source for that list widget in 2)

4) On the ChartSeriesStyling blocks in that list, pass in the SeriesName and the Styling/FillColor from your series list coming from the data action.

See attached oml

QDR_ChartsDynamicSeries.oml
2025-08-07 02-38-35
Christian B Susanto

Oh I get it.... so if the series is dynamic, where at maximum there will be 10 series, I just put 10 series styling in the placeholder, right?

2021-09-06 15-09-53
Dorine Boudry
 
MVP

no, a list, you don't have to determine upfront how many there will be

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.