---
name: AreaChart
route: /AreaChart
menu: components
---

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

# AreaChart

<Props of={AreaChart} />

## Usage

<Playground style={{ height: '300px' }}>
  {() => {
    const data = [
      {
        "name": "12am",
        "value": 4000,
      },
      {
        "name": "1am",
        "value": 3000,
      },
      {
        "name": "2am",
        "value": 2000,
      },
      {
        "name": "3am",
        "value": 2780,
      },
      {
        "name": "4am",
        "value": 1890,
      },
      {
        "name": "5am",
        "value": 2390,
      },
      {
        "name": "6am",
        "value": 3490,
      }
    ];

    return (<AreaChart data={data} />)

}
}

</Playground>
