CartesianGrid allows me to set the verticalPoints and horizontalPoints to be shown.
Unfortunately, these values are in pixel values on the chart, not in the coordiantes of the x and y domains.
I must be missing something. I have an x-axis and a y-axis. How can I map a value in those domains into positions on the chart?
So, given some constants defining the chart:
we can use d3 to create an xScale, like this:
Then assuming we have an array of verticalPoints:
const verticalPoints: number[] = [];
we just add values in the xDomain like this:
verticalPoints.push(xScale(value))
and we can render our vertical lines on the x-axis with the CartesianGrid like this:
<CartesianGrid stroke="#d5d5d5" verticalPoints={verticalPoints} />