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

Set height of each point item in gantt chart

Thu Aug 04, 2022 1:22 pm

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?

User avatar
michal.f
Posts: 628
Joined: Thu Aug 12, 2021 12:04 pm

Re: Set height of each point item in gantt chart

Thu Aug 04, 2022 2:01 pm

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

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

Re: Set height of each point item in gantt chart

Fri Aug 05, 2022 5:13 am

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: 1716
Joined: Fri Aug 07, 2020 7:08 am

Re: Set height of each point item in gantt chart

Fri Aug 05, 2022 1:45 pm

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: 73
Joined: Thu Apr 28, 2022 6:55 am

Re: Set height of each point item in gantt chart

Mon Aug 08, 2022 9:41 am

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: 73
Joined: Thu Apr 28, 2022 6:55 am

Re: Set height of each point item in gantt chart

Tue Aug 09, 2022 10:33 am

Any update please

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

Re: Set height of each point item in gantt chart

Tue Aug 09, 2022 1:24 pm

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: 73
Joined: Thu Apr 28, 2022 6:55 am

Re: Set height of each point item in gantt chart

Tue Aug 09, 2022 1:29 pm

scrollplot area i tried but its not giving desired results.

can you please answer this viewtopic.php?f=19&t=49236

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

Re: Set height of each point item in gantt chart

Tue Aug 09, 2022 1:32 pm

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: 1716
Joined: Fri Aug 07, 2020 7:08 am

Re: Set height of each point item in gantt chart

Wed Aug 10, 2022 6:46 am

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: 73
Joined: Thu Apr 28, 2022 6:55 am

Re: Set height of each point item in gantt chart

Wed Aug 10, 2022 1:38 pm

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

Return to “Highcharts Gantt”