I am developing a React project that uses Material UI's LineChart library to create a responsive graph. This is what my graph looks like currently: Graph. This is the code that produced said graph:
import { LineChart } from '@mui/x-charts/LineChart';
interface ChartProps {
heights: number[];
windSpeeds: number[];
inputWindSpeed: number;
desiredOutputHeight: number;
}
export default function Chart({ heights, windSpeeds}: ChartProps) {
return (
<LineChart
xAxis={[{
data: windSpeeds.length > 0 ? windSpeeds : [],
label: 'Wind Speed [m/s]',
labelFontSize: 20,
tickFontSize: 18,
valueFormatter: (value) => value.toString(),
}]}
series={[{
data: heights.length > 0 ? heights : [],
showMark: false,
}]}
yAxis={[{
label: 'Height [m]',
labelFontSize: 20,
tickFontSize: 18,
}]}
grid={{ vertical: true, horizontal: true }}
/>
);
}
What I want to do is be able to plot a point regardless of if that data exists within the datasets the graph is using. I could not find an example of this in the Material UI documentation, so I may have to use a different charting library for the functionality I want.
My attempts at solving this: First, I tried to create another series with a singular point. However, since one or both of the points may not be in the series, That didn't work. My second attempt was to see if I can add logic to the showMark property to display the point I want. My code looked like this:
showMark: ({ x }) => x === desiredOutputHeightIndex
This worked, but it was only approximate as if the value did not exist in the dataset, you have to find the closest value and use that index.
It may not be possible to do what I am asking, and in that case, I will probably just use another charting library,