Mounika Rayankula
Posts: 4
Joined: Mon Mar 29, 2021 9:15 am

Customized tooltip is getting hidden when we have y-axis scrolling

Code: Select all

 tooltip: {
                  enabled: tooltipEnabled,
                  useHTML: true,
                 
                  style: {
                    pointerEvents: 'auto'
                  },
                  positioner: function(a,b,c : any) {
                    console.log(a,b,c);
                   
            
                return {
                      x: 170,
                      y : c.plotY
                    }
                  },
                  formatter: function () {
                    var data : any = this.series.chart.series[0].data;
                    var index = this.point.index;
                    selectedTooltipIndex = index;
                    return ` <div style="height:auto; width:600px;
            background-color: #fff;
            color:#000;
            position: relative;
            top:0px;
            font-size:14px;
            font-family: 'Graphik-Regular-Web';z-index:1000">
            <div style="padding:10px;
            font-weight: bold;">
                ${this.point.name}
            </div>
            <div>
                <div  style="width :50%;
                display: inline-block;
                padding:10px;">
                    <div style="color: #817f7f;display:inline-block;
                    width:48%;padding: 10px 10px 10px 0;" >Start Date :</div>
                    <div style="  display:inline-block;
                    width:48%;padding: 10px 10px 10px 0;" >${data[index].startDate}</div><br />
                    <div style="color: #817f7f; display:inline-block;
                    width:48%; padding: 10px 10px 10px 0;" >End Date :</div>
                    <div style="display:inline-block;
                    width:48%;padding: 10px 10px 10px 0;" >${data[index].endDate}</div>
                </div>
                <div style="width :48%;
                display: inline-block;
                padding:10px;
                background-color: #f5f5f5;" >
                    <div style="width:50%;
                    display: inline-block;">
                        <div style="display:inline-block;color: #817f7f;
                        width:48%;padding: 10px 10px 10px 0;">Total Cost</div> 
                        <div style="padding-left:10px">
                        ${convertAmount(data[index].totalCost)}
                        </div>
                    </div>
                    <div style=" width:50%;
                    display: inline-block;
                    padding:10px;" >
                        <div style="display:inline-block;color: #817f7f;
                        width:48%;padding: 10px 10px 10px 0;">Total Benefit</div> 
                        <div style="padding-left:10px">
                        ${convertAmount(data[index].totalInitiativeBenefit)}
                        </div>
                    </div>
                </div>
            </div>
         
            <div style="display: inline-flex;
            width:100%;
            padding:10px;" >
                <div style="width:33%;">
                    <div style="display:inline-block;color: #817f7f;
                    width:48%;padding: 10px 10px 10px 0;"">Capabilities</div> 
                    <div style="height:50px;
                    overflow-y: auto;"  >
                   
                    ${loopFormat(data[index].evaluationFactors)}
         
                    </div>
                </div>
                <div style="width:33%;">
                    <div style="display:inline-block;color: #817f7f;
                    width:48%;padding: 10px 10px 10px 0;">Value Drivers</div> 
                    <div style="height:50px;
                    overflow-y: auto;" >
            
         
                    ${loopFormat(data[index].valueDrivers)}
                    </div>
                </div>
                <div style="width:33%;">
                    <div style="display:inline-block;color: #817f7f;
                    width:48%;padding: 10px 10px 10px 0;">KPI Metric</div> 
                    <div style="height:50px;
                    overflow-y: auto;" >
                        
                    ${loopFormat(data[index].kpiMetrics)}
         
         
                    </div>
                </div>
            </div>
         </div>`
                  }

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

Re: Customized tooltip is getting hidden when we have y-axis scrolling

Hi,

Could you reproduce your chart configuration in the online code editor?
I am unable to relate to what you sent, a simplified example will help better understand your case.

I'm waiting for news from you.
Best regards.
Sebastian Hajdus
Highcharts Developer
Mounika Rayankula
Posts: 4
Joined: Mon Mar 29, 2021 9:15 am

Re: Customized tooltip is getting hidden when we have y-axis scrolling

HI sebastian,

Thanks for your quick reply

Please refer jsfiddle for the issue :

https://jsfiddle.net/jon_a_nygaard/t0bjo6dq/


Here I am attaching the image for reference :
Image
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Customized tooltip is getting hidden when we have y-axis scrolling

Hi,

For me when I set the chart.scrollablePlotArea your custom tooltip works weel.
FYI also you can add custom tooltip by tooltip.formatter.

Demo:
https://jsfiddle.net/BlackLabel/wegkpt12/

API References:
https://api.highcharts.com/gantt/chart. ... lePlotArea
https://api.highcharts.com/gantt/tooltip.formatter

Let me know if it helps you.
Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Gantt”