display all months regardless of chart size for x-Axis label - Javascript highcharts

Javascript examples for highcharts:Chart Label

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

Description

display all months regardless of chart size for x-Axis label

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 () {//from w w w  . java 2s . co m
    $('#container').highcharts({
        chart: {
            type: 'area'
        },
        xAxis: {
            opposite: true,
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                day: '%b %e',
                week: '%b %e',
                month: '%b'
            },
            tickPositioner: function(min, max) {
               var ticks = this.tickPositions,
                    interval = this.interval,
                    newTicks = [],
                  start = new Date(ticks[0]);
              start.setDate(1);
               while (min <= max) {
                start.setMonth(start.getMonth() + 1);
                 min = start.getTime();
                 newTicks.push(min);
              }
               newTicks.info = ticks.info;
               return newTicks;
            },
            startOnTick: false,
            endOnTick: false
        },
        yAxis: {
            gridLineWidth: 0
        },
        series:[
          {
            showInLegend: false,
            data: [
                [Date.UTC(2015, 8, 1), 0],
                [Date.UTC(2015, 8, 8), 30],
                [Date.UTC(2015, 8, 15), 20],
                [Date.UTC(2015, 8, 22), 50],
                [Date.UTC(2015, 8, 29), 20],
                [Date.UTC(2015, 9, 1), 0],
                [Date.UTC(2015, 9, 8), 30],
                [Date.UTC(2015, 9, 15), 20],
                [Date.UTC(2015, 9, 22), 50],
                [Date.UTC(2015, 9, 29), 20],
                [Date.UTC(2015, 10, 1), 0],
                [Date.UTC(2015, 10, 8), 30],
                [Date.UTC(2015, 10, 15), 20],
                [Date.UTC(2015, 10, 22), 50],
                [Date.UTC(2015, 10, 29), 20],
                [Date.UTC(2015, 11, 1), 0],
                [Date.UTC(2015, 11, 8), 30],
                [Date.UTC(2015, 11, 15), 20],
                [Date.UTC(2015, 11, 22), 50],
                [Date.UTC(2015, 11, 29), 20],
                [Date.UTC(2016, 0, 1), 0],
                [Date.UTC(2016, 0, 8), 30],
                [Date.UTC(2016, 0, 15), 20],
                [Date.UTC(2016, 0, 22), 50],
                [Date.UTC(2016, 0, 29), 20],
                ]
            }
       ],
    });
});

      </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