reactjs - AxisHighlight not showing in an MUI ResponsiveChartContainer - Stack Overflow

admin管理员组

文章数量:1315832

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?

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?

• reactjs
• material-ui
• mui-x

Share Improve this question Follow edited Jan 30 at 2:44 Jon Cohen asked Jan 30 at 2:44 Jon CohenJon Cohen 2122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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

<ChartsAxisHighlight x='line'/>

本文标签： reactjsAxisHighlight not showing in an MUI ResponsiveChartContainerStack Overflow