Trying to add a dot for more complex use, but cannot get single dot to work

[ToeJammm]

I am working on a recharts graph, and have been for a while now, so it is getting pretty complex at this point (relatively for me at least). One function I am trying to add to the graph is something called a harmonic view. This will consist of taking a value from my graph and putting dots on all values that are multiples of that Y value to catch harmonic relationships. Right now I am just testing out the dot API and I can't seem to get it working at all on my graph. The API and examples you have in the docs are also not really helping in my case.
Currently I have imported "Dot" from recharts and have put "" right before my AreaChart ending tag. my domain is 0-15000 and my range is 0-1 so I figured it should show up within range. I am not sure if I need to do all this within a customized component or not as I have tried that unsuccessfully. Any feedback would be much appreciated. Here is a look at my code

      <AreaChart
               width={1000}
               height={800}
               fill="red"
               data={state.data}
               margin={{
                  top: 30,
                  right: 30,
                  left: 0,
                  bottom: 0,
               }}

               onMouseDown={(e) => setState({ ...state, refAreaLeft: e.activeLabel })}
               onMouseMove={state.refAreaLeft && ((e) => setState(prevState => ({
                  ...prevState,
                  refAreaRight: e.activeLabel
               })))}

               onMouseUp={zoom}
            >
               <CartesianGrid strokeDasharray="3 3" stroke="grey" />
               {graph.referenceLines.map((line, index) => (
                  <ReferenceLine key={index} y={line.value} stroke={line.color} label={<Label value={line.label} position="insideTopRight" />} yAxisId={1} />
               ))}
               <CartesianGrid strokeDasharray="3 3" />
               
               <XAxis
                  allowDataOverflow
                  dataKey="Frequency"
                  domain={zoomedOut ? domain : [state.left, state.right]}
                  type='number'
                  tickCount={zoomedOut ? 6 : 3}
                  tick={true}



                  label={{ value: xLabel, position: 'insideBottom', offset: 5, stroke: "#000000" }}
               />
               <YAxis
                  yAxisId="1"
                  allowDataOverflow
                  label={{ value: graph.units, position: 'insideLeft', stroke: "#000000", angle: -90, offset: 10 }}
                  type="number" domain={[0, parseFloat(graph.maxVal)]}

               />
               
               <Tooltip content={<CustomTooltip />} />

               <Area type="monotone" dataKey="MaxTQRGB" stroke="#000000" fill="#73B2B5" yAxisId="1" />
               {overlay && <Area type="monotone" dataKey="AltMaxTQRGB" stroke="#000000" fill="#89FFC0" yAxisId="1" opacity={0.7} />}
               {state.refAreaLeft && state.refAreaRight ? (
                  <ReferenceArea yAxisId="1" x1={state.refAreaLeft} x2={state.refAreaRight} strokeOpacity={0.5} fill="#8884d8" />
               ) : null}
               <Dot cx={3000} cy={0.5} r={50} fill="#000000" />
            </AreaChart>   
    

[ckifer]

Hi!

Dot is just a shape, it has no notion (alone) about the translation between SVG values and chart values. In this case cx and cy are svg properties rather than values on your chart.

With that said, I need to understand a bit more about your use-case in order to be able to help. You want to draw dots anywhere? Or only on values that have a point in your Area?

If it is anywhere, then I would combine Area and Scatter using ComposedChart. This way you can render dots as scatter points anywhere in the graph and Scatter will do the translation between data values and chart values for you.

If it is only on Area values then you can use the dot prop and conditionally return dots at the correct area datapoints similar to https://recharts.org/en-US/examples/CustomizedDotLineChart

[ToeJammm]

Testing wise I was just trying to draw a dot anywhere, but my use case would only draw dots on points within my area graph. My goal is to be able to select a value and have the dots populate on the click. I have considered using a composedChart in order to make that happen, but I wanted to try the dots first to see if it would be easier.

[ckifer]

You should be able to do something like this

const CustomizedDot = (props) => {
  const { cx, cy, payload, index } = props;
  console.log(payload, index);

  if (payload.pv === 4300 || payload.pv === 9800) {
    return <Dot cx={cx} cy={cy} r={5} />;
  } else return null;
};

[ToeJammm]

Thanks Conner. I will try this as well as the composedChart method. I feel more comfortable trying the composed chart because it seems as simple as passing in a new array as the datakey. Would you agree? I am still a bit new to Recharts.

[ckifer]

It depends on how accessible that data is to you.

If you can I would preprocess the data and add the new data to the same object as a new property.

[ToeJammm]

Seems to be working great so far!