Charts - Bar demonstration

This page groups demonstration using bar charts.

TinyBarChart

<ChartContainer
  width={500}
  height={300}
  series={[{ data: uData, label: 'uv', type: 'bar' }]}
  xAxis={[{ scaleType: 'band', data: xLabels }]}
>
  <BarPlot />
</ChartContainer>

<ChartContainer
  width={500}
  height={300}
  series={[{ data: uData, label: 'uv', type: 'bar' }]}
  xAxis={[{ scaleType: 'band', data: xLabels }]}
>
  <BarPlot />
</ChartContainer>

Press Enter to start editing

SimpleBarChart

<BarChart
  height={300}
  series={[
    { data: pData, label: 'pv', id: 'pvId' },
    { data: uData, label: 'uv', id: 'uvId' },
  ]}
  xAxis={[{ data: xLabels }]}
  yAxis={[{ width: 50 }]}
/>

<BarChart
  height={300}
  series={[
    { data: pData, label: 'pv', id: 'pvId' },
    { data: uData, label: 'uv', id: 'uvId' },
  ]}
  xAxis={[{ data: xLabels }]}
  yAxis={[{ width: 50 }]}
/>

Press Enter to start editing

StackedBarChart

<BarChart
  height={300}
  series={[
    { data: pData, label: 'pv', id: 'pvId', stack: 'total' },
    { data: uData, label: 'uv', id: 'uvId', stack: 'total' },
  ]}
  xAxis={[{ data: xLabels }]}
  yAxis={[{ width: 50 }]}
/>

<BarChart
  height={300}
  series={[
    { data: pData, label: 'pv', id: 'pvId', stack: 'total' },
    { data: uData, label: 'uv', id: 'uvId', stack: 'total' },
  ]}
  xAxis={[{ data: xLabels }]}
  yAxis={[{ width: 50 }]}
/>

Press Enter to start editing

MixedBarChart

<BarChart
  height={300}
  series={[
    { data: pData, label: 'pv', stack: 'stack1' },
    { data: amtData, label: 'amt' },
    { data: uData, label: 'uv', stack: 'stack1' },
  ]}
  xAxis={[{ data: xLabels }]}
  yAxis={[{ width: 50 }]}
/>

<BarChart
  height={300}
  series={[
    { data: pData, label: 'pv', stack: 'stack1' },
    { data: amtData, label: 'amt' },
    { data: uData, label: 'uv', stack: 'stack1' },
  ]}
  xAxis={[{ data: xLabels }]}
  yAxis={[{ width: 50 }]}
/>

Press Enter to start editing

PositiveAndNegativeBarChart

<BarChart
  height={300}
  series={[
    { data: pData, label: 'pv' },
    { data: uData, label: 'uv' },
  ]}
  xAxis={[{ data: xLabels }]}
  yAxis={[{ width: 60, max: 10000 }]}
/>

<BarChart
  height={300}
  series={[
    { data: pData, label: 'pv' },
    { data: uData, label: 'uv' },
  ]}
  xAxis={[{ data: xLabels }]}
  yAxis={[{ width: 60, max: 10000 }]}
/>

Press Enter to start editing

BarChartStackedBySign

<BarChart
  height={300}
  series={[
    { data: pData, label: 'pv', id: 'pvId', stack: 'stack1' },
    { data: uData, label: 'uv', id: 'uvId', stack: 'stack1' },
  ]}
  xAxis={[{ data: xLabels }]}
  yAxis={[{ width: 60 }]}
/>

<BarChart
  height={300}
  series={[
    { data: pData, label: 'pv', id: 'pvId', stack: 'stack1' },
    { data: uData, label: 'uv', id: 'uvId', stack: 'stack1' },
  ]}
  xAxis={[{ data: xLabels }]}
  yAxis={[{ width: 60 }]}
/>

Press Enter to start editing

BiaxialBarChart

Population pyramid

South Korea Population Pyramid - 2022

Male
Female

Source: KOSIS

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.