Highcharts Demo

author(s): Torstein Hønsi

by anikettiwari

HTML

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

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

JavaScript

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'bar',
      width: 350,
      height: 250,
      spacing: [20, 10, 0, 0],
      marginLeft: 0,
      marginRight: 0,
    },
    title: {
      text: null
    },
    legend: {
      enabled: false
    },
    credits: {
      enabled: false
    },
    xAxis: {

      categories: [
        '<b>Nicole Ouellet</b> / (647) 964-9892',
        '<b>Melanie Beauchamp</b> / (418) 455-3094',
        '<b>Lisa Masotti</b> / (289) 439-4685',
        '<b>Meredith Mcdonnell</b> / (613) 484-5280',
        '<b>David G Ogawa</b> / (778) 991-0497', '<b>Louis-philippe ...</b> / (418) 561-5576',
        '<b>Stephen Panylo</b> / (416) 902-3014',
        '<b>Andrea Biro</b> / (289) 380-3480',
        '<b>Mary Greene</b> / (416) 917-2127',
        '<b>Sukhdeep Khangura</b> / (778) 773-2425'
      ],
      labels: {
        enabled: false
      },
      tickLength: 0,
      lineWidth: 0,
      endOnTick: false

    },
    yAxis: {
      max: 2034,
      min: 0,
      startOnTick: false,
      endOnTick: false,
      showFirstLabel: false,
      showLastLabel: false,
      visible: false,
    },
    plotOptions: {
      bar: {
        dataLabels: {
          enabled: true,
          color: '#2d53a7',
          align: 'left',
          style: {
            textShadow: false,
            fontWeight: 'normal',
            fontSize: '9px',
            lineHeight: '9px',
            fontFamily: 'Verdana',

          },
          inside: true,
          y: -2,
          x: 0,
          useHTML: true,
          padding: [0.1],
          formatter: function() {
            return this.x + ' / ' + this.y + ' Msgs';
          }
        },
      },
    },
    series: [{
      name: 'Top 10 Text Users',
      color: '#00c0f2',
      pointWidth: 15,
      data: [{
        y: 2034,
        color: '#2d53a7'
      }, {
        y: 1234,
      }, {
        y: 1226,
      }, {
        y: 1179,
      }, {
        y: 1160,
      }, {
      ...