-
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. <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>
|
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 5 replies
-
Hi!
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 If it is anywhere, then I would combine If it is only on |
Beta Was this translation helpful? Give feedback.
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.