Area charts Audiometry Chart Coordinate Line Chart Donut charts Forecast area charts Horizontal bar charts Line charts Pictorial Chart Pie charts Readme Stacked bar charts Chart with 2 bars stacked and a line on top Chart with 2 bars stacked with pareto Chart wit 2 bars stacked Vertical bar charts

Demo

Chart with 2 bars stacked and a line on top

<StackedBarChart
  xType="time"
  yComplement={value => `R$ ${value},00`}
  title="iOS"
  toolboxTooltip={{ saveAsImage: 'save' }}
  colors={['#30D2D6', '#9F88FB', '#F09B1B']}
  tooltip={{
    label: 'Período',
    topResult: 'Preventivas',
    bottomResult: 'Corretivas',
    lineResult: 'Total',
  }}
  data={[
    [
      { label: '2019-01-01', result: 1 },
      { label: '2019-02-01', result: 2 },
      { label: '2019-03-01', result: 4 },
      { label: '2019-04-01', result: 5 },
      { label: '2019-05-01', result: 6 },
      { label: '2019-06-01', result: 7 },
    ],
    [
      { label: '2019-01-01', result: 10 },
      { label: '2019-02-01', result: 40 },
      { label: '2019-03-01', result: 30 },
      { label: '2019-04-01', result: 20 },
      { label: '2019-05-01', result: 40 },
      { label: '2019-06-01', result: 50 },
    ],
    [
      { label: '2019-01-01', result: 11 },
      { label: '2019-02-01', result: 42 },
      { label: '2019-03-01', result: 54 },
      { label: '2019-04-01', result: 55 },
      { label: '2019-05-01', result: 66 },
      { label: '2019-06-01', result: 87 },
    ],
  ]}
/>

<StackedBarChart
  xType="time"
  yComplement={value => `R$ ${value},00`}
  title="iOS"
  toolboxTooltip={{ saveAsImage: 'save' }}
  colors={['#30D2D6', '#9F88FB', '#F09B1B']}
  tooltip={{
    label: 'Período',
    topResult: 'Preventivas',
    bottomResult: 'Corretivas',
    lineResult: 'Total',
  }}
  data={[
    [
      { label: '2019-01-01', result: 1 },
      { label: '2019-02-01', result: 2 },
      { label: '2019-03-01', result: 4 },
      { label: '2019-04-01', result: 5 },
      { label: '2019-05-01', result: 6 },
      { label: '2019-06-01', result: 7 },
    ],
    [
      { label: '2019-01-01', result: 10 },
      { label: '2019-02-01', result: 40 },
      { label: '2019-03-01', result: 30 },
      { label: '2019-04-01', result: 20 },
      { label: '2019-05-01', result: 40 },
      { label: '2019-06-01', result: 50 },
    ],
    [
      { label: '2019-01-01', result: 11 },
      { label: '2019-02-01', result: 42 },
      { label: '2019-03-01', result: 54 },
      { label: '2019-04-01', result: 55 },
      { label: '2019-05-01', result: 66 },
      { label: '2019-06-01', result: 87 },
    ],
  ]}
/>

Chart with 3 bars stacked and a line on top

<StackedBarChart
  xType="time"
  yComplement={value => `R$ ${value},00`}
  title="Custo por manutenção"
  toolboxTooltip={{ saveAsImage: 'save' }}
  colors={['#30D2D6', '#9F88FB', '#C5F3C2', '#F09B1B']}
  tooltip={{
    label: 'Período',
    topResult: 'Preventivas',
    bottomResult: 'Corretivas',
    extraResult: 'Melhorias',
    lineResult: 'Total',
  }}
  data={[
    [
      { label: '2019-01-01', result: 1 },
      { label: '2019-02-01', result: 2 },
      { label: '2019-03-01', result: 4 },
      { label: '2019-04-01', result: 5 },
      { label: '2019-05-01', result: 6 },
      { label: '2019-06-01', result: 7 },
    ],
    [
      { label: '2019-01-01', result: 10 },
      { label: '2019-02-01', result: 40 },
      { label: '2019-03-01', result: 30 },
      { label: '2019-04-01', result: 20 },
      { label: '2019-05-01', result: 40 },
      { label: '2019-06-01', result: 50 },
    ],
    [
      { label: '2019-01-01', result: 16 },
      { label: '2019-02-01', result: 46 },
      { label: '2019-03-01', result: 38 },
      { label: '2019-04-01', result: 60 },
      { label: '2019-05-01', result: 70 },
      { label: '2019-06-01', result: 94 },
    ],
    [
      { label: '2019-01-01', result: 5 },
      { label: '2019-02-01', result: 4 },
      { label: '2019-03-01', result: 4 },
      { label: '2019-04-01', result: 5 },
      { label: '2019-05-01', result: 6 },
      { label: '2019-06-01', result: 7 },
    ],
  ]}
