JSX

<Histogram
  annotations={[
    {
      color: 'grey',
      value: '0%'
    },
    {
      color: 'grey',
      value: '0%'
    },
    {
      color: 'red',
      value: '-5%'
    }
  ]}
  axis={{
    x: {
      scale: 'ORDINAL'
    },
    y: {
      ticks: 3
    }
  }}
  bar={{
    hover: {
      lighten: 0.1
    },
    overlayMargin: 5
  }}
  colorScheme={[
    '#7d5d2e',
    '#F9C80E',
    '#56b4bf',
    '#cccccc',
    '#FF7101',
    '#cdcdcd',
    '#cc5a00',
    '#ff8d33',
    '#c5e5e9',
    '#227839',
    '#f9c80e',
    '#77c3cb',
    '#008762',
    '#d7263d',
    '#D7263D',
    '#dbdbdb',
    '#449098',
    '#007656',
    '#888888',
    '#e6e6e6',
    '#00a97b',
    '#a9a9a9',
    '#FBD7D9',
    '#33ba95',
    '#ff7101'
  ]}
  data={{
    bins: [
      'Female',
      'Male',
      'Other'
    ],
    counts: [
      {
        data: [
          79200,
          52400,
          13300
        ],
        label: 'Baseline'
      },
      {
        data: [
          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={400}
  onClick={function noRefCheck() {}}
  showBinPercentages={[
    true,
    true
  ]}
  tipContentFn={function noRefCheck() {}}
  visible={{}}
  width="100%"
/>