52
Views
10
Comments
Solved
Change connecting line colors of Radar Chart with multiple series
Question

Hi, 

This is my first time using a Radar Chart for my development, I have a multiple series in my radar chart, I want to customize each color of the series to follow based on the requirement. for example as attached, I want to change 'ALERT' to red, 'CAUTION' to yellow. I have tried several ways, but it only change marker point color. Can anyone help to explain how can i overwrite the default color for the connecting line and series color?


Screenshot 2024-01-03 at 10.00.06 AM.png
2024-05-08 06-29-37
Prince Aadil Khan Panwar
Solution

Hi nursyahira zulkeply,

take help from the OML. 

change the color for each series like that

Series A styling

Series B styling

sample - Click here

mark my reply as solution if you find it appropriate.

Thanks

Prince

RadarChart.oml
UserImage.jpg
syahira zulkeply

Hi, this solved my problem, however, the color doesnt reflected to the legend below the chart. As you can see, the line for series A has changed to Red, but the legend still shows Blue color for Series A.

Screenshot 2024-01-04 at 9.39.17 AM.png
2024-05-08 06-29-37
Prince Aadil Khan Panwar

try to fill colors like that for each series. as @Dorine Boudry advised if you dont put the line color but only fill color. it will work.


sample - Click here

Thanks

Prince

2024-01-31 05-29-41
Akshay Deshpande
Solution

Hello nursyahira zulkeply,

In addition to above answer, to clear the Details to add each series styling means (as it takes only single record, not list record), you need to copy and paste that placeholder again and in that, you need to add different color



Thanks and Regards,
Akshay Deshpande 

UserImage.jpg
syahira zulkeply

Hi, thanks! the solution is the same as above, however the changes doesnt reflected to the chart's legend. can help to check my comment on above solution? thank you!

2024-01-31 05-29-41
Akshay Deshpande
Solution

Hello ,

This works fine with the one series; the colour is applicable, but if we give the two series, it is not overridden. Earlier, this kind of issue happened with the chart. I think radar is not much used, so if you raise support, you will be able to solve this issue. As in Radar chart, there is no advance Format as it is all related to HighChart json

Image 1: I give both series name from styling 
Image 2: I remove the series name from styling 

Edit:

Pass the fill color property same way with proper series names


Thanks and Regards,

Akshay Deshpande


UserImage.jpg
syahira zulkeply
2024-01-31 05-29-41
Akshay Deshpande

This asset create the same thing: how to apply color and how to use all kind of charts 
https://www.outsystems.com/forge/component-overview/17801/how-to-use-charts-reactive-and-different-series-with-color

The demo link is here : https://akshayproject.outsystemscloud.com/SeriesColorChartDemo/Charts?_ts=638422232497217738


I hope this will help people understand charts better.

Thanks and Regards,
Akshay Deshpande

2024-01-31 05-29-41
Akshay Deshpande
Solution

Hello ,

This works fine with the one series; the colour is applicable, but if we give the two series, it is not overridden. Earlier, this kind of issue happened with the chart. I think radar is not much used, so if you raise support, you will be able to solve this issue. As in Radar chart, there is no advance Format as it is all related to HighChart json

Image 1: I give both series name from styling 
Image 2: I remove the series name from styling 

Edit:

Pass the fill color property same way with proper series names


Thanks and Regards,

Akshay Deshpande


2024-05-08 06-29-37
Prince Aadil Khan Panwar
Solution

Hi nursyahira zulkeply,

take help from the OML. 

change the color for each series like that

Series A styling

Series B styling

sample - Click here

mark my reply as solution if you find it appropriate.

Thanks

Prince

RadarChart.oml
UserImage.jpg
syahira zulkeply

Hi, this solved my problem, however, the color doesnt reflected to the legend below the chart. As you can see, the line for series A has changed to Red, but the legend still shows Blue color for Series A.

Screenshot 2024-01-04 at 9.39.17 AM.png
2024-05-08 06-29-37
Prince Aadil Khan Panwar

try to fill colors like that for each series. as @Dorine Boudry advised if you dont put the line color but only fill color. it will work.


sample - Click here

Thanks

Prince

2024-01-31 05-29-41
Akshay Deshpande
Solution

Hello nursyahira zulkeply,

In addition to above answer, to clear the Details to add each series styling means (as it takes only single record, not list record), you need to copy and paste that placeholder again and in that, you need to add different color



Thanks and Regards,
Akshay Deshpande 

UserImage.jpg
syahira zulkeply

Hi, thanks! the solution is the same as above, however the changes doesnt reflected to the chart's legend. can help to check my comment on above solution? thank you!

2024-01-31 05-29-41
Akshay Deshpande
Solution

Hello ,

This works fine with the one series; the colour is applicable, but if we give the two series, it is not overridden. Earlier, this kind of issue happened with the chart. I think radar is not much used, so if you raise support, you will be able to solve this issue. As in Radar chart, there is no advance Format as it is all related to HighChart json

Image 1: I give both series name from styling 
Image 2: I remove the series name from styling 

Edit:

Pass the fill color property same way with proper series names


Thanks and Regards,

Akshay Deshpande


UserImage.jpg
syahira zulkeply
2024-01-31 05-29-41
Akshay Deshpande

This asset create the same thing: how to apply color and how to use all kind of charts 
https://www.outsystems.com/forge/component-overview/17801/how-to-use-charts-reactive-and-different-series-with-color

The demo link is here : https://akshayproject.outsystemscloud.com/SeriesColorChartDemo/Charts?_ts=638422232497217738


I hope this will help people understand charts better.

Thanks and Regards,
Akshay Deshpande

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

just a small correction to answers already given : there is no need to use the linecolor, just the fillcolor will do.  Only use linecolor if it deviates from fillcolor

2024-05-08 06-29-37
Prince Aadil Khan Panwar

@Dorine Boudry okay thanks for the advice.

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