JSX

<Tornado
  data={{
    bins: [
      '16-18',
      '18-25',
      '25-35',
      '35-50',
      '50-65',
      '65-∞'
    ],
    counts: [
      {
        data: [
          [
            200,
            2600,
            5100,
            9700,
            8400,
            6700
          ],
          [
            2002,
            2100,
            4700,
            8700,
            4900,
            1400
          ]
        ],
        label: 'Background'
      },
      {
        data: [
          [
            100,
            260,
            510,
            970,
            840,
            670
          ],
          [
            1000,
            5500,
            470,
            870,
            490,
            140
          ]
        ],
        label: 'Foreground'
      }
    ]
  }}
  direction="HORIZONTAL"
  groupLayout={2}
  height={500}
  id="demo"
  splitAxisHeight={50}
  splitBins={[
    'Male',
    'Female'
  ]}
  width={600}
  xAxisHeight={20}
/>