How to add the Tooltip for legend items of PivotChart?
This KB showcases the example to add Tooltip for legend items.
Solution:
You can add a tooltip to legend items of the PivotChart and show the series details related to the legend. To add a tooltip to the legend items, follow these steps:
Step 1:
Get the legend details in the legendItemMouseMove function. Hence, the `mousehover` and `mouseleave` events should be triggered in the same function. Refer to the following code snippets.
JS
function legendItemMouseMove(args) {
$("#chartTooltip").remove();
if (!ej.isNullOrUndefined(args.model.event.target)) {
$("#PivotChart1").append("<div id='chartTooltip' class='customHeaderTooltip' role='tooltip'></div>");
for (var i = 0; i < args.data.series.dataSource.length; i++) {
$("#chartTooltip").append("<p class='headerTooltipText'> xValues " + i + "- " + args.data.series.dataSource[i].xValues + " | yValues " + i + "- " + args.data.series.dataSource[i].yValues + "</p>\n");
}
var targetPosition = args.model.event.target.getBoundingClientRect();
var containerEndPos = $("#PivotChart1").parent().position().left + $("#PivotChart1").parent().width();
var tooltipEndPos = targetPosition.left + $("#chartTooltip").width();
var leftPosition = (targetPosition.left > 0 ? targetPosition.left : 0) + ((containerEndPos - tooltipEndPos) < 0 ? ((containerEndPos - tooltipEndPos) - 20) : 5);
var topPosition = ($($("#PivotChart1").data("ejPivotChart").element).height() - targetPosition.top) < 100 ? (targetPosition.top - $("#chartTooltip").outerHeight() - 2) : targetPosition.top + 40;
$("#chartTooltip").css({ left: leftPosition, top: topPosition + 5 });
}
$("[id*=PivotChart1Container_svg_Legend]").mouseleave(function (args) {
$("#chartTooltip").remove();
});
}
Step 2:
Trigger the Load event with the below codes.
MVC
@Html.EJ().Pivot().PivotChart("PivotChart1").ClientSideEvents(clientSideEvents => clientSideEvents.Load("onLoad"))
ASP
<ej:PivotChart ID="PivotChart1" runat="server" ClientIDMode="Static"> <ClientSideEvents Load="onLoad" /> </ej:PivotChart>
JS
$("#PivotChart1").ejPivotChart({
//…
load:"onLoad"
});
Step 3:
Use the following CSS for tooltip display.
<style>
.customHeaderTooltip {
position: fixed !important;
z-index: 500;
display: none;
border-width: 10px;
height: auto;
display: inline !important;
background: #ecf0f1;
border: 2px solid #bdc3c7;
}
.headerTooltipText {
font-size: 12px;
text-align: left;
height: auto;
font-weight: normal;
margin: 5px 0 10px 0;
opacity: 1;
padding: 5px;
}
</style>
