Highcharts Ratio Bar

by Ben Clayton

HTML

<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/modules/data.js"></script>

<div id="container" style="height: 400px"></div>

JavaScript

// create the chart
Highcharts.chart('container',{
  "title": {text:'',floating:true,margin:0},
  "subtitle": {},
  "exporting": {},
  "chart": {
    "type": "column",
    "inverted": true,
    "polar": false
  },
  "plotOptions": {
    "series": {
      "stacking": "normal"
    }
  },
  "series": [
    {
      "name": "Male",
      "turboThreshold": 0
    },
    {
      "name": "Female",
      "turboThreshold": 0
    }
  ],
  "data": {
    "csv": "\"Name\";\"Male\";\"Female\"\n\"Value\";46;54",
    "googleSpreadsheetKey": false,
    "googleSpreadsheetWorksheet": false
  },
  "yAxis": {
    "lineWidth": 1,
    "labels": {
      "enabled": true,
      "distance": 29
    },
    "tickAmount": 1,
    "reversedStacks": false,
    "reversed": false,
    "min": 0,
    "max": 100,
    "visible": true,
		"visible": false
  },
  "xAxis": {
    "visible": false,
    "title": {},
    "labels": {}
  }
});