C3: integer only of the x,y axis

Created on 15 Oct 2014  ·  9Comments  ·  Source: c3js/c3

how to make the axis tick to be integer only?
qq 20141015141217

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.
qq 20141015141829

is there a way to control the axis tick?

question resolved maybe

Most helpful comment

Better version:

    axis: {
        y: {
            tick: {
                format: function(x) { return x % 1 === 0 ? x : ''; }
            }
        }
    }

All 9 comments

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ivarkallejarv picture ivarkallejarv  ·  3Comments

Kreozot picture Kreozot  ·  3Comments

mwho picture mwho  ·  3Comments

zachallia picture zachallia  ·  3Comments

wojciechowskid picture wojciechowskid  ·  3Comments