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>`
}
}