Charts - Bar demonstration

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

<BarChart
  width={500}
  height={300}
  series={[
    { data: pData, label: 'pv', id: 'pvId', color: '#8884d8' },
    { data: uData, label: 'uv', id: 'uvId', color: '#82ca9d' },
  ]}
  xAxis={[{ data: xLabels, scaleType: 'band' }]}
/>

<BarChart
  width={500}
  height={300}
  series={[
    { data: pData, label: 'pv', id: 'pvId', color: '#8884d8', stack: 'total' },
    { data: uData, label: 'uv', id: 'uvId', color: '#82ca9d', stack: 'total' },
  ]}
  xAxis={[{ data: xLabels, scaleType: 'band' }]}
/>

<BarChart
  width={500}
  height={300}
  series={[
    { data: pData, label: 'pv', color: '#8884d8', stack: 'stack1' },
    { data: amtData, label: 'amt', color: '#ffc658' },
    { data: uData, label: 'uv', color: '#82ca9d', stack: 'stack1' },
  ]}
  xAxis={[{ data: xLabels, scaleType: 'band' }]}
/>

<BarChart
  width={500}
  height={300}
  series={[
    { data: pData, label: 'pv', id: 'pvId', color: '#8884d8', stack: 'stack1' },
    { data: uData, label: 'uv', id: 'uvId', color: '#82ca9d', stack: 'stack1' },
  ]}
  xAxis={[{ data: xLabels, scaleType: 'band' }]}
/>