Change the color of the charts

Custom Coding
,
1

Insert this code into Page Settings > Custom Code > Header field and replace BLOCKID with your block ID. Please note you need to check it with the published app; it will not show the changed color in preview or in Studio.

<script> 
window['BlockID-colors'] = ['#FE8070', '#DD7E6B'];
</script>

Screenshot 2023-08-19 at 17.55.21
Screenshot 2023-08-19 at 17.55.213116×1740 248 KB

2 Likes
2

Thank you, works great!

3

Thanks for sharing @Aramo – and welcome to the community!

4

Hi everyone, I would like to know which custom code I should use to change the colors of the chart based on given values. For example, I would like to chart the goals based on the status (achieved, missed, in progress) of the goals. Thanks in advance

1 Like
6

Trying to achieve this in march 2025 but no success yet, i have two charts (a pie and a bar chart) inside of a column container, could that be interfering with the css?

7

Hi @javierlaborde you can do this with new v5 charts using the code found in this doc. Note that this code is marginally supported and new charts are still a WIP: Custom Code Events and Style Selectors – Softr Help Docs

1 Like