Hi Jon,
Thanks for the update.
Query #1: I would like the tooltip to show #point.x#: #point.y# (percentage value)
We can achieve your requirement using the load event of chart. We cannot use options like #point.y# directly, because percentage value of the points are not stored after calculations in Chart.
We have created a sample in the following link to display percentage values in tooltip
Please refer the following code snippet to achieve this
|
[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) + '%';
}
} |
Query #2: Also, on the help page I am not sure how the series color has carried into the template of the tooltip, could you explain please - the one shown in this demo
Chart will automatically apply the fill color of series to the background color of tooltip template. Additionally, the template can be further customized or styled with CSS styles. In the above demo, tooltip template appears with customized styles.
Following JS Playground sample displays tooltip template without any customized styles
Styles applied to the tooltip template in online demo is shown in the following table
|
[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> |
Query #3: Finally, none of the online demos have any narrative explaining what they demonstrate. Most are obvious but a few are a little unclear as to what they are trying to show, or they show several things. Could some narrative be added to them please?
We have considered this requirement as a new feature for the samples in our JavaScript sample browser. Thanks for helping us define this feature. We have added it to our feature request list, and it will be available in any of our upcoming releases.
Please let us know if you have any concern.
Regards,
Anand