/>

<StackedBarChart
  xType="time"
  yComplement={value => `R$ ${value},00`}
  title="Custo por manutenção"
  toolboxTooltip={{ saveAsImage: 'save' }}
  colors={['#30D2D6', '#9F88FB', '#C5F3C2', '#F09B1B']}
  tooltip={{
    label: 'Período',
    topResult: 'Preventivas',
    bottomResult: 'Corretivas',
    extraResult: 'Melhorias',
    lineResult: 'Total',
  }}
  data={[
    [
      { label: '2019-01-01', result: 1 },
      { label: '2019-02-01', result: 2 },
      { label: '2019-03-01', result: 4 },
      { label: '2019-04-01', result: 5 },
      { label: '2019-05-01', result: 6 },
      { label: '2019-06-01', result: 7 },
    ],
    [
      { label: '2019-01-01', result: 10 },
      { label: '2019-02-01', result: 40 },
      { label: '2019-03-01', result: 30 },
      { label: '2019-04-01', result: 20 },
      { label: '2019-05-01', result: 40 },
      { label: '2019-06-01', result: 50 },
    ],
    [
      { label: '2019-01-01', result: 16 },
      { label: '2019-02-01', result: 46 },
      { label: '2019-03-01', result: 38 },
      { label: '2019-04-01', result: 60 },
      { label: '2019-05-01', result: 70 },
      { label: '2019-06-01', result: 94 },
    ],
    [
      { label: '2019-01-01', result: 5 },
      { label: '2019-02-01', result: 4 },
      { label: '2019-03-01', result: 4 },
      { label: '2019-04-01', result: 5 },
      { label: '2019-05-01', result: 6 },
      { label: '2019-06-01', result: 7 },
    ],
  ]}
/>

<StackedBarChart
  xType="time"
  yComplement={value => `R$ ${value},00`}
  title="Custo por manutenção"
  toolboxTooltip={{ saveAsImage: 'save' }}
  colors={['#30D2D6', '#9F88FB', '#C5F3C2', '#F09B1B']}
  tooltip={{
    label: 'Período',
    topResult: 'Preventivas',
    bottomResult: 'Corretivas',
    extraResult: 'Melhorias',
    auxResult: 'Total real',
    lineResult: 'Total',
  }}
  data={[
    [
      { label: '2019-01-01', result: 1 },
      { label: '2019-02-01', result: 2 },
      { label: '2019-03-01', result: 4 },
      { label: '2019-04-01', result: 5 },
      { label: '2019-05-01', result: 6 },
      { label: '2019-06-01', result: 7 },
    ],
    [
      { label: '2019-01-01', result: 10 },
      { label: '2019-02-01', result: 40 },
      { label: '2019-03-01', result: 30 },
      { label: '2019-04-01', result: 20 },
      { label: '2019-05-01', result: 40 },
      { label: '2019-06-01', result: 50 },
    ],
    [
      { label: '2019-01-01', result: 16 },
      { label: '2019-02-01', result: 46 },
      { label: '2019-03-01', result: 38 },
      { label: '2019-04-01', result: 60 },
      { label: '2019-05-01', result: 70 },
      { label: '2019-06-01', result: 94 },
    ],
    [
      { label: '2019-01-01', result: 5 },
      { label: '2019-02-01', result: 4 },
      { label: '2019-03-01', result: 4 },
      { label: '2019-04-01', result: 5 },
      { label: '2019-05-01', result: 6 },
      { label: '2019-06-01', result: 7 },
    ],
    [
      { label: '2019-01-01', result: 0 },
      { label: '2019-02-01', result: 76 },
      { label: '2019-03-01', result: 558 },
      { label: '2019-04-01', result: 10 },
      { label: '2019-05-01', result: 80 },
      { label: '2019-06-01', result: 94 },
    ],
  ]}
