How do we skip displaying values on the X axis?

This issue has been tracked since 2022-01-07.

Hi,

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

image

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

thanks

simzer wrote this answer on 2022-01-07

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.

mathieujobin wrote this answer on 2022-01-07

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.

simzer wrote this answer on 2022-01-08

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.

simzer wrote this answer on 2022-01-08

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

mathieujobin wrote this answer on 2022-01-08

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.

simzer wrote this answer on 2022-01-09

Thanks!

mathieujobin wrote this answer on 2022-02-06

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

closing this

More Details About Repo
Owner Name vizzuhq
Repo Name vizzu-lib
Full Name vizzuhq/vizzu-lib
Language JavaScript
Created Date 2021-06-07
Updated Date 2022-11-22
Star Count 1630
Watcher Count 19
Fork Count 65
Issue Count 17

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date