If I use a <LineChart>
on it's own I can get hovers over points and the vertical line as I mouse left/right over the chart. However, if I decompose and use <ResponsiveChartContainer>
so that I can add reference lines, I lose hover over points. The following is a simple repro component.
import React, { useState, useEffect } from 'react';
import { Container } from '@mui/material';
import { ChartsXAxis, ChartsYAxis, LinePlot, MarkPlot, ResponsiveChartContainer } from '@mui/x-charts';
const ChartNoHoverRepro: React.FC = () => {
const [labels, setLabels] = useState<Date[]>([]);
const [values, setValues] = useState<(number | null)[]>([]);
useEffect(() => {
const l: Date[] = [];
const v: (number | null)[] = [];
const now = Date.now();
for (let i = 0; i < 57; i++) {
l.push(new Date(now + i * 24 * 60 * 60 * 1000));
v.push(i % 7 == 0 ? Math.floor(10 + Math.random() * 40) : null);
}
setLabels([...l]);
setValues([...v]);
}, []);
return (
<Container sx={{ height: '50vh', border: '1px solid white', paddingBottom: 0 }}>
<ResponsiveChartContainer
series={[{ data: values, type: 'line', connectNulls: false }]}
xAxis={[{ data: labels, scaleType: 'time' }]}
yAxis={[{ min: 0, max: 50 }]}
>
<LinePlot />
<MarkPlot />
<ChartsXAxis />
<ChartsYAxis />
</ResponsiveChartContainer>
</Container>
);
};
export default ChartNoHoverRepro;
<ResponsiveChartContainer>
<ChartsTooltip />
</ResponsiveChartContainer>