Using custom colors for a bar chart

Joel Milgram

March 31, 2017 at 12:03 pm #4079

Good morning everyone,

I have designed my first chart with Spark and it works fine!! I use IBM BPM on Cloud (8.5.7) + Spark UI Toolkit 4.3.1 EE

Meet my chart: (see attachment)

Now, I would like to change the color of the bars but without using transparent, primary, success, warning, error.

The Yellow bar should be yellow, the Red: red, the Grey: grey 🙂

Has anyone of you already done this?

Many thanks in advance,

Joel
—

Joël Milgram – IBM / Smarter Process
Technical Sales & Solutions – Software France
+33 6 45 74 96 40
[email protected]
—

 

SPARK Support

March 31, 2017 at 12:19 pm #4081

Hi Joel,

The Bar Chart control sets the fill and stroke colors by access the c3 slices.  You should be able to drop a Custom HTML control on the Coach and add the following Style:

<style>
.c3-bar-0{
fill: yellow !important;
stroke: darkgoldenrod !important;
}
.c3-bar-1{
fill: red !important;
stroke: darkred !important;
}
.c3-bar-2{
fill: grey !important;
stroke: darkgrey !important;
}
</style>

Also, if you want to adjust the size of the outline, you can add:

.c3-bar{
stroke-width: 3px !important;
}

Regards,

Stephen P.

Joel Milgram

April 5, 2017 at 6:11 am #4093

Hi Stephen,

Many thanks for your solution, that’s exactly what I needed.

I have a more difficult question tho…
I’ve added drill-downs on my bar chart.  Do you think that it could be possible to change the set of colors of the bars depending on the depth?
For example: the first level displays 3 bars (yellow, red, grey). Then I drill down on one of them to see the repartition by country and then I don’t want to have yellow red and grey but other colors.