Probably the best way to provide some context is showing the code:

/

var arrayOfDates = ['Jun 2015', 'May 2015', 'Mar 2015', 'Feb 2015', 'Jan 2015', 'Dec 2014'];
var arrayOfData = [7.25, 10.001, 10, 8.39, 10.002, 6.76]
var cautionColor = '#AB2522';
var bronzeColor = '#8C7853';
var silverColor = '#CCCCCC';
var goldColor = '#FFCC00';
var neutralColor = "#ffffff";

var chart = c3.generate({
bindto: '#divForGraph_1',
size: {
    height: 203,
    width: 380
},
data: {
    columns: [
        ['period'].concat(arrayOfData)
    ]
    ,
    types: {
        period: 'bar'
    }
    ,
    labels: true
    ,
    names: {
        period: 'Scoring Table'
    }
    ,
    color: function (color, d) {
        if (d.value < 4) {
            return cautionColor;
        } else if (d.value < 7) {
            return bronzeColor;
        } else if (d.value < 10) {
            return silverColor;
        } else if (d.value > 10 && d.value < 10.001) {
            return neutralColor;
        } else if (d.value >= 10.001) {
            return neutralColor;
        }

        return goldColor;
    }
    ,
    axis: {
        y: {
            label: {
                text: 'Scores',
                position: 'inner-middle'
            }
        },
        x: {
            type: 'timeseries',
            tick: {
                fit: true
            }
        }
    }
}
,
axis: {
 x:{
     type: 'category',
     categories: arrayOfDates
 }
}
});

chart.axis.max({
y: 10.002
});
chart.axis.min({
y: 0
});

In that bar chart, there are some "special" values. I'm looking for a way to customize those values as follow:

• 10.001 = "N/S"
• 10.002 = "N/A"

The rest of values from 0 to 10 in the y axis should keep the way they are.

Another requirement is that the Y axis should show values only from 0 to 10.

Modify the DOM with jQuery might be a solution, but it's kind of hacking, I'd like to get the result using correctly the API.

Any help is appreciated!

Probably the best way to provide some context is showing the code:

http://jsfiddle/ron_camaron/baa0q55j/12/

var arrayOfDates = ['Jun 2015', 'May 2015', 'Mar 2015', 'Feb 2015', 'Jan 2015', 'Dec 2014'];
var arrayOfData = [7.25, 10.001, 10, 8.39, 10.002, 6.76]
var cautionColor = '#AB2522';
var bronzeColor = '#8C7853';
var silverColor = '#CCCCCC';
var goldColor = '#FFCC00';
var neutralColor = "#ffffff";

var chart = c3.generate({
bindto: '#divForGraph_1',
size: {
    height: 203,
    width: 380
},
data: {
    columns: [
        ['period'].concat(arrayOfData)
    ]
    ,
    types: {
        period: 'bar'
    }
    ,
    labels: true
    ,
    names: {
        period: 'Scoring Table'
    }
    ,
    color: function (color, d) {
        if (d.value < 4) {
            return cautionColor;
        } else if (d.value < 7) {
            return bronzeColor;
        } else if (d.value < 10) {
            return silverColor;
        } else if (d.value > 10 && d.value < 10.001) {
            return neutralColor;
        } else if (d.value >= 10.001) {
            return neutralColor;
        }

        return goldColor;
    }
    ,
    axis: {
        y: {
            label: {
                text: 'Scores',
                position: 'inner-middle'
            }
        },
        x: {
            type: 'timeseries',
            tick: {
                fit: true
            }
        }
    }
}
,
axis: {
 x:{
     type: 'category',
     categories: arrayOfDates
 }
}
});

chart.axis.max({
y: 10.002
});
chart.axis.min({
y: 0
});

In that bar chart, there are some "special" values. I'm looking for a way to customize those values as follow:

• 10.001 = "N/S"
• 10.002 = "N/A"

The rest of values from 0 to 10 in the y axis should keep the way they are.

Another requirement is that the Y axis should show values only from 0 to 10.

Modify the DOM with jQuery might be a solution, but it's kind of hacking, I'd like to get the result using correctly the API.

Any help is appreciated!

• javascript
• d3.js
• graph
• charts
• c3

• In the meanwhile I had to add this piece of code to modify the DOM with jQuery: { $('#divForGraph_1').find('.c3-text').each(function () { var theValue = parseFloat(this.innerHTML); switch (theValue) { case 10.001: this.innerHTML = 'N/S'; break; case 10.002: this.innerHTML = 'N/A'; break; } }); } – theRonny Commented Aug 24, 2015 at 19:49

1 Answer 1

You can add a format method for your data labels, like so

...
labels: {
    format: function (v, id, i, j) {
        if (v == 10.001)
            return "N/S";
        else if (v == 10.002)
            return "N/A";
        else
            return v;
    }
}
...

See http://c3js/reference.html#data-labels-format

Fiddle - http://jsfiddle/duc8sLmo/