How to style primaryCursor and SecondryCursor lines #367
Open
Description
Hey, so I want to change the primaryCursor and SecondryCursor lines to dashed line, my Chart options look like this -
const primaryAxis = useMemo(
() => ({
position: "bottom",
showGrid: false,
invert: false,
shouldNice: true,
getValue: (datum) => datum.primary,
styles: {
line: {
strokeWidth: 1,
stroke: "#E6E6E9",
},
tick: {
strokeWidth: 1,
stroke: "#e6e6e900",
},
},
}),
[]
);
const secondaryAxes = useMemo(
() => [
{
position: "left",
elementType: "line",
showGrid: true,
shouldNice: true,
getValue: (datum) => datum.secondary,
minDomainLength: 1.25,
tickCount: 3,
showDatumElements: true,
curve: curveBumpX,
scaleType: "linear",
styles: {
line: {
strokeWidth: 8,
stroke: "red",
},
tick: {
strokeWidth: 8,
stroke: "red",
display: "none",
visibility: "hidden",
},
},
},
],
[]
);
const data = [
{
label: "Rice price",
data: [
{
primary: moment("2024-03-29T00:00:00.000Z").format("DD MMM"),
secondary: 32,
},
{
primary: moment("2024-03-30T00:00:00.000Z").format("DD MMM"),
secondary: 32.5,
},
{
primary: moment("2024-03-31T00:00:00.000Z").format("DD MMM"),
secondary: 33,
},
{
primary: moment("2024-04-01T00:00:00.000Z").format("DD MMM"),
secondary: 32,
},
{
primary: moment("2024-04-02T00:00:00.000Z").format("DD MMM"),
secondary: 32.5,
},
],
},
];
<Chart
options={{
data,
primaryAxis,
secondaryAxes,
padding: {
left: 0,
right: 0,
},
tooltip: {
show: false,
},
showDebugAxes: false,
showVoronoi: false,
memoizeSeries: true,
defaultColors: ["#61A1E7"],
interactionMode: "primary",
primaryCursor: {
show: true,
showLine: false,
showLabel: true,
},
}}
/>
I am using "react-charts": "^3.0.0-beta.57"
I am not able to figure out how to style them, a help will be highly appreciated.
Metadata
Assignees
Labels
No labels