Conditional colors based on y-values

It would be nice if you could optionally specify a conditional function for the colors, similar to how it’s done in pure d3. My current need for this is to be able to show negative bars in a different color. I poked around in the source code, but it doesn’t seem that this is currently possible.

Here’s how I had envisioned the API, based on the negative bar chart example:

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, -200, -100, 400, 150, 250]
        ],
        type: 'bar',
        colors: {
            'data1': function(d) { return d.value < 0 ? '#C00' : '#0C0' }
        }
    },
    grid: {
        y: {
            lines: [{value: 0}]
        }
    }
});

I’m going to attempt this myself, but unfortunately due to work constraints, I don’t have time to fully understand the inner workings of the c3 library until this weekend. If I manage to get this working, I’ll be sure to send over a pull request.

[joshpurvis]

Given how this change affects the color of the legend rectangle as well, I think it might be a good idea to add a new config option to override legend colors. Something such as:

__legend_colors = getConfig(['legend', 'colors'], {}),

then on the API side:

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, -200, -100, 400, 150, 250]
        ],
        type: 'bar',
        colors: {
            'data1': function(d) { return d.value < 0 ? '#C00' : '#0C0'; }
        }
    },
    legend: {
        colors: {
            'data1': '#000'
        }
    }
});

[ed2386]

Hi @masayuki0812 , Love the work.

simple question, if i had 3 different colors that i needed to base my color bars in, is there a way to use @joshpurvis method?

Thanks