---
name: BarChart
route: /BarChart
menu: components
---

import { Playground, Props } from 'docz'
import { BarChart } from './'
import { Spacer } from '../Spacer'

# BarChart

<Props of={BarChart} />

## Usage

<Playground
  style={{
    backgroundColor: '#F4F6F9',
    margin: '-2em',
    padding: '2em',
    width: 'auto',
  }}
>
  {() => {
    const DATA = [
      {
        label: '12am',
        value: 199,
      },
      {
        label: '1am',
        value: 162
      },
            {
        label: '2am',
        value: 129
      },
            {
        label: '3am',
        value: 88
      },
            {
        label: '4am',
        value: 96
      },
            {
        label: '5am',
        value: 167
      },
    ]

    return <BarChart width={700} height={250} data={DATA} />

}}

</Playground>
