javascriptd3.jschartsnivo-slider

Nivo bar chart axis labels overlapping

I am using @nivo/bar: "0.63.1" to generate a chart that takes in dates in "YYYYMMDD" format. How do I prevent the x-axis labels from overlapping by showing every 7 days or every 30 days and etc... as the chart gets larger? I have tried adding tickValues and it doesn't do anything.

        axisBottom={{
            tickValues: 7,
            format: function (value) {
                return moment(value).format('DD');
            },
        }}

enter image description here

Solution

  • One workaround would be to create a function and return an empty string if the date is not a Monday:

    const isMonday = value => moment(value).day() === 1;

axisBottom={{
    format: function (value) {
        return isMonday(value) ? moment(value).format('DD') : "";
    },
    tickSize: function (value) {
        return isMonday(value) ? 5 : 0;
    },
}}