CODEWITHSUNDEEP
reactjsmaterial-uimui-x
Jon Cohen
Jon Cohen

Reputation: 21

AxisHighlight not showing in an MUI ResponsiveChartContainer

I have a composed chart to show specific data over a typical range for that data. It's composed of two stacked area plots with the first one made invisible to show an interquartile range of data, with a line plot overlaid for a specific time series.

<ResponsiveChartContainer
               xAxis={[
                   {
                      //...
                       disableLine: true,
                       disableTicks: true,
                      //...
                   },
               ]}
               yAxis={[yAxis]} // similarly defined
               series={[
                   {
                       type: 'line',
                       id: `StateData-${energy}-25`,
                       yAxisId: yAxis.id,
                       // ...
                   },
                   {
                       type: 'line',
                       id: `StateData-${energy}-75`,
                       yAxisId: yAxis.id,
                       // ...
                   },
                   {
                       type: 'line',
                       id: `tract-${energy}`,
                       yAxisId: yAxis.id,
                       // ...
                   },
               ]}
               {// ...}
           >
               <AreaPlot />
               <LinePlot />
               <ChartsXAxis axisId="date" />
               <EnergyChartYAxis selectedChartType={selectedChartType} energy={energy} />
               <ChartsLegend
                   direction="row"
                   position={{ horizontal: 'middle', vertical: 'top' }}
               />
               <ChartsAxisHighlight axisHighlight="line" /> { // this doesn't do anything }
               <ChartsTooltip trigger="axis" />
               <ChartsGrid vertical />
               <ChartsGrid horizontal />
           </ResponsiveChartContainer>

The tooltip shows up just fine, but the typical vertical dotted line axis highlight is not showing up and I can't find anywhere I would specify it needs to exist.

I've tried a number of AI suggestions and explored the MUI code itself as well as tried to put a ChartsAxisHighlight component directly in my chart, but nothing has worked so far. What am I missing?

Upvotes: 2

Views: 40

Answers (1)

lamhoangtung
lamhoangtung

Reputation: 924

You are on the right track with using ChartsAxisHighlight. But it should be this instead:

<ChartsAxisHighlight x='line'/>

Upvotes: 0

Related Questions