CODEWITHSUNDEEP
jqueryhtmlcsschartsc3.js
Hariharan V.
Hariharan V.

Reputation: 191

c3 chart showing 0 value in Y axis

I have values as follows

c3.generate({
bindto: '#percentage_of_companies',
data: {
    x: 'x',
    columns: [
        ['Average Percentage', 3, 0, 0,],
        ['x', 'Overall', 'Admin','Aerospace'],
    ],
    type: 'bar',
    labels: {
        format: {
            'Average Percentage': function(v, id, i, j) {
                return (v);
            }
        }
    },
    },
},
size: {
    height: 800,
},
axis: {
    rotated: true,
    x: {
        type: 'category',
        tick: {
            rotate: 75,
            multiline: false
        },
    },
    y: {
        max: 100,
        tick: {
            values: [20, 40, 60, 80, 100]
        }

    },
},
legend: {
    show: false
},

The response I get is as follows, refer to the screenshot for information

enter image description here

I need the Y axis to show only 3 and the 0 should not be shown, it should be hidden.

Upvotes: 0

Views: 973

Answers (1)

mgraham
mgraham

Reputation: 6207

Add this to your config -->

onrendered: function () {
    d3.select(this.config.bindto).selectAll(".c3-chart-text text").style("display", function (d) {
        if (d && d.value === 0) return "none";
        return null;
    })
}

See https://jsfiddle.net/y4pqmht7/

Upvotes: 1

Related Questions