<HorizontalBarChart
  boldTickLabel
  showTickInfos
  marginLeftTitle="50%"
  title="RYG graph"
  xType="time"
  onClickBar={item => window.alert(item.data.value)}
  tooltip={{
    label: 'Criticity',
    result: 'Amount (percentage)',
  }}
  data={[
    {
      label: 'A',
      result: 75.3,
      style: { color: 'red' },
      itemId: 'c',
    },
    {
      label: 'B',
      result: 86,
      style: { color: 'yellow' },
      itemId: 'b',
    },
    {
      label: 'C',
      result: 94,
      style: { color: 'green' },
      itemId: 'c',
    },
  ]}
/>

<HorizontalBarChart
  xComplement="%"
  color="#8BC34A"
  title="horizontal chart"
  toolboxTooltip={{ saveAsImage: 'save as image' }}
  tooltip={{
    label: 'Equipment',
    result: 'Reliability',
  }}
  data={[
    { label: 'equipment 01', result: 2 },
    { label: 'equipment 02', result: 40 },
    { label: 'equipment 03', result: 30 },
    { label: 'equipment 04', result: 20 },
    { label: 'equipment 05', result: 40 },
    { label: 'equipment 06', result: 50 },
    { label: 'equipment 07', result: 15 },
    { label: 'equipment 08', result: 70 },
    { label: 'equipment 09', result: 80 },
    { label: 'equipment 10', result: 99 },
  ]}
/>