Search code examples
highchartsangular15

How to show month and year in the x axis name in highcharts


I am trying to show past 3 month with year in the y axis value in highcharts. but it is not working it is coming like 0 1 2 3 4...

I want to show like ( Apr 2023 May 2023 Jun 2023) in the x axis.

   xAxis: {
  type: 'year',
  dateTimeLabelFormats: {
    // do display the month and year
    month: '%b %y',
    year: '%Y',
  },
  },

Demo : https://stackblitz.com/edit/highcharts-cloning-barchart-wpj4ti?file=src%2Fapp%2Fapp.component.ts


Solution

  • You should use xAxis.type: 'datetime' and xAxis.dateTimeLabelFormats set to month: '%b %Y'. Besides that, you need to also define x values as a timestamp or alternatively set pointStart and pointInterval options.

    Demo: https://stackblitz.com/edit/highcharts-cloning-barchart-npvldx?file=src%2Fapp%2Fapp.component.ts

    API References: https://api.highcharts.com/highcharts/xAxis.type https://api.highcharts.com/highcharts/xAxis.dateTimeLabelFormats