Column chart with empty columns for date in x-axis - Javascript highcharts

Javascript examples for highcharts:Chart Axis

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

Description

Column chart with empty columns for date in x-axis

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function () {/*  w ww  .  java  2 s.c  o m*/
(function (H) {
    H.wrap(H.Point.prototype, 'applyOptions', function (applyOptions, options, x) {
        var point = applyOptions.call(this, options, x),
            series = point.series;
        if (point.name && series.xAxis.categories && point.x === series.xIncrement - 1) {
            var idx = series.xAxis.categories.indexOf(point.name);
            if (idx >= 0) {
                point.x = idx;
            }
        }
        return point;
    });
})(Highcharts);
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked bar chart'
        },
        xAxis: {
            type: 'category',
            categories: ['Wednesday', 'Thursday', 'Friday', 'Monday', 'Tuesday']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Testing'
            }
        },
        series: [{
            name: 'Category I',
            data: [
                ['Wednesday', 20],
                ['Thursday', 30],
                ['Friday', 25],
                ['Monday', 10],
                ['Tuesday', 15]
            ]
        }, {
            name: 'Category II',
            data: [
                ['Wednesday', 25],
                //['Thursday', 10],
                ['Friday', 35],
                ['Monday', 25],
                ['Tuesday', 5]
            ]
        }, {
            name: 'Category III',
            data: [
                ['Wednesday', 10],
                ['Thursday', 20],
                ['Friday', 35],
                //['Monday', 25],
                ['Tuesday', 15]
            ]
        }]
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials