"butterfly"

by jlbriggs

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width:575px;height:400px;margin:1.5em 1em;"></div>

<script>
  var d = new Date();
  var pointStart = d.getTime();
  //-------------------------------------------------------
  //set a 'line' marker type for use in bullet charts 
  Highcharts.Renderer.prototype.symbols.vline = function(x, y, width, height) {
    return ['M', x, y + width / 2, 'L', x + height, y + width / 2];
  };
  Highcharts.Renderer.prototype.symbols.hline = function(x, y, width, height) {
    return ['M', x, y + height / 2, 'L', x + width, y + width / 2];
  };
  //-------------------------------------------------------
  Highcharts.setOptions({
    global: {
      useUTC: false
    },
    colors: [
      'rgba( 0,   154, 253, 0.9 )', //bright blue
      'rgba( 253, 99,  0,   0.9 )', //bright orange
      'rgba( 40,  40,  56,  0.9 )', //dark
      'rgba( 253, 0,   154, 0.9 )', //bright pink
      'rgba( 154, 253, 0,   0.9 )', //bright green
      'rgba( 145, 44,  138, 0.9 )', //mid purple
      'rgba( 45,  47,  238, 0.9 )', //mid blue
      'rgba( 177, 69,  0,   0.9 )', //dark orange
      'rgba( 140, 140, 156, 0.9 )', //mid
      'rgba( 238, 46,  47,  0.9 )', //mid red
      'rgba( 44,  145, 51,  0.9 )', //mid green
      'rgba( 103, 16,  192, 0.9 )' //dark purple
    ],
    chart: {
      alignTicks: false,
      type: '',
      margin: [60, 25, 100, 90],
      //borderRadius:10,
      //borderWidth:1,
      //borderColor:'rgba(156,156,156,.25)',
      //backgroundColor:'rgba(204,204,204,.25)',
      //plotBackgroundColor:'rgba(255,255,255,1)',
      style: {
        fontFamily: 'Abel,serif'
      },
      events: {
        load: function() {
          this.credits.element.onclick = function() {
            window.open(
             ...

CSS

@import url(https://fonts.googleapis.com/css?family=Changa+One|Loved+by+the+King|Fredericka+the+Great|Droid+Serif:400,700,400italic|Abel|Oswald:400,300,700);
body {
  font-family: Abel, Calibri, Helvetica, sans-serif;
  font-size: 95%;
}
.xlabel {
	width: 100px;
	font-weight: bold;
	text-align: center;
	
}

JavaScript

var chart,
  dataPoints = 8,
  categories = alphaCats(dataPoints),
  data1 = randomData(dataPoints, true, 100),
  data2 = randomData(dataPoints, true, 100),
  max = {};

max.data1 = Math.max.apply(Math, data1);
max.data2 = Math.max.apply(Math, data2);
max.data = Math.max.apply(Math, [max.data1, max.data2]);
//console.log(max);

$(function() {
  $('#container').highcharts({
    chart: {
      margin: [100, 25, 40, 50],
      type: 'bar'
    },
    legend: {
      enabled: true,
      verticalAlign: 'top',
      y: 50
    },
    tooltip: {
      shared: true,
      crosshairs: true,
      borderColor: Highcharts.getOptions().colors[2]
    },
    plotOptions: {
      series: {}
    },
    xAxis: {
      title: {
        text: null
      },
      categories: ['Test Category 1','Test Category 2','Test Category 3','Test Category 4','Test Category 5','Test Category 6','Test Category 7','Test Category 8'],
      labels: {
				useHTML: true,
				formatter: function() {
					return '<div class="xlabel">'+this.value+'</div>';
				}
      },
      lineWidth: 0,
      tickWidth: 0,
      offset: -240
    },
    yAxis: [{
      max: max.data,
      title: {
        text: null
      },
      width: 175,
      reversed: true
    }, {
      max: max.data,
      offset: 0,
      title: {
        text: null
      },
      left: 350,
      width: 175
    }],
    series: [{
      yAxis: 0,
      data: data1
    }, {
      yAxis: 1,
      data: data2

    }]
  });
  chart = $('#container').highcharts();

});