eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Set height of each point item in gantt chart

HI
currently i am using pointWidth as 50 but if i increase it to 100 it goes beyond its rows height. plz suggest what to do?
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Set height of each point item in gantt chart

Hello,

You can use yAxis.staticScale property to set row height.

Demo: https://jsfiddle.net/BlackLabel/wesfau5v/
API: https://api.highcharts.com/gantt/yAxis.staticScale

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: Set height of each point item in gantt chart

HI
I see the demo its fine in demo but in my angular application i am getting row height increased but suppose there 5 rows then i can see only first 2 rows only and even after using scrollbar property it is not scrolling, can u tell me how to do in angular?
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Set height of each point item in gantt chart

Hi,
Thanks for note,

I prepared a demo in Angular, could you check this and explain in more detail this case?

Demo:
https://stackblitz.com/edit/highcharts- ... mponent.ts


Let me know how are you doing with this.
Best regards.
Sebastian Hajdus
Highcharts Developer
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: Set height of each point item in gantt chart

hi
thanks for the reply but labels are missing on it...I want text to be wrap like this https://jsfiddle.net/BlackLabel/mfrwe30t/ and if there more than 5 rows in y axis categories than scrollbar should display.

I have used
scrollbar: {
enabled: true,
showFull: true,

}

still no scroll bar for me...can u help me on this
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: Set height of each point item in gantt chart

Any update please
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Set height of each point item in gantt chart

Hi,

Angular has default height and widths styles for component, you need to add: style="width: 100%; height: 100%; display: block;" to make the chart visible full width.
Adding a scrollbar on the y-axis, which you are trying to do, is not supported from the API. This option is from stock and highcharts, may work, but is not fully functional with Gantt.

Code: Select all

    yAxis: {
      staticScale: 120,
      min: 0,
      max: 2,
      scrollbar: {
        enabled: true,
        showFull: false,
        height: 30,
      } 
    },
https://api.highcharts.com/highstock/yAxis.scrollbar

The recommended way to set the scroll bar on the y-axis axis in Gantt charts is to use chart.scrollablePlotArea.

Code: Select all

    chart: {
      scrollablePlotArea: {
        minHeight: 900,
      },
    },
https://api.highcharts.com/gantt/chart. ... lePlotArea

Live demo: https://stackblitz.com/edit/highcharts- ... mponent.ts

Let us know if you have any further questions.
Best regards.
Sebastian Hajdus
Highcharts Developer
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: Set height of each point item in gantt chart

scrollplot area i tried but its not giving desired results.

can you please answer this viewtopic.php?f=19&t=49236
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: Set height of each point item in gantt chart

And for this
const point = this.point,
text = point.text,
textWidth = point.dataLabel ? point.dataLabel.bBox.width : 0,
pointWidth = point.shapeArgs.width - 10;

i am not getting dataLabel in my point item though when i use getSelectedPoints() i can see but not with this method

any help will b appreciated
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Set height of each point item in gantt chart

Hi,
Please check this demo, I marked selected point and triggered it by method getSelectedPoints() fires in chartCallback and dataLabels inside is showing options like in the formatter function.

Demo:
https://stackblitz.com/edit/highcharts- ... mponent.ts

Let me know how works this solution.
Best regards
Sebastian Hajdus
Highcharts Developer
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: Set height of each point item in gantt chart

Hi Sebstian

thanks for demo, what issue I am facing with formatter inside dataLabel ther datalabel.bBox i am not getting ....with getSelectedPoints i am getting it. But the code you fire on chartcallback will work when we select a point.....not sure how it will help for text wrapping.

in series.data: this.points...so this.points is data i am building from API.

please suggest
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Set height of each point item in gantt chart

Hi,

I'm a bit confused about what you're trying to achieve, datalabel.bBox I also can get with method getSelectedPoints().

Can you describe in more detail what you are trying to do with examples in the code editor and a good description?

Best regards.
Sebastian Hajdus
Highcharts Developer
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: Set height of each point item in gantt chart

Finally i am getting by making point as type any. but when i create new records from pop up the code is not working. though on relaoding its working only. please suggest
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Set height of each point item in gantt chart

Hi,
Thanks for the message.

Please share with me your pice of code that I have better help.

Best regards
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Gantt”