Highcharts Demo

author(s): Torstein Hønsi

by Rajesh Danabal

HTML

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

<div id="container-vertical"></div>

CSS

#container {
  max-width: 800px;
  min-width: 380px;
  margin: 0 auto;
}

JavaScript

var data = [];

for (var i = 0; i <= 100; i++) {

  data.push(['data' + i, i * 100 * Math.random(), i * 1000]);
}

Highcharts.chart('container-vertical', {

  chart: {
    type: 'variwide'
  },

  title: {
    text: 'Variwide Chart'

  },
  subtitle: {
    text: 'xaxis label vertical'
  },

  xAxis: {
    type: 'category',
    labels: {
      useHTML: true,
      rotation: -90,
      step: 1
    },
    title: {
      text: 'lable alignment mismatch'
    }
  },
  legend: {
    enabled: false
  },

  series: [{
    name: 'Labor Costs',
    data: data,
    dataLabels: {
      enabled: true,
      format: '€{point.y:.0f}'
    },
    tooltip: {
      pointFormat: 'Labor Costs: <b>€ {point.y}/h</b><br>' +
        'GDP: <b>€ {point.z} million</b><br>'
    },
    colorByPoint: true
  }]

});