stark light
Currently testing out the Charts and I noticed I can't seem to get any event triggered by Interacting with the Legends. Is there anything else I need to due to get them to trigger correctly?
import { LineChart } from "@mantine/charts";
import { Box } from "@mantine/core";
import { ReferenceArea, ReferenceLine } from "recharts";
const data = [
{ id: 1, val1: 1, val2: 5 },
{ id: 2, val1: 2, val2: 6 },
{ id: 3, val1: 3, val2: 7 },
{ id: 4, val1: 4, val2: 8 },
{ id: 5, val1: 5, val2: 9 },
{ id: 6, val1: 6, val2: 10 },
];
function Charts() {
return (
<Box h={600} w={"100%"}>
<LineChart
mt={20}
h={"100%"}
data={data}
withLegend
legendProps={{
verticalAlign: "bottom",
onMouseDown: () => {
console.log("onMouseDown");
},
onClick: () => {
console.log("clicked");
},
onMouseOver: () => {
console.log("onMouseOver");
},
}}
dataKey="id"
series={[
{ name: "val1", color: "red.9" },
{ name: "val2", color: "blue.8" },
]}
>
<ReferenceLine y={3} stroke="red" />
<ReferenceArea
x1={1}
x2={4}
y1={1}
y2={3}
stroke="red"
fillOpacity={0.1}
/>
</LineChart>
</Box>
);
}
glacial rampart
