Highcharts Demo

author(s): Torstein Hønsi

by dolanmiu

HTML

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

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    inverted: true,
    type: 'column'
  },
  yAxis: [{
      title: {
        text: ''
      },
      height: '100%',
      lineWidth: 2
    },
    {
      title: {
        text: ''
      },
      height: '100%',
      lineWidth: 2
    }
  ],

  xAxis: {
    categories: ['a', 'b', 'c', 'd', 'e'],
    showEmpty: true
  },

  plotOptions: {
    column: {
      centerInCategory: true
    }
  },

  series: [{

      type: 'column',
      name: 'Pressure',
      data: [{
          name: 'a',
          y: 1
        },
        {
          name: 'b',
          y: 2
        },
        {
          name: 'c',
          y: 3,
          pointWidth: 44,
        },
        {
          name: 'd',
          y: 4
        },
        null,
        {
          name: 'f',
          y: 6
        },
      ],
      color: '#00FF00'
    },
    {

      type: 'column',
      name: 'Volume',
      data: [{
          name: 'a',
          y: 1
        },
        {
          name: 'b',
          y: 2
        },
        null,
        {
          name: 'd',
          y: 4
        },
        null,
        {
          name: 'f',
          y: 6
        },
      ],
      color: '#FF00FF'
    },
    {
      type: 'column',
      name: 'Weight',
      data: [{
          name: 'a',
          y: 1
        },
        {
          name: 'b',
          y: 2
        },
        null,
        {
          name: 'd',
          y: 4
        },
        null,
        {
          name: 'f',
          y: 6
        },
      ],
      color: '#0000FF'
    },
    {
      type: 'column',
      name: 'Height',
      data: [{
          name: 'a',
          y: 1
        },
        {
          name: 'b',
          y: 2
        },
        null,
        {
          name: 'd',
          y: 4
        },
        {
          name: 'e',
          y: 5,
          pointWidth: 44,
        },
        {
          name: 'f',
          y: 6
        },
      ],
      color: '#FF0000'
    },
  ]
});