how to make the axis tick to be integer only?
what I have tried is to use the tick option:
tick: {
format: function(x) {
return (x == Math.floor(x)) ? x : "";
}
}
this can make the label only show integer, but the divid line on the axis still exits.
is there a way to control the axis tick?
on current development version (master) you can use axis.y.values to set list of ticks. for example
{
axis: {
y: {
ticks: [1,2,3]
}
}
}
but this cant be dynamical based on the data source, am i right?
You can calculate those values after data load, set it to chart.internal.config.axis_y_tick_values
and then call chart.flush()
to apply new axis values.
How about this code?
axis: {
y: {
tick: {
format: function (x) {
if (x != Math.floor(x)) {
var tick = d3.selectAll('.c3-axis-y g.tick').filter(function () {
var text = d3.select(this).select('text').text();
return +text === x;
}).style('opacity', 0);
return '';
}
return x;
}
}
}
}
It seems already solved, so please let me close.
FWIW, requiring knowing the internals of D3 and running JS seems really odd. I see that pattern a lot in these C3 issues: someone has a problem, and instead of offering a C3 option, 5-30 lines of javascript that manipulating the underlying SVG is with d3 is the accepted solution. I think in the long run that's going to be a huge detriment to the adoption of C3.
For this issue in particular, a "axis.y.tick.integer_only" option would be of incredible value. I'd love to provide an extension to C3 for this. I see an example extension here. Is there an extension guide somewhere that can guide me?
Thanks!
Edit: grammar.
You can calculate those values after data load, set it to chart.internal.config.axis_y_tick_values and then call chart.flush() to apply new axis values.
Referring to this, because I also had this problem today - doing flush()
will mess up the animation of data changing, and adding a delay also has some graphical glitches. However, setting chart.internal.config.axis_y_tick_values
to proper value before calling load()
works perfectly. Maybe this will be helpful for someone :).
Better version:
axis: {
y: {
tick: {
format: function(x) { return x % 1 === 0 ? x : ''; }
}
}
}
Thank you nnabinh - worked a treat.
Most helpful comment
Better version: