JSX

<Histogram
  annotations={[
    {
      color: 'grey',
      value: '0%'
    },
    {
      color: 'grey',
      value: '0%'
    },
    {
      color: 'red',
      value: '-50%'
    },
    {
      color: 'grey',
      value: '-1%'
    },
    {
      color: 'red',
      value: '-56%'
    },
    {
      color: 'grey',
      value: '-99%'
    },
    {
      color: 'grey',
      value: '-100%'
    },
    {
      color: 'red',
      value: '-5%'
    },
    {
      color: 'grey',
      value: '0%'
    },
    {
      color: 'red',
      value: '-5%'
    },
    {
      color: 'grey',
      value: '0%'
    },
    {
      color: 'grey',
      value: '0%'
    },
    {
      color: 'red',
      value: '-5%'
    },
    {
      color: 'grey',
      value: '0%'
    },
    {
      color: 'red',
      value: '-50%'
    },
    {
      color: 'grey',
      value: '-67%'
    },
    {
      color: 'red',
      value: '-5%'
    },
    {
      color: 'grey',
      value: '0%'
    },
    {
      color: 'red',
      value: '-100%'
    },
    {
      color: 'grey',
      value: '-70%'
    },
    {
      color: 'grey',
      value: '-99%'
    },
    {
      color: 'red',
      value: '-5%'
    },
    {
      color: 'grey',
      value: '-65%'
    },
    {
      color: 'red',
      value: '-5%'
    },
    {
      color: 'green',
      value: '-16%'
    },
    {
      color: 'green',
      value: '-10%'
    },
    {
      color: 'green',
      value: '-99%'
    }
  ]}
  axis={{
    x: {
      scale: 'ORDINAL'
    },
    y: {
      ticks: 3
    }
  }}
  bar={{
    hover: {
      lighten: 0.1
    },
    overlayMargin: 5
  }}
  colorScheme={[
    '#56b4bf',
    '#D7263D',
    '#f9c80e',
    '#33ba95',
    '#dbdbdb',
    '#FF7101',
    '#888888',
    '#FBD7D9',
    '#7d5d2e',
    '#227839',
    '#449098',
    '#ff8d33',
    '#ff7101',
    '#008762',
    '#c5e5e9',
    '#e6e6e6',
    '#cdcdcd',
    '#cccccc',
    '#77c3cb',
    '#007656',
    '#cc5a00',
    '#00a97b',
    '#F9C80E',
    '#a9a9a9',
    '#d7263d'
  ]}
  data={{
    bins: [
      'Female',
      'Male',
      'Other',
      'sdfdfg',
      'dagdsg',
      'sfsd',
      'ds34fsdf',
      'dfsfsd',
      'sdfs34dfs',
      'ghf34hfg',
      'fd33gag',
      'jg343hj',
      'a343wes',
      'ye343ye',
      'fd343gjs',
      'sdfd343fg',
      '34',
      'sfsd',
      '433',
      '45245',
      '745',
      'ghfhf45g',
      'fd45ag',
      'j3ghj',
      '3434211',
      '4564526',
      '5645645'
    ],
    counts: [
      {
        data: [
          79200,
          52400,
          13300,
          79200,
          52400,
          13300,
          79200,
          52400,
          13300,
          79200,
          52400,
          13300,
          79200,
          52400,
          13300,
          79200,
          52400,
          13300,
          79200,
          52400,
          13300,
          79200,
          52400,
          13300,
          79200,
          52400,
          13300
        ],
        label: 'Baseline'
      },
      {
        data: [
          60000,
          34230,
          10000,
          60000,
          34230,
          10000,
          60000,
          34230,
          10000,
          60000,
          34230,
          10000,
          60000,
          34230,
          10000,
          60000,
          34230,
          10000,
          60000,
          34230,
          10000,
          60000,
          34230,
          10000,
          60000,
          34230,
          10000
        ],
        label: 'Filtered'
      }
    ]
  }}
  delay={0}
  duration={400}
  grid={{
    x: {
      style: {
        fill: '#000',
        opacity: 1,
        'shape-rendering': 'auto',
        stroke: '#ccc',
        'stroke-opacity': 0.4,
        'stroke-width': 1,
        visible: true
      },
      ticks: 5
    },
    y: {
      style: {
        fill: '#000',
        opacity: 1,
        'shape-rendering': 'auto',
        stroke: '#ccc',
        'stroke-opacity': 0.4,
        'stroke-width': 1,
        visible: true
      },
      ticks: 5
    }
  }}
  groupLayout={2}
  height={420}
  onClick={function noRefCheck() {}}
  showBinPercentages={[
    true,
    true
  ]}
  tipContentFn={function noRefCheck() {}}
  visible={{}}
  width={420}
/>