[JS]
$("#container").ejChart(
{
series:
[
{
tooltip: {
visible: true,
format: "#series.name# :#point.x# (ej.format(#point.y#,p0))"
}
}
]
});
|
[JS]
$("#container").ejChart(
{
//. . .
//Load event of Chart
load: "onload",
});
//Load event handler
function onload(args) {
var series = args.model.series;
for (var i = 0; i < series.length; i++) {
var total = 0;
//Calculate total value
for (var j = 0; j < series[i].points.length; j++)
total += series[i].points[j].y;
//Set percentage value to an option in point or create a new option in point
//text option of point is used because it will reflect in both data label and tooltip
for (j = 0; j < series[i].points.length; j++)
series[i].points[j].text = (series[i].points[j].y / total * 100).toFixed(2) + '%';
}
} |
[CSS]
<style class="cssStyles">
label {
margin-bottom: -25px !important;
text-align: center !important;
}
.tooltipDivcontainer {
background-color: #E94649;
color: white;
width: 130px;
}
#Tooltip > div:first-child {
float: left;
}
#Tooltip #value {
float: right;
height: 50px;
width: 68px;
}
#Tooltip #value > div {
margin: 5px 5px 5px 5px;
}
#Tooltip #efpercentage {
font-size: 20px;
font-family: segoe ui;
padding-left: 2px;
}
#Tooltip #ef {
font-size: 12px;
font-family: segoe ui;
}
#eficon {
background-image: url("../content/images/chart/eficon.png");
height: 60px;
width: 60px;
background-repeat: no-repeat;
}
</style> |