/>

<StackedBarChart
  xType="time"
  yComplement={value => `R$ ${value},00`}
  title="Custo por manutenção"
  toolboxTooltip={{ saveAsImage: 'save' }}
  colors={['#30D2D6', '#9F88FB', '#C5F3C2', '#F09B1B']}
  tooltip={{
    label: 'Período',
    topResult: 'Preventivas',
    bottomResult: 'Corretivas',
    extraResult: 'Melhorias',
    auxResult: 'Total real',
    lineResult: 'Total',
  }}
  data={[
    [
      { label: '2019-01-01', result: 1 },
      { label: '2019-02-01', result: 2 },
      { label: '2019-03-01', result: 4 },
      { label: '2019-04-01', result: 5 },
      { label: '2019-05-01', result: 6 },
      { label: '2019-06-01', result: 7 },
    ],
    [
      { label: '2019-01-01', result: 10 },
      { label: '2019-02-01', result: 40 },
      { label: '2019-03-01', result: 30 },
      { label: '2019-04-01', result: 20 },
      { label: '2019-05-01', result: 40 },
      { label: '2019-06-01', result: 50 },
    ],
    [
      { label: '2019-01-01', result: 16 },
      { label: '2019-02-01', result: 46 },
      { label: '2019-03-01', result: 38 },
      { label: '2019-04-01', result: 60 },
      { label: '2019-05-01', result: 70 },
      { label: '2019-06-01', result: 94 },
    ],
    [
      { label: '2019-01-01', result: 5 },
      { label: '2019-02-01', result: 4 },
      { label: '2019-03-01', result: 4 },
      { label: '2019-04-01', result: 5 },
      { label: '2019-05-01', result: 6 },
      { label: '2019-06-01', result: 7 },
    ],
    [
      { label: '2019-01-01', result: 0 },
      { label: '2019-02-01', result: 76 },
      { label: '2019-03-01', result: 558 },
      { label: '2019-04-01', result: 10 },
      { label: '2019-05-01', result: 80 },
      { label: '2019-06-01', result: 94 },
    ],
  ]}
/>

Chart with 2 bars stacked with pareto

<StackedBarChart
  sumDataValues
  yComplement={value => `R$ ${value},00`}
  colors={['#487086', '#87C4CB', '#E97551']}
  secondYAxisType="percent"
  tooltip={{
    label: 'Equipamento',
    topResult: 'Aquisição',
    bottomResult: 'Manutenção',
    lineResult: 'Custo % acumulado',
    complement: 'Custo total',
  }}
  data={[
    [
      { label: 'a01', result: 1 },
      { label: 'a02', result: 2 },
      { label: 'a03', result: 4 },
      { label: 'a04', result: 5 },
      { label: 'a05', result: 6 },
      { label: 'a06', result: 7 },
      { label: 'a07', result: 11 },
      { label: 'a08', result: 42 },
      { label: 'a09', result: 54 },
      { label: 'a10', result: 55 },
      { label: 'a11', result: 66 },
      { label: 'a12', result: 87 },
      { label: 'a13', result: 1 },
      { label: 'a14', result: 2 },
      { label: 'a015', result: 4 },
      { label: 'a016', result: 5 },
      { label: 'a017', result: 6 },
      { label: 'a018', result: 7 },
      { label: 'a019', result: 11 },
      { label: 'a020', result: 42 },
      { label: 'a021', result: 54 },
      { label: 'a022', result: 55 },
      { label: 'a023', result: 66 },
      { label: 'a024', result: 87 },
    ],
    [
      { label: 'a01', result: 10 },
      { label: 'a02', result: 40 },
      { label: 'a03', result: 30 },
      { label: 'a04', result: 20 },
      { label: 'a05', result: 40 },
      { label: 'a06', result: 50 },
      { label: 'a07', result: 11 },
      { label: 'a08', result: 42 },
      { label: 'a09', result: 54 },
      { label: 'a10', result: 55 },
      { label: 'a11', result: 66 },
      { label: 'a12', result: 87 },
      { label: 'a13', result: 1 },
      { label: 'a14', result: 2 },
      { label: 'a015', result: 4 },
      { label: 'a016', result: 5 },
      { label: 'a017', result: 6 },
      { label: 'a018', result: 7 },
      { label: 'a019', result: 11 },
      { label: 'a020', result: 42 },
      { label: 'a021', result: 54 },
      { label: 'a022', result: 55 },
      { label: 'a023', result: 66 },
      { label: 'a024', result: 87 },
    ],
    [
      { label: 'a01', result: 11 },
      { label: 'a02', result: 42 },
      { label: 'a03', result: 54 },
      { label: 'a04', result: 55 },
      { label: 'a05', result: 66 },
      { label: 'a06', result: 87 },
      { label: 'a07', result: 11 },
      { label: 'a08', result: 42 },
      { label: 'a09', result: 54 },
      { label: 'a10', result: 55 },
      { label: 'a11', result: 66 },
      { label: 'a12', result: 87 },
      { label: 'a13', result: 1 },
      { label: 'a14', result: 2 },
      { label: 'a015', result: 4 },
      { label: 'a016', result: 5 },
      { label: 'a017', result: 6 },
      { label: 'a018', result: 7 },
      { label: 'a019', result: 11 },
      { label: 'a020', result: 42 },
      { label: 'a021', result: 54 },
      { label: 'a022', result: 55 },
      { label: 'a023', result: 66 },
      { label: 'a024', result: 87 },
    ],
  ]}
/>

<StackedBarChart
  sumDataValues
  yComplement={value => `R$ ${value},00`}
  colors={['#487086', '#87C4CB', '#E97551']}
  secondYAxisType="percent"
  tooltip={{
    label: 'Equipamento',
    topResult: 'Aquisição',
    bottomResult: 'Manutenção',
    lineResult: 'Custo % acumulado',
    complement: 'Custo total',
  }}
  data={[
    [
      { label: 'a01', result: 1 },
      { label: 'a02', result: 2 },
      { label: 'a03', result: 4 },
      { label: 'a04', result: 5 },
      { label: 'a05', result: 6 },
      { label: 'a06', result: 7 },
      { label: 'a07', result: 11 },
      { label: 'a08', result: 42 },
      { label: 'a09', result: 54 },
      { label: 'a10', result: 55 },
      { label: 'a11', result: 66 },
      { label: 'a12', result: 87 },
      { label: 'a13', result: 1 },
      { label: 'a14', result: 2 },
      { label: 'a015', result: 4 },
      { label: 'a016', result: 5 },
      { label: 'a017', result: 6 },
      { label: 'a018', result: 7 },
      { label: 'a019', result: 11 },
      { label: 'a020', result: 42 },
      { label: 'a021', result: 54 },
      { label: 'a022', result: 55 },
      { label: 'a023', result: 66 },
      { label: 'a024', result: 87 },
    ],
    [
      { label: 'a01', result: 10 },
      { label: 'a02', result: 40 },
      { label: 'a03', result: 30 },
      { label: 'a04', result: 20 },
      { label: 'a05', result: 40 },
      { label: 'a06', result: 50 },
      { label: 'a07', result: 11 },
      { label: 'a08', result: 42 },
      { label: 'a09', result: 54 },
      { label: 'a10', result: 55 },
      { label: 'a11', result: 66 },
      { label: 'a12', result: 87 },
      { label: 'a13', result: 1 },
      { label: 'a14', result: 2 },
      { label: 'a015', result: 4 },
      { label: 'a016', result: 5 },
      { label: 'a017', result: 6 },
      { label: 'a018', result: 7 },
      { label: 'a019', result: 11 },
      { label: 'a020', result: 42 },
      { label: 'a021', result: 54 },
      { label: 'a022', result: 55 },
      { label: 'a023', result: 66 },
      { label: 'a024', result: 87 },
    ],
    [
      { label: 'a01', result: 11 },
      { label: 'a02', result: 42 },
      { label: 'a03', result: 54 },
      { label: 'a04', result: 55 },
      { label: 'a05', result: 66 },
      { label: 'a06', result: 87 },
      { label: 'a07', result: 11 },
      { label: 'a08', result: 42 },
      { label: 'a09', result: 54 },
      { label: 'a10', result: 55 },
      { label: 'a11', result: 66 },
      { label: 'a12', result: 87 },
      { label: 'a13', result: 1 },
      { label: 'a14', result: 2 },
      { label: 'a015', result: 4 },
      { label: 'a016', result: 5 },
      { label: 'a017', result: 6 },
      { label: 'a018', result: 7 },
      { label: 'a019', result: 11 },
      { label: 'a020', result: 42 },
      { label: 'a021', result: 54 },
      { label: 'a022', result: 55 },
      { label: 'a023', result: 66 },
      { label: 'a024', result: 87 },
    ],
  ]}
