React Nivo dashed line

I'm trying to create a react nivo line chart, with a dashed line instead of just a solid one. I've looked into patterns but I have no clue how to make one. Any help is appreciated.

nivo provides custom layer feature in the library and you can make use of it to customize the line from solid to dash

Here is the codesandbox I made for you to follow.

https://codesandbox.io/s/wonderful-lumiere-ouhwv?file=/src/components/LineChart.js

Include custom layer in ResponsiveLine's layers property

<ResponsiveLine
   ...
   layers={[ ..., DashedSolidLine] }
/>

Customize path style

const DashedSolidLine = ({ series, lineGenerator, xScale, yScale }) => {
  return series.map(({ id, data, color }, index) => (
    <path
      ...
      style={
        index % 2 === 0
          ? {
              // simulate line will dash stroke when index is even
              strokeDasharray: "3, 6",
              strokeWidth: 3
            }
          : {
              // simulate line with solid stroke
              strokeWidth: 1
            }
      }
  />
  ));
};