Controlling the the spacing between the series to avoid cluttering - Javascript highcharts

Javascript examples for highcharts:Chart Series

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

Description

Controlling the the spacing between the series to avoid cluttering

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.src.js"></script> 
      <div id="container"></div> 
      <script type="text/javascript">
var chart = Highcharts.chart('container', {
  chart: {//from w  w w. ja v  a 2 s.  com
    type: 'bar',
    events: {
      render: function() {
        var xAxis = this.xAxis[0];
        for (var i = 0; i < xAxis.tickPositions.length; i++) {
          var tickPosition = xAxis.tickPositions[i],
            tick = xAxis.ticks[tickPosition],
            nextTickPosition,
            nextTick;
          if (!tick.isLast) {
            nextTickPosition = xAxis.tickPositions[i + 1];
            nextTick = xAxis.ticks[nextTickPosition];
            tick.label.attr({
              y: (new Number(tick.mark.d.split(' ')[2]) + new Number(nextTick.mark.d.split(' ')[2])) / 2 + 3
            });
          }
        }
      }
    }
  },
  plotOptions: {
    series: {
      grouping: false,
      pointRange: 1
    }
  },
  series: [{
    data: [
      [0, 1],
      [7, 9]
    ]
  }, {
    data: [
      [1, 2]
    ]
  }, {
    data: [
      [2, 2]
    ]
  }, {
    data: [
      [3, 1]
    ]
  }, {
    data: [
      [4, 3]
    ]
  }, {
    data: [
      [5, 2]
    ]
  }, {
    data: [
      [6, 5]
    ]
  }],
  xAxis: {
    tickPositions: [-0.5, 6.5, 7.5],
    showLastLabel: false,
    labels: {
      formatter: function() {
        switch (this.pos) {
          case -0.5:
            return 'Bananas';
          case 6.5:
            return 'Apples';
        }
      }
    }
  }
});

      </script>  
   </body>
</html>

Related Tutorials