CODEWITHSUNDEEP
jqueryhtmlchartsc3.js
Hariharan V.
Hariharan V.

Reputation: 191

c3 bar chart label color

I build a chart using following c3 code

            c3.generate({
        bindto: '#total_revenue',
            data: {
            x : 'x',
            columns: [
                ['Total Revenue',1.7,1.7,2.0,2.1,0],
                ['x','Less than 10M', '10M - 20M','20M - 40M','40M - 100M','More than 100M'],
            ],
            type: 'bar',
            labels:{
                format:{
                    'Total Revenue':  function (v, id, i, j){
                        return (v);
                    }
                }
            },
            colors: {
                'Total Revenue': function(d) {
                    if(d.value > 3){
                        return '#0075BD';
                    } 
                    if(d.value > 2){
                        return '#B0D1F2';
                    } else {
                        return '#F7A71A';
                    }
                }
            },
        },          
        size: {
            height: 220,
        },
        axis: {
            rotated: true,
            x: {
                type: 'category',
                tick: {
                    rotate: 75,
                    multiline: false
                },
            },
            y: {
                min: 1,
                max: 4,
                tick: {
                    values: [1, 2, 3, 4]
                }
            },
        },
        legend: {
        show: false
    },
    });

Which shows me following output response.

enter image description here

So Now I can see what result I wanted to see. But the label color in the bar is incorrect. I need to bar color to be yellow, blue etc whereas in need to keep the bar value label as black.

Any help in this could really help! Thanks

JS FIDDLE: https://jsfiddle.net/k5acudeg/4/

Upvotes: 2

Views: 1468

Answers (1)

Tygo
Tygo

Reputation: 192

C3.js does not give the option to add colors to the label trough the c3 framework itself. You will have to find the HTML element and style it.

.c3-chart-texts text {
   fill: red !important;
}

Adding !important is necessary in this case.

https://jsfiddle.net/9rovy48L/

UPDATE:

You can be more specific and change the color of each label:

.c3-chart-texts .c3-text-0 {
   fill: blue !important;
}

.c3-chart-texts .c3-text-1 {
   fill: red !important;
}

I hope this solves your issue.

Upvotes: 1

Related Questions