Clever Geek Handbook

C3.js - show label / value label when scaling chart

I'm looking for a dynamic way to display tick labels / values ​​when scaling a chart. This feature is available in another js chart package, I'm not sure if it is available in c3, or because I didn't find this feature in the c3 doc.

enlarge the chart:

enter image description hereenter image description hereenter image description here

but since my chart has many x values, so at the beginning of the checkbox values ​​overlap: enter image description here

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

but when scaling the chart, the checkmark will show no more than 30: enter image description here

Can anyone please help? Many thanks!

+3


source to share


1 answer


Take a look onzoomend

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

It gives you the minimum and maximum value that it was increased by. You can use this to figure out what the culling property should be set to.



In other words, if you start zoomed in all the way with a cull size of 30 and then the user zooms in, you may need to double the value to 60 to display twice the number of labels. Or you can turn off culling entirely if they scale close enough.

+1


source






More articles:


All Articles