C3.js x-axis responses timeseries

Question

I am trying to create a graph that can look good on both the mobile and the desktop using c3 ( http://c3js.org/ ).

However, I am having trouble getting the x axis, which is a timer, to display the size of the change for mobile devices. The only way I was able to do this was to destroy the chart and recreate it from scratch. But this prevents me from adding a good transition to the chart, which would be very nice to have. [! [desktop view] [1]] [1]

I tried using the tick culling option on the x axis and set the maximum value to 8, but this parameter is ignored when using flush () or resize () .

So my question is: is there a way to change the values ​​of the x axis without having to destroy the graph and re-generate it? http://imgur.com/EMECqqB

Answer 1

I used onresized: function () {...}

or you can use onresize: function () { ... }

link

To change the cull height on a resized screen:

  axis: { x: { type: 'timeseries', tick: { culling: true, format: '%m-%d', fit:true, culling: { max: window.innerWidth > 500 ? 8 : 5 } } } }, onresized: function () { window.innerWidth > 500 ? chart.internal.config.axis_x_tick_culling_max = 8 : chart.internal.config.axis_x_tick_culling_max = 5; }, 

Here is an example: https://jsfiddle.net/07s4zx6c/2/

Answer 2

add mediaquery according to device size

like this.

 @media screen and (max-width:810px) { .c3 svg { font: .8em sans-serif; } }