Charts legends and colors

[Kuroshi]

Hi,

I wanted to change the colors of my charts and move the legends of it to top. Is this possible? Thanks

[Barbie]

Hi @Batchini,

You can change the position and colors of chart inside your Styles. You may refer to this: 

Hope this helps.

-Barbie

[taylorswiftlover]

I get that I can set the colors of the values in to whatever I can choose to, but does this also apply when my records are dynamic?

[SinJunYoung]

Just now, taylorswiftlover said:

I get that I can set the colors of the values in to whatever I can choose to, but does this also apply when my records are dynamic?

To answer the question, No. You can only set the assigned color for your existing values but this will be implemented randomly inside your records. 

[Barbie]

Hi @taylorswiftlover ,

If you want to change the color of a specific value you can use CSS code. 

You can create add a header and footer inside your Chart DataPage and paste this code on the Header:

<style>
rect.highcharts-point.highcharts-color-0:nth-child(1) {
fill: #insertcolorhere;
}
rect.highcharts-point.highcharts-color-0:nth-child(2) {
fill: #insertcolorhere;
}
rect.highcharts-point.highcharts-color-0:nth-child(3) {
fill: #insertcolorhere;
}
</style>

The number inside the parenthesis will correspond to the number of values from your columns. Here's a sample screenshot: https://c0acs764.caspio.com/dp/ba4a60009a119570a12e4c478dc4/files/3795862
Based on the screenshot, Central would be equal to 1, East would be equal to 2 and West would be equal to 3.

Please note that you need to change the number inside the parenthesis of the corresponding number of the column that you prefer to change the color.

I hope this works.

Thanks, 
Barbie

[futurist]

On 8/8/2020 at 2:34 AM, Barbie said:

Hi @taylorswiftlover ,

If you want to change the color of a specific value you can use CSS code. 

You can create add a header and footer inside your Chart DataPage and paste this code on the Header:

<style>
rect.highcharts-point.highcharts-color-0:nth-child(1) {
fill: #insertcolorhere;
}
rect.highcharts-point.highcharts-color-0:nth-child(2) {
fill: #insertcolorhere;
}
rect.highcharts-point.highcharts-color-0:nth-child(3) {
fill: #insertcolorhere;
}
</style>

The number inside the parenthesis will correspond to the number of values from your columns. Here's a sample screenshot: https://c0acs764.caspio.com/dp/ba4a60009a119570a12e4c478dc4/files/3795862
Based on the screenshot, Central would be equal to 1, East would be equal to 2 and West would be equal to 3.

Please note that you need to change the number inside the parenthesis of the corresponding number of the column that you prefer to change the color.

I hope this works.

Thanks, 
Barbie

 Hi,

Jus to add, you may refer to this link on how to apply CSS (such as hiding) multiple sibling elements all at once:

 

[Flowers4Algernon]

Hello~ I believe this forum post could be helpful, as well: