Nivo 条形图轴标签重叠

Question

我正在使用@nivo/bar: "0.63.1" 来生成一个以“YYYYMMDD”格式接收日期的图表。随着图表变大，如何通过每 7 天或每 30 天等显示一次来防止 x 轴标签重叠？我尝试添加 tickValues 但它没有做任何事情。

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

Answer 1

一个解决方法是创建一个函数，如果日期不是星期一，return 一个空字符串：

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;
    },
}}