---
name: PieChartBox
route: /pie-chart-box
menu: 🧬 Molecules
---

import { Playground } from 'docz'
import { PieChartBox } from '../src'

# PieChartBox

This is a basic PieChartBox component.

This component is composed with a [`<PieChart />`](/bar-chart) and a [`<dataTable />`](/data-table)

<Playground>
  <PieChartBox
    title="Derniers taux de cotisations"
    data={[
      {
        label: '2000',
        values: [
          {
            percent: 'salut A',
            name: 'Page A',
            value: 2400
          },
          {
            percent: 'salut B',
            name: 'Page B',
            value: 1398
          },
          {
            percent: 'salut C',
            name: 'Page C',
            value: 8
          },
          {
            percent: 'salut D',
            name: 'Page D',
            value: 3908
          },
          {
            percent: 'salut E',
            name: 'Pe E',
            value: 4800
          }
        ]
      },

      {
        label: '2001',
        values: [
          {
            percent: 'salut AA',
            name: 'Page AA',
            value: 2200
          },
          {
            percent: 'salut BB',
            name: 'Page BB',
            value: 398
          },
          {
            percent: 'salut CC',
            name: 'Page CC',
            value: 200
          },
          {
            percent: 'salut DD',
            name: 'Page DD',
            value: 1908
          },
          {
            percent: 'salut EE',
            name: 'Pe EE',
            value: 4000
          }
        ]
      }
    ]}
    dataTable={{
      title: 'Taux de cotisation (Date 01/01/2019)',
      info: 'Infoooo',
      actions: [
        { label: 'left', url: '/' },
        { label: 'right', url: '/' }
      ]
    }}

/>

</Playground>