GANTT Scrollbar issue - remove numbers

[soka]

Hello,
I make visualizations with the GANTT class.
When I want to show many lines in the y-axis, I create a scrollbar: {enabled: true,},
I always want to show the same number of lines, e.g. 30 lines and therefore I set the maximum: 30. But if there is only data to fill in fewer lines, a number appears in the field - see attachment.
Simple question - how do I remove that number so the field becomes empty?
Regards,
Soren

[andrzej.b]

Hi Soren,

Thanks for contacting us with your question!

When you set yAxis max to 30, by default it will display values up to 30, regardless if your data matches this max - hence the numbers appear.
You can use yAxis label formatter function to conditionally render the yAxis labels based on the length of your data set:

Code: Select all

  yAxis: {
    max: 30,
    labels: {
      formatter: function () {
        const totalDataPoints = this.axis.series[0].data.length
        return parseInt(this.value) >= totalDataPoints ? "" : this.value
      },
    },
  },

Please let me know if I can be of any further assistance.

Best regards,

[soka]

Hi,
Thanks for helping me.
It's working but when I combine it with functionality to make plotbands it not working...

Can you help me again - thanks.

Regards,
Søren
//plotBands////////////////////////////////////////////
load: function() {
const chart = this;
const yAxis = chart.yAxis[0];
const plotBands = [];
for (let i = 0; i < yAxis.max; i += 2) {
plotBands.push({
color: '#eee',
from: -0.5 + i,
to: 0.5 + i
});
}
/////
yAxis.update({
plotBands
});
/////
},
//remove numbers////////////////////////////////////////////
labels: {
style: {
fontWeight: 'bold',
fontSize: '10px' // Set the font size for y-axis labels (Employee-names)
},
formatter: function() {
const totalDataPoints = this.axis.series[0].data.length
return parseInt(this.value) >= totalDataPoints ? "" : this.value
},
},

[andrzej.b]

Hi,

Can you reproduce your issue in an online editor I could work with?
I've made a simplified demo with plotBand defined with basic API, and it work properly: https://jsfiddle.net/BlackLabel/abs5t893/

Best,

[soka]

Thanks andrzej.b

Your jsfiddle was working for me.

What I want is that the odd lines in the chart should have a gray background so it's nicer to look at, no matter how many lines there are, and that's why I have to make a loop of some kind. I found the code I use for that online.

Maybe it's not necessary to use plotBands - maybe I can do it in HTML?

Regards,
Søren
////////////////////////
load: function() {
const chart = this;
const yAxis = chart.yAxis[0];

const plotBands = [];
for (let i = 0; i < yAxis.max; i += 2) {
plotBands.push({
color: '#eee',
from: -0.5 + i,
to: 0.5 + i
});
}
/////
yAxis.update({
plotBands
});
/////
},

[andrzej.b]

Hi,

You can also iterate over plotBands: https://jsfiddle.net/BlackLabel/nvfodp7x/

Best,

[soka]

Hi andrzej.b

It worked exactly as I wanted.

Thank you very much for the help - I appreciate it.

Regards,
Søren