MUI X
This page groups demonstration using bar charts.
<ChartContainer width={500} height={300} series={[{ data: uData, label: 'uv', type: 'bar' }]} xAxis={[{ scaleType: 'band', data: xLabels }]} > <BarPlot /> </ChartContainer>
<BarChart width={500} height={300} series={[ { data: pData, label: 'pv', id: 'pvId' }, { data: uData, label: 'uv', id: 'uvId' }, ]} xAxis={[{ data: xLabels, scaleType: 'band' }]} />
<BarChart width={500} height={300} series={[ { data: pData, label: 'pv', id: 'pvId', stack: 'total' }, { data: uData, label: 'uv', id: 'uvId', stack: 'total' }, ]} xAxis={[{ data: xLabels, scaleType: 'band' }]} />
<BarChart width={500} height={300} series={[ { data: pData, label: 'pv', stack: 'stack1' }, { data: amtData, label: 'amt' }, { data: uData, label: 'uv', stack: 'stack1' }, ]} xAxis={[{ data: xLabels, scaleType: 'band' }]} />
<BarChart width={500} height={300} series={[ { data: pData, label: 'pv', id: 'pvId', stack: 'stack1' }, { data: uData, label: 'uv', id: 'uvId', stack: 'stack1' }, ]} xAxis={[{ data: xLabels, scaleType: 'band' }]} />
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.
<BarChart />
<BarElement />
<BarPlot />
Contents