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:
- Go to https://nivo.rocks/time-range/.
- 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
}
]}
/>
)- Click the Chart tab to view the rendered example, and hover over the first square in the chart.
- You will see the hover text "2018-04-02" when hovering over the first square instead of "2018-04-01".
Screenshot
Additional Context
I can verify that the same bug appears when I implemented it in my own code.
Source: plouc/nivo