Another Chart Colors question

Jeff Goodhue

April 6, 2017 at 8:25 am #4100

I previously was working with Support, transferring this question to forums…

[Last Support Response]

I was able to adjust the colors for each slice by adding a Custom HTML control and dropping in the following style:

<style>
.c3-arc-No-Hail-Damage{
fill: rgb(9, 129, 228) !important;
}

.c3-arc-Minor-Hail-Damage{
fill: rgb(25, 60, 88) !important;
}

.c3-arc-Medium-Hail-Damage{
fill: rgb(175, 209, 236) !important;
}
</style>

Regards,

Stephen P.

 

[My Open Question]

I really am not sure why it did not work before on Mar 20, I guess it was a typo as it works now.  Thanks!

One more question, the legend is not updated with the above style on the arc classes. Looking at it, there are some classes such as .c3-legend-item-No-Hail-Damage, however, there is no style on this. There is an inner class .c3-legend-item-tile where I can apply a style but this name is common across all legend items so I cannot individually set the style per legend item. Can an inner class be referenced for the style or is this a defect/enhancement where I need an IBM PMR?

 

Thanks,
–Jeff

SPARK Support

April 6, 2017 at 2:29 pm #4101

Hi Jeff,

If you want the color of the legend to match, add a CSS Selector to the category fill color to indicate the fill should be on the tile class within the category class:

.c3-arc-Medium-Hail-Damage{
fill: rgb(175, 209, 236) !important;
}

.c3-arc-Medium-Hail-Damage > .c3-legend-item-tile{
fill: rgb(175, 209, 236) !important;
}

The first style will fill the slice.  The second style will fill the tile contained within the div identified by the category CSS.

Regards,

Stephen P.