/>

Chart wit 2 bars stacked

<StackedBarChart
  sumDataValues
  showBarLabel
  barWidth={80}
  yComplement={value => `R$ ${value},00`}
  legendType="none"
  tooltip={{
    label: 'Criticidade',
    topResult: 'Tempo médio em atendimento',
    bottomResult: 'Tempo médio em execução',
    complement: 'Tempo médio total',
  }}
  data={[
    [
      {
        label: 'Emergencial',
        result: 1,
        style: { color: 'red', opacity: 0.7 },
      },
      { label: 'Alta', result: 2, style: { color: 'orange', opacity: 0.7 } },
      { label: 'Média', result: 4, style: { color: 'yellow', opacity: 0.7 } },
      { label: 'Baixa', result: 5, style: { color: 'green', opacity: 0.7 } },
    ],
    [
      { label: 'Emergencial', result: 10, style: { color: 'red' } },
      { label: 'Alta', result: 40, style: { color: 'orange' } },
      { label: 'Média', result: 30, style: { color: 'yellow' } },
      { label: 'Baixa', result: 20, style: { color: 'green' } },
    ],
  ]}
/>

<StackedBarChart
  sumDataValues
  showBarLabel
  barWidth={80}
  yComplement={value => `R$ ${value},00`}
  legendType="none"
  tooltip={{
    label: 'Criticidade',
    topResult: 'Tempo médio em atendimento',
    bottomResult: 'Tempo médio em execução',
    complement: 'Tempo médio total',
  }}
  data={[
    [
      {
        label: 'Emergencial',
        result: 1,
        style: { color: 'red', opacity: 0.7 },
      },
      { label: 'Alta', result: 2, style: { color: 'orange', opacity: 0.7 } },
      { label: 'Média', result: 4, style: { color: 'yellow', opacity: 0.7 } },
      { label: 'Baixa', result: 5, style: { color: 'green', opacity: 0.7 } },
    ],
    [
      { label: 'Emergencial', result: 10, style: { color: 'red' } },
      { label: 'Alta', result: 40, style: { color: 'orange' } },
      { label: 'Média', result: 30, style: { color: 'yellow' } },
      { label: 'Baixa', result: 20, style: { color: 'green' } },
    ],
  ]}
/>

Demo

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Chart with 2 bars stacked and a line on top

Chart with 3 bars stacked and a line on top

Chart with 3 bars stacked, line and auxResult on tooltip

Chart with 2 bars stacked with pareto

Chart wit 2 bars stacked

Chart with 2 bars stacked and a line on top