888ba8
Posts: 44
Joined: Mon Dec 21, 2020 11:18 am

How to customise the default format of the Gantt yAxis labels (treegrid yAxis type)

I am wondering how to customise the default format/value of the Gantt yAxis labels. This is for the default 'treegrid' yAxis type.

I understand it defaults to

Code: Select all

format: {value},
which somehow seems to automatically output the label's / point's name.

I am trying to customise it such that it would show, in normal font-size: name, then in a smaller font-size: amount of days.

I belive, to calculate the amount of days betwen start and end, we should use something as such:

Code: Select all

        labels: {
          formatter: function() {
            var point = this.point,
              days = (1000 * 60 * 60 * 24),
              number = (point.end - point.start) / days;
            return Math.round(number * 100) / 100;
          }
        }
This was used in the following Gantt highchart, which however is a 'category' yAxis type: https://jsfiddle.net/m4d8rpLg/ I am looking for something similar but in a 'treegrid' yAxis type.

However, I can't get this to work on the 'treegrid' yAxis type? And how to - before these number of days - also print the data point's name please?

Trying to make it one step easier, I can't even very well understand how to output anything else other than the name (see this.value below) or any standard fixed text (see 'abc' below). That is: somehow I can't use anything such as optionaltext.

Code: Select all

yAxis: {
   labels: {
    format: '{value}',
    formatter: function () {
      var point = this,
      optionaltext = this.optionaltext || ''
                return this.value + optionaltext.value + 'abc';
            },
        },
  },
The data itself could look something as follows:

Code: Select all

{
        start: Date.UTC(2021, 00, 10),
        importantmilestone: Date.UTC(2021, 00, 14),
        end: Date.UTC(2021, 00, 16),
        name: 'The name of a data point',
        parent: 'The name of the parent',
        optionaltext: 'Some optional text',
        y: 0,
      },
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: How to customise the default format of the Gantt yAxis labels (treegrid yAxis type)

Hi,
Thanks for the clarification,

Sorry, I have a hard time understanding what you are trying to achieve seems confusing.
Please tell me, what do you want to do with labels?

Kind regards.
Sebastian Hajdus
Highcharts Developer
888ba8
Posts: 44
Joined: Mon Dec 21, 2020 11:18 am

Re: How to customise the default format of the Gantt yAxis labels (treegrid yAxis type)

Hi sebastian. I will present a picture, it will explain things better:

Image

This was just a browser-inspect pseudo-adaptation from the default 'treegrid' example https://www.highcharts.com/demo/gantt/p ... management i.e. https://jsfiddle.net/gh/get/library/pur ... management

Originally (without the adaptation asked for), without the amount-of-days-calculation, it was:

Image

It would be nice if we could achieve the above (top image) via highcharts code. To have the amount of days automatically calculated and showing there. It would be even better if we could for example change the font-size of those day-counts.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: How to customise the default format of the Gantt yAxis labels (treegrid yAxis type)

Hi,

Thanks for the images now it's clear :)
I prepared an example, all you need it's to find a way to get the specific data from this.axis.series[0].points.

Live demo:
https://jsfiddle.net/BlackLabel/o0bwf2Lh/

If you will find trouble with this, I will help you.
Best regards!
Sebastian Hajdus
Highcharts Developer
888ba8
Posts: 44
Joined: Mon Dec 21, 2020 11:18 am

Re: How to customise the default format of the Gantt yAxis labels (treegrid yAxis type)

Hi Sebastian! Thanks a lot.

How can we now replace the text 'Test' with the number of days?

I am trying to integrate

Code: Select all

          formatter: function() {
            var point = this.point,
              days = (1000 * 60 * 60 * 24),
              number = (point.end - point.start) / days;
            return Math.round(number * 100) / 100;
          }
together with the code from your https://jsfiddle.net/BlackLabel/o0bwf2Lh/ but I can't seem to get it work.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: How to customise the default format of the Gantt yAxis labels (treegrid yAxis type)

Hi,

To show the number of days for a given point in the table on the yAxis axis.
In the variable point, I put data from the chart object from a slightly different location.

Live demo:
https://jsfiddle.net/BlackLabel/zvj8x1wb/

If you have any further questions, you know where to find us.
Kind regards.
Sebastian Hajdus
Highcharts Developer
888ba8
Posts: 44
Joined: Mon Dec 21, 2020 11:18 am

Re: How to customise the default format of the Gantt yAxis labels (treegrid yAxis type)

Hi @sebastian Can you take a look at the following code please?
That is:

Code: Select all

      formatter: function() {
        console.log(this.axis.series[0].points);
        return this.value + ' (test)';
      },
I have just replaced the above code with:

Code: Select all

      formatter() {
        const point = this.chart.options.series[0].data[this.pos],
          days = (1000 * 60 * 60 * 24),
          number = (point.end - point.start) / days;
        return this.value + ' - ' + Math.round(number * 100) / 100;
      },
Am I missing something?

Also, I wonder if we can round the days, such that no decimals are shown. Just leaving out the decimals would be OK I believe, I am only working with whole days, never with hours.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: How to customise the default format of the Gantt yAxis labels (treegrid yAxis type)

Hi,

In your example, I can't see whats it's wrong, maybe some variables are rewriting.
Try to build your project again starting on my demo as a template, check results before you add something new part of code.

I simplified my demo to the minimum, rounding the numbers of a whole can easily be achieved by using Math.round().
https://developer.mozilla.org/en-US/doc ... Math/round

Live demo:
https://jsfiddle.net/BlackLabel/w430ktqv/

Kind regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Gantt”