I'm currently facing a challenge with highlighting specific values in a c3.js stacked bar chart. While I was able to change the color of an individual bar in a non-stacked bar following this example, I'm struggling to determine how to identify the indexes of values within a single stack. Here's my current JS code:
var chart = c3.generate({
bindto: '#chart1',
data: {
x: 'x',
columns: [
['x', "1ST", "2ND", "3RD", "4TH"],
['A', 6, 8, 2, 9],
['B', 3, 4, 1, 6],
['C', 4, 4, 2, 4]
],
type: 'bar',
groups: [
['A', 'B', 'C']
],
colors: {
A: '#666666',
B: '#cccccc',
C: '#428bca',
},
order: 'asc'
},
axis: {
x: {
type: 'category'
}
}
});
The approach taken in the example is:
color: function (color, f) {
return f.index === 4 ? "#dd0" : "#ddd";
}
I am still working on this and you can track my progress on JSFIDDLE. My question is how can I obtain the indexes of the three values within a single stack and then use them to customize their colors? For instance, if I want to highlight "2ND" by changing its color to a shade of red?