add extra tears/ticks in column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Column Chart

Description

add extra tears/ticks in column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Hightcharts Experiment</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//from   w  w w  . j a  va2 s.co  m
$(function() {
  var colors = ['blue', 'green', 'yellow', 'orange', 'red'],
    names = ['First', 'Second', 'Third', 'Fourth', 'Fifth'],
    values = [6, 7, 9, 1, 1];
  $('#container').highcharts({
    chart: {
      type: 'column',
    },
    legend: {
      enabled: true,
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      labelFormatter: function() {
        return this.name + " - <span class='total'>" + this.y + "</span>"
      }
    },
    title: {
      text: 'Simple Bar Graph'
    },
    xAxis: {
      categories: ['First', 'Second', 'Third', 'Fourth', 'Fifth'],
      allowDecimals: false
    },
    yAxis: {
      allowDecimals: false
    },
    plotOptions: {
      column: {
        dataLabels: {
          enabled: true,
          overflow: 'none',
          crop: false,
          rotation: -90,
          y: -6,
          align: "left"
        }
      },
      series: {
        grouping: false, //add to have center align every bar to its corresponding x axis
        events: {
          legendItemClick: function(x) {
            var i = this.index - 1;
            var series = this.chart.series[0];
            var point = series.points[i];
            if (point.oldY == undefined)
              point.oldY = point.y;
            point.update({
              y: point.y != null ? null : point.oldY
            });
          }
        }
      }
    },
    legend: {
      align: 'right',
      verticalAlign: 'top',
      layout: 'vertical',
      x: 0,
      y: 80,
      padding: 3,
      itemMarginTop: 5,
      useHTML: true,
      itemMarginBottom: 5,
      labelFormatter: function() {
        return '<div style="width:100px;"><span style="float:left; margin-left:10px">' + names[this.index - 1] + '</span><span style="float:right">' + values[this.index - 1] + '</span></div>';
      },
      symbolRadius: 0,
    },
    series: [{
      color: colors[0],
      showInLegend: false,
      data: [{
        y: 3000,
        name: 'First',
        color: colors[0]
      }, {
        y: 3500,
        name: 'Second',
        color: colors[1]
      }, {
        y: 467,
        name: 'Third',
        color: colors[2]
      }, {
        y: 1987,
        name: 'Fourth',
        color: colors[3]
      }, {
        y: 2567,
        name: 'Fifth',
        color: colors[4]
      }]
    }, {
      color: 'blue'
    }, {
      color: 'green'
    }, {
      color: 'yellow'
    }, {
      color: 'orange'
    }, {
      color: 'red'
    }]
  });
});
    });

      </script> 
   </head> 
   <body> 
      <div id="container" style="height: 300px"></div>  
   </body>
</html>

Related Tutorials