#2814·nivo

Bug: TimeRange does not render the first square in the date range

Author: unliquidCreated Jan 29, 2026Updated Jan 29, 2026

Bug Description

The square for the first day of a date range is not rendered when using TimeRange charts. For example, when creating a chart with "from"="2026-02-01" and "to"="2026-02-28", it renders cells from the 2nd to the 28th instead of from the 1st.

To Reproduce

There is actually a live demonstration of this bug on the Nivo website itself.

Steps to reproduce the behavior:

  1. Go to https://nivo.rocks/time-range/.
  2. Click on the code tab to view the code example. You will see the following code. Note that the from date is "2018-04-01":
import { ResponsiveTimeRange } from '@nivo/calendar'

const MyTimeRange = ({ data /* see data tab */ }) => (
    <ResponsiveTimeRange /* or TimeRange for fixed dimensions */
        data={data}
        from="2018-04-01"
        to="2018-08-12"
        emptyColor="#eeeeee"
        margin={{ top: 40, right: 40, bottom: 100, left: 40 }}
        dayBorderWidth={2}
        dayBorderColor="#ffffff"
        legends={[
            {
                anchor: 'bottom-right',
                direction: 'row',
                itemCount: 4,
                itemWidth: 42,
                itemHeight: 36,
                itemsSpacing: 14,
                itemDirection: 'right-to-left',
                translateX: -60,
                translateY: -60,
                symbolSize: 20
            }
        ]}
    />
)
  1. Click the Chart tab to view the rendered example, and hover over the first square in the chart.
  2. You will see the hover text "2018-04-02" when hovering over the first square instead of "2018-04-01".

Screenshot

Image

Additional Context

I can verify that the same bug appears when I implemented it in my own code.