C3: Filter for ticks

Created on 4 Nov 2014 · 3Comments · Source: c3js/c3

What do you think about turning in addition values into somethink like filter of x? I mean the following possibility:

axis: {
  x: {
    tick: {
        values: function (x) {
           if(x.getDay() === 1) {
               return x;
           }
        }
    }
  }
}

Also that would be great to have such a possibility for y axis as well, for example, when you need to show areachart with y-values from 80 to 100% range that would be much nicer to display every second tick and gridline (i.e. 80, 82, 84, ...)

C-feature-request

Source

wojciechowskid

Most helpful comment

@masayuki0812
I can take this one.
How do i enlist?

michaelrodov on 8 May 2016

👍4

All 3 comments

With 0.3.0 I managed something similar with a reasonably simple override. The example below will show the first month of each year, for a month resolution timeseries.

var timeseriesTickTest = function(x) {
    var d = new Date(+x);
    if (d.getMonth() === 0) {
        return d;
    }
    return false;
};

c3.chart.internal.fn.mapTargetsToUniqueXs = function (targets) {
    var $$ = this;
    var xs = $$.d3.set($$.d3.merge(targets.map(function (t) { return t.values.map(function (v) { return +v.x; }); }))).values();
    return $$.isTimeSeries() ? xs.map(timeseriesTickTest).filter(Boolean) : xs.map(function (x) { return +x; });
}

craigloftus on 4 Nov 2014

Please let me mark as enhancement.
And basically ticks are automatically generated, so we cannot control as long as we set axis.x.tick.values. I mean if we can set a filter for ticks, it doesn't mean we can control them completely. The ticks we want need to be generated before filtered. I this case, if all of the ticks generated are 2nd day for each month, every tick will be filtered, then there will be no tick. So, I think we need other feature something like a callback to generating ticks dynamically.