CODEWITHSUNDEEP
javascriptangularhighcharts
Hienz
Hienz

Reputation: 718

Highcharts gantt - show multiple xAxis rows, one for year and one for month

Im using Highcharts gantt, to display a gantt chart on my angular page.

My goal would be, to have two rows on the xAxis, the first is a year label, the second is the month label.

If I'm using almost default settings, it almost works, but the year row only shows one year.

My code looks like this:

  xAxis: {
    labels: {
      format: '{value:%m}'
    }
  },
  yAxis: {
    visible: false,
  },

enter image description here

The gantt chart should display years from 2020 to 2023, and the months of those years below that. Is it even possible? I was searching for it in the documentation, it talks about everything but this.

Upvotes: 1

Views: 921

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

Would you like to achieve something like here: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/gantt/gantt/years-and-months

xAxis: [{
    tickInterval: 1000 * 60 * 60 * 24 * 30, // Month
    labels: {
        format: '{value:%b}',
        style: {
            fontSize: '8px'
        }
    },
    min: Date.UTC(2014, 3, 17),
    max: Date.UTC(2015, 11, 0),
    currentDateIndicator: true
}, {
    tickInterval: 1000 * 60 * 60 * 24 * 365, // Year
    labels: {
        format: '{value:%Y}',
        style: {
            fontSize: '15px'
        }
    },
    linkedTo: 0
}],

If not - could you reproduce your current attempt?

Upvotes: 2

Related Questions