C3 plots don't want Y-axis decimals
As you can see in the output, I am getting the decimal values on the y-axis. This is the number of downloads that cannot be equal to 1.5.
I tried to give the minimum value but couldn't get the result.
Also when I hover over the grid, I always get a zero value of 0 (over Microsoft in the image). Can I have my own text there?
function draw_tech_chart(){
var chart = c3.generate({
bindto: "#tech_chart",
data: {
columns: [['Microsoft', 5],['WebApplicationDevelopment', 2],['OpenSource', 2],['Content Management ', 2],['Open Source Middleware', 1],],
type : 'bar',
onclick: function (d, i) { console.log("onclick", d, i); },
onmouseover: function (d, i) { console.log("onmouseover", d, i); },
onmouseout: function (d, i) { console.log("onmouseout", d, i); }
},size: {
height: 250
}
});
source to share
Just format the check marks y to not display labels
var chart = c3.generate({
bindto: "#tech_chart",
...
axis: {
y: {
tick: {
format: function (d) {
return (parseInt(d) == d) ? d : null;
}
}
}
}
});
Alternatively, you can also loop through the values, find the max and set the y tick values manually for integers or integer multiples from 0 to max + (see http://c3js.org/reference.html#axis-y-tick- value )
Fiddle - http://jsfiddle.net/ovvywb5j/
source to share
You just need to manually calculate the Y-axis values. You can also format the title of the tooltip:
axis: {
y: {
tick : {values: [0,1,2,3,4,5]}
}
}, tooltip: {
format: {
title: function (d) { return 'Custom text'; },
}
}
Fiddle: http://jsfiddle.net/yymcjhgv/
source to share