-
Notifications
You must be signed in to change notification settings - Fork 756
Open
Description
After updating @visx/xychart to version 4.0.1-alpha.0, the behavior of tickFormat has changed.
tickFormat now receives unexpected intermediate values (0 β 1 range) instead of only the original x values from my dataset.
This breaks formatting logic and seems like a regression compared to previous versions.
Use a basic example based on the official documentation:
const data1 = [
{ x: "2020-01-01", y: 50 },
{ x: "2020-01-02", y: 10 },
{ x: "2020-01-03", y: 20 },
];
const data2 = [
{ x: "2020-01-01", y: 30 },
{ x: "2020-01-02", y: 40 },
{ x: "2020-01-03", y: 80 },
];
const accessors = {
xAccessor: (d: SeriesValue) => d.x,
yAccessor: (d: SeriesValue) => d.y,
};
<XYChart height={300} xScale={{ type: "band" }} yScale={{ type: "linear" }}>
<AnimatedAxis
orientation="bottom"
tickFormat={(value: string) => {
console.log(value);
return value;
}}
/>
<AnimatedGrid columns={false} numTicks={4} />
<AnimatedLineSeries dataKey="Line 1" data={data1} {...accessors} />
<AnimatedLineSeries dataKey="Line 2" data={data2} {...accessors} />
</XYChart>Actual Behavior
Console output:
0
0.1
0.2
0.3
0.4
0.5
0.6
0.7
0.8
0.9
1
2020-01-01
2020-01-02
2020-01-03
tickFormat receives normalized numeric values (0 β 1) that do not correspond to axis domain values.
Expected Behavior
tickFormat should receive only the actual x values from the dataset:
2020-01-01
2020-01-02
2020-01-03
This was the behavior prior to version 4.0.1-alpha.0.
Environment
@visx/xychart: 4.0.1-alpha.0
React: 18.3.1
Browser: Chrome
OS: Mac
Reactions are currently unavailable