CODEWITHSUNDEEP
javascriptd3.jsbar-chartc3.jsc3
Xiangwu
Xiangwu

Reputation: 745

c3.js - show tick label/value when zooming the chart

I am looking for a kind dynamic way to display the tick labels/values, when zooming the chart. This feature is available in some another js chart package, I am not sure if its available in c3, or because I didn't find this feature in c3 document.

zoom in the chart:

enter image description here enter image description here enter image description here

but, because my chart has many x values, so at the start, then tick value are overlapped: enter image description here

if i define: culling:{max:30}, the initial chart looks ok: enter image description here

but when zoom in the chart, the tick will show no more than 30: enter image description here

Anyone can help? thanks very much!

Upvotes: 3

Views: 2624

Answers (1)

Sean
Sean

Reputation: 15172

Look at onzoomend: http://c3js.org/reference.html#zoom-onzoomend

It gives you the min & max that it was zoomed to. You can use this to calculate what the culling property should be set to.

In other words, if you start fully zoomed out with a culling value of 30, and the user then zooms in, you might want to double that to 60 to show double the amount of labels. Or you might want to disable culling entirely if they're zoomed in close enough.

Upvotes: 1

Related Questions