month xAxis in column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

month xAxis in column chart

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">
    $(window).load(function(){/* ww w .  ja  va 2 s . co m*/
const hourly = 60 * 60 * 1000;
const daily = 24 * hourly;
const monthly = 28 * daily;
$(function () {
    $('#container').highcharts(
{
  plotOptions: {
    column: {
      color: "#36d",
      pointPadding: 0,
      groupPadding: 0.1,
    }
  },
  xAxis: {
    lineWidth: 0,
    tickWidth: 0,
    labels: {
      style: {
        fontSize: 12
      }
    },
    categories: ["Jan-18","Feb-18","Mar-18","Apr-18","May-18","Jun-18","Jul-18","Aug-18","Sep-18","Oct-18","Nov-18","Dec-18"],
  },
  yAxis: {
    visible: false
  },
  series: [
    {
      name: "foo",
      type: "column",
      data: [
        {
          //x: new Date("2018-01-01T00:00:00.000Z"),
          y: 172.4784
        },
        {
          //x: new Date("2018-02-01T00:00:00.000Z"),
          y: 155.7869
        },
        {
          //x: new Date("2018-03-01T00:00:00.000Z"),
          y: 172.2465
        },
        {
          //x: new Date("2018-04-01T00:00:00.000Z"),
          y: 166.9145
        },
        {
          //x: new Date("2018-05-01T00:00:00.000Z"),
          y: 172.4784
        },
        {
          //x: new Date("2018-06-01T00:00:00.000Z"),
          y: 166.9145
        },
        {
          //x: new Date("2018-07-01T00:00:00.000Z"),
          y: 172.4784
        },
        {
          //x: new Date("2018-08-01T00:00:00.000Z"),
          y: 172.4784
        },
        {
          //x: new Date("2018-09-01T00:00:00.000Z"),
          y: 166.9145
        },
        {
          //x: new Date("2018-10-01T00:00:00.000Z"),
          y: 172.699
        },
        {
          //x: new Date("2018-11-01T00:00:00.000Z"),
          y: 166.9145
        },
        {
          //x: new Date("2018-12-01T00:00:00.000Z"),
          y: 294.8445
        }
      ]
    },
  ]
}
    );
});
    });

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