Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

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

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'bar',
    events: {
      load: function() {
        var point = this.series[0].points[0],
          xAxis = this.xAxis[0],
          x1 = xAxis.toValue(point.shapeArgs.x + this.plotTop),
          x2 = xAxis.toValue(
            point.shapeArgs.x + point.shapeArgs.width + this.plotTop
          );

        var pos = point.graphic.getBBox();

        xAxis.update({
          tickPositions: [x1, x2]
        });
      }
    }
  },

  xAxis: {
    type: 'category',
    title: {
      text: null
    },
    reversed: false
    //tickLength: 1
  },
  yAxis: {
    // min: 0,
    // max: 10,
    title: {
      text: 'Votes',
      align: 'high'
    }
  },
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  plotOptions: {
    series: {

      borderColor: '#303030',
      color: '#cac9c9'
    },

  },
  series: [{
    name: 'Votes',
    data: [
      [5, 10]
    ],
    dataLabels: {
      //enabled: true,
      color: '#333',
      //inside: true
    }
  }]
});