How do we skip displaying values on the X axis?

[Mathieu Jobin]

Hi,

my X axis contains more than 700 values (dates), which overlaps and looks like a big gray box.

How do I skip values, or override how this is displayed?

thanks

[Laszlo Simon]

Hi,
This behavior cannot be configured explicitly for now. However, you can override the label drawing event to solve this.
Here is an example, which does the same:
https://github.com/vizzuhq/vizzu-lib-doc/blob/main/docs/stories/musicformats/musicformats.js#L87
(the event handler in this example will allow the rendering of every 5th label)

You may also want to rotate the labels if they still overlap by setting the plot.xAxis.label.angle style parameter.

[Mathieu Jobin]

Oh thank you ! That's a very helpful work around.

its my first time with Vizzu, it works amazingly great, even if tons of data.

fixed my problem like this, I also ended up removing some data, down from 2 years to 2 months.

let anim = chart.initializing;
anim = anim.then(chart => {
  chart.on('plot-axis-label-draw', event => {
    let date_i = parseInt(event.data.text.replace("-", ""));
    console.log(date_i);
    if (!isNaN(date_i) && date_i % 5 != 0) {
      event.preventDefault();
    }
  });
});

feel free to close this issue if there isn't enough interests fixing this issue in a more elegant way.

[Laszlo Simon]

Thanks, I'm glad that you're happy with Vizzu!
I will leave this issue open as a feature request. We shall add a config parameter for this behavior in the future.

[Laszlo Simon]

@mathieujobin One more thing: It would be great to see what you build using Vizzu. Send us a link if you feel like it.

[Mathieu Jobin]

Sure thing
https://fifty-fifty.5gl.org/covid/tokyo_cases_per_city

I've been waiting for a library like Vizzu for a long time, D3 has never worked well for me.
Backend is Rails 7, and it was super easy to integrate it.

[Laszlo Simon]

Thanks!

[Mathieu Jobin]

I don't mind the existing workaround, works well.

closing this