CODEWITHSUNDEEP
javascripthighcharts
ron
ron

Reputation: 409

highcharts - show by month

highcharts by month no correct label, when is one month.

when is 2 month the label in xAxis is jan-2016 and feb-2016 but when is only one month the label is 04:59:59:999 normal: https://jsfiddle.net/rcondori/c3y1r7sn/

series: [{
    data: [{
      name: "January",
      x: 1451624399999,
      y: 52
    }, {
      name: "February",
      x: 1454302799999,
      y: 60
    }]
  }
]

bad: https://jsfiddle.net/rcondori/c3y1r7sn/1/

series: [{
    data: [{
      name: "January",
      x: 1451624399999,
      y: 52
    }
]

help me please.

Upvotes: 1

Views: 1266

Answers (1)

mustapha mekhatria
mustapha mekhatria

Reputation: 3909

You can use the following options:

  1. Option 1 Use Highcharts API (check example):

Highcharts.dateFormat allows you to set up the date format (for more details check this link)

labels: {
formatter: function() {
return Highcharts.dateFormat('%B-%Y', this.value);
}
}
  1. Option 2: Using JS method:

Check below

var temp = new Date(this.value);
          locale = "en-ca",
            month = temp.toLocaleString(locale, {
              month: "long"
            });
          return month + '-' + temp.getFullYear();

By setting the variable temp as new Date (this.value), you have access to the x value (in this case the date). month=a.toLocalString allows you to get the month on letters instead of numbers. Here the example:

$(function() {
  $('#container').highcharts({
    xAxis: {
      type: 'datetime',
      labels: {
        formatter: function() {
          var temp = new Date(this.value);
          locale = "en-ca",
            month = temp.toLocaleString(locale, {
              month: "long"
            });
          return month + '-' + temp.getFullYear();
        }
      }

    },



    series: [{
        data: [{
          name: "January",
          x: 1451624399999,
          y: 52
        }]
      }

    ]
  });
});

Upvotes: 2

Related Questions