How to style primaryCursor and SecondryCursor lines

[skswain96]

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.

[SaebAmini]

I was looking for a way to make the series themselves dashed and was able to achieve it via the strokeDasharray style, e.g.

strokeDasharray: '5 5'

Might be able to use the same for the other lines.