CODEWITHSUNDEEP
highcharts
Guillermo Perez
Guillermo Perez

Reputation: 649

How to display Quarters in gantt chart

I'm trying to use your gantt chart library to create something with milestones as follow:

I would like to have Quarter 1 / 20XX, Quarter 2 / 20XX etc... instead of these 1 2 3 4 5 6... numbers on top, I been inspecting and trying almost anything and I think I need you help, as I could not figure it out. I did try using tickInterval and tickAmount on the xAxis but it seems to do whatever it wants and I'm a little frustrated now... please provide me with any help, thank you forehand.

Upvotes: 0

Views: 486

Answers (2)

Guillermo Perez
Guillermo Perez

Reputation: 649

This is how I did it, I hope this helps anybody like me, going crazy without examples :-( (simplified for space reasons)

xAxis: [{
               ...

                title: { text: 'Quarters' },

                units: [
                    ['month', [3]],
                ],
                useHTML: true,
                labels: {
                    
                    align: "center",
                    format: '{value: %b-%y}',   
                    formatter: function AxisLabelsFormatterCallbackFunction() {

                        var providedLocalDate = new Date(this.value);

                        var realDate = new Date(providedLocalDate.getTime() + (providedLocalDate.getTimezoneOffset() * 60 * 1000));

                        var month = realDate.getMonth();

                        var QuarterNumber;

                        if (month >= 0 && month <= 2)QuarterNumber = 1;
                        if (month >= 3 && month <= 5) QuarterNumber = 2;
                        if (month >= 6 && month <= 8) QuarterNumber = 3;
                        if (month >= 9 && month <= 11) QuarterNumber = 4;

                        var year = realDate.getFullYear().toString();
                        var year2digits = year.substring(year.length - 2, year.length);
                        return 'Q' + QuarterNumber + '-<span class="font-weight-bold">' + year2digits + '</span>';


                    },
                },

enter image description here

Upvotes: 1

magdalena
magdalena

Reputation: 3695

Use xAxis.labels.format(xAxis.labels.formatter as well) or xAxis.dateTimeLabelFormats to format labels depending on provided data:

Example:

  xAxis: [{
    labels: {
      format: 'Month: {value: %m}'
    }
  }],

API Reference: https://api.highcharts.com/gantt/xAxis.dateTimeLabelFormats https://api.highcharts.com/gantt/xAxis.labels.format

Demo: https://jsfiddle.net/BlackLabel/5hopuL8f/

Upvotes: 0

Related Questions