Dynamically change tick values, c3js

Question

I have a bar chart in c3js that uses category ticks on the x-axis. The tick values I want to display are set upon loading the chart:

    axis: {
      x: {
        tick:{
            rotate: -35,
            values: getTicks(displayData), //Return the tick values
            multiline:false
        },
        type: 'categorized'
      }
    }

The reason for setting the ticks manually on load, is I need to update them later.

I need to allow users to update the x axis range dynamically, without loading new data, and I want the number of ticks displayed to remain the same, but with different values obviously.

To change the x axis range, I use this function:

chart.axis.range({min: {x: minRange}, max: {x: maxRange}});

There is no function called chart.axis.values. Any ideas on how to change tick values dynamically?

EDIT - To be really clear, I do not wish to update the chart's values. That includes the x and y axis values. I only wish to change what ticks are displayed.

Answer 1

Something like this should work.

axis: {
    x: {
        type: 'timeseries',
        tick: {
            values: function(x) { return customTicks(x) },
            format: function(x) { return customFormat(x); },
        }
    }
}

customTicks() must return an array of Dates for this to work.

function customTicks(x) {
    start = x[0];
    end = x[1];
    result = [];
    for (var i = new Date(start); i <= end; i.setDate(i.getDate() + 1)) {
        result.push(new Date(i));
    }
    return result;
}

customFormat() takes the date and returns the string for that date. This gives you the flexibility to customize the format as needed.

function customFormat(x) {
}

It may not be particularly elegant but does the job. One benefit of this approach is that you can use the same functions on more than one chart and they will all exhibit identical behavior always.

Problem #1 with this approach is that it seems to call customTicks() for every data point just as it does for customFormat().

Problem #2 is that it generates a lot of these errors:

d3.v3.min.js:1 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

This has already been flagged on Stackoverflow at Added non-passive event listener to a scroll-blocking 'touchstart' event