React Nivo dashed line

Question

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.

Answer 1

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
            }
      }
  />
  ));
};