5

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.

JasTonAChair
  • 1,948
  • 1
  • 19
  • 31

3 Answers3

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

Vishal
  • 2,097
  • 6
  • 27
  • 45
1

I am having the same difficulty updating the Y-Axis ticks values dynamically. I searched through the c3.js documents and was expecting to get something like chart.axis.values similar to chart.axis.range or chart.axis.max / chart.axis.min.

After digging into the Chart object on the console. I somehow managed to resolve my problem, but with a bit hacky way.

Please check the fiddle, I have played with the chart.internal which contains the chart's values on which graph is plotted. I changed those values and used chart.flush() method to redraw the chart.

Gopal Yadav
  • 368
  • 2
  • 8
0

According to https://github.com/c3js/c3/issues/827:

chart.internal.config.axis_x_tick_values = getTicks(displayData);

This works for me.

gruppler
  • 666
  • 9
  • 14