Hover markers on StackedAreaChart are inaccurate when isAnimated is false
Closed this issue · 1 comments
mbaumbach commented
Bug summary
For some data sets, especially where a zero seems to be involved, the markers can be wrong when the isAnimated
prop is false.
Expected behavior
The marker Y location for the hovered dataset matches the value.
Actual behavior
See screenshot, the second blue marker should be at "0" instead of "1":
Steps to reproduce the problem
- Create a
StackedAreaChart
with data showed in reduced test case. - Set the
isAnimated
prop tofalse
. It works fine when animations are on. - Hover over the graph to see the incorrect markers.
Reduced test case
Specifications
- Polaris-Viz version number: 6.6.0
- Browser: Chrome
- Device: MacBook Pro
- Operating System: macOS Monterey
mbaumbach commented
In case the sandbox is not working, here's the code for index.js
:
import * as React from "react";
import { render } from "react-dom";
import { PolarisVizProvider, StackedAreaChart } from "@shopify/polaris-viz";
import "@shopify/polaris-viz/build/esm/styles.css";
import "./styles.css";
class Playground extends React.Component {
render() {
return (
<PolarisVizProvider>
<StackedAreaChart
data={[
{
name: "Impressions",
data: [
{ key: "2022-07-10", value: 1 },
{ key: "2022-07-11", value: 0 },
{ key: "2022-07-12", value: 0 }
]
},
{
name: "Conversions",
data: [
{ key: "2022-07-10", value: 0 },
{ key: "2022-07-11", value: 0 },
{ key: "2022-07-12", value: 0 }
]
}
]}
isAnimated={false}
/>
</PolarisVizProvider>
);
}
}
render(<Playground />, document.getElementById("root"));