Highcharts Demo

author(s): Torstein Hønsi

HTML

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

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

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'bar',
    margin: [10, 10, 10, 50],
    events: {
      load: function() {
        var chart = this,
          marginTop = chart.margin[0],
          marginBottom = chart.margin[2],
          seriesLength = chart.series[0].points.length,
          lengthPerPoint = 100;

        chart.setSize(null, (lengthPerPoint * seriesLength + marginTop + marginBottom));
      }
    }
  },
  title: {
    text: ''
  },
  credits: {
    enabled: false
  },
  legend: {
    enabled: false
  },
  xAxis: {
    lineWidth: 0,
    tickWidth: 0,
    categories: ['red', 'blue', 'green', 'yellow']
  },
  yAxis: {
    showFirstLabel: false,
    showLastLabel: false,
    tickAmount: 0,
    gridLineWidth: 0,
    title: {
      enabled: false
    }
  },
  series: [{
    data: [10, 10, 10, 10]
  }],
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true
      }
    },
    series: {
      pointWidth: 20
    }
  }
});