<VerticalBarChart
  showBarLabel
  yComplement="%"
  xType="category"
  yType="value"
  color="green"
  title="Bar Chart example"
  toolboxTooltip={{ saveAsImage: 'save' }}
  tooltip={{ label: 'Equipamento', result: 'Disponibilidade' }}
  data={[
    {
      label: 'NG209131231',
      result: '100',
      itemId: 1,
    },
    {
      label: 'NG21021313',
      result: '10',
      itemId: 1,
    },
    {
      label: 'NG211131231',
      result: '100',
      itemId: 1,
    },
    {
      label: 'NG21221312313',
      result: '100',
      itemId: 1,
    },
    {
      label: 'NG213133123',
      result: '100',
      itemId: 1,
    },
    {
      label: 'NG2142232313',
      result: '100',
      itemId: 1,
    },
    {
      label: 'NG2151111',
      result: '10',
      itemId: 1,
    },
    {
      label: 'NG216444533',
      result: '100',
      itemId: 1,
    },
    {
      label: 'NG2172222',
      result: '100',
      itemId: 1,
    },
    {
      label: 'NG21822222',
      result: '100',
      itemId: 1,
    },
    {
      label: 'NG2192222222222',
      result: '10',
      itemId: 1,
    },
    {
      label: 'NG22022222222222',
      result: '100',
      itemId: 1,
    },
    {
      label: 'NG22122222222',
      result: '100',
      itemId: 1,
    },
    {
      label: 'NG2222222222222',
      result: '100',
      itemId: 1,
    },
    {
      label: '31',
      result: '100',
      itemId: 1,
    },
    {
      label: '3',
      result: '10',
      itemId: 1,
    },
    {
      label: '31',
      result: '100',
      itemId: 1,
    },
    {
      label: '2313',
      result: '100',
      itemId: 1,
    },
    {
      label: '23',
      result: '100',
      itemId: 1,
    },
    {
      label: '313',
      result: '100',
      itemId: 1,
    },
    {
      label: '45',
      result: '10',
      itemId: 1,
    },
    {
      label: '33',
      result: '100',
      itemId: 1,
    },
    {
      label: '89',
      result: '100',
      itemId: 1,
    },
    {
      label: '299',
      result: '100',
      itemId: 1,
    },
    {
      label: '222222',
      result: '10',
      itemId: 1,
    },
    {
      label: '222484842222',
      result: '100',
      itemId: 1,
    },
    {
      label: '2222',
      result: '100',
      itemId: 1,
    },
    {
      label: '22222552',
      result: '100',
      itemId: 1,
    },
  ]}
/>

<VerticalBarChart
  showBarLabel
  yComplement={value => `R$ ${value},00`}
  xType="category"
  yType="value"
  color="blue"
  title="Bar Chart example"
  customMaxDomain={3000}
  toolboxTooltip={{ saveAsImage: 'save' }}
  tooltip={{ label: 'Equipamento', result: 'Disponibilidade' }}
  data={[
    {
      label: 'NG209131231',
      result: '2057',
    },
    {
      label: 'NG21021313',
      result: '20',
    },
  ]}
/>

<VerticalBarChart
  showBarLabel
  title="Bar Chart example"
  xType="time"
  yComplement="%"
  dateFormat="yyyy-MM"
  color="blue"
  customMaxDomain={100}
  toolboxTooltip={{ saveAsImage: 'save as image' }}
  tooltip={{ label: 'Date', result: 'Disp' }}
  data={[
    {
      label: '2020-01',
      result: '50',
    },
  ]}
/>