How to add a dotted grid background fill in victory area chart?

I've been trying to create an area chart filled with a dotted grid but have not been able to find any solution.

(https://i.sstatic.net/uy33U.png)

I was able to get to either a solid-filled background or a gradient background, but no luck with custom patterns. Is it even possible to do so? or any other charting library that supports this if not victory charts? Any help would be great here.

Solution

I think you need to define a <pattern /> and then use it to fill your <VictoryArea /> as you would normally do with SVG gradients.

I hope the following snippet can help you:

<div>
  <svg style={{ height: 0 }}>
    <defs>
      <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
        <!-- Your pattern HERE -->
        <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />
      </pattern>
    </defs>
  </svg>
  <VictoryChart>
    <VictoryArea
      style={{
        data: {fill: "url(#star)"}
      }}
      data={[
        { x: 1, y: 2 },
        { x: 2, y: 3 },
        { x: 3, y: 7 },
        { x: 4, y: 4 },
        { x: 5, y: 5 }
      ]}
    />
  </VictoryChart>
</div>