How to format dataLabels and legend issue
I would like to format data labels as currency "$##,###". Also, the chart's legend keeps extending out of it's container. How can I solve this? Thanks for the help!
SIGN IN To post a reply.
5 Replies
Hi Caleb,
Kindly find the response for your queries below.
Query #1: I would like to format data labels as currency "$##,###".
Response: We have analyzed your query. We suspect that your requirement is to format the values displayed in dataLabel to currency format. If so, then it can achieved using the displayTextRendering event. This event will be triggered for each data label and we can customize the text. Find the code snippet below to achieve this requirement.
|
JS:
$("#container").ejChart({
//...
displayTextRendering:"textRender",
});
function textRender(sender){
var pointIndex = sender.data.pointIndex,
xValue = sender.data.series.points[pointIndex].x,
yValue = sender.data.series.points[pointIndex].y;
//Using the ej.format, we can format the number with respect to the requirement.
sender.data.text = xValue + " : " + ej.format(yValue, "c1", "en-US");
}
|
Screenshot:
If this doesn’t meet your requirement, kindly provide us more information on your query. This will be much helpful in providing the solution at earlier.
Query #2: Also, the chart's legend keeps extending out of it's container. How can I solve this?
Response: We would like to let you know that, by default if the legend text goes out legend bounds, then scrollbar will be added automatically. If the css styles are not referred properly, then the scrollbar will not be appeared. We suspect that you might not have added the styles, so you can use the below script to add styles for Syncfusion EJ1 components.
|
<link rel="stylesheet" rel='nofollow' href="http://cdn.syncfusion.com/16.2.0.41/js/web/flat-azure/ej.web.all.min.css" />
|
Screenshot:
Sample for reference can be find from below.
Thanks,
Dharani.
Hi Caleb,
Thanks for the information you have shared.
Query #1: I'm sorry I gave you bad information on the dataLabel. I would actually like the tooltip to have formatted text and I use a template.
Response: Your requirement can be achieved using the toolTipInitialize event. Since you are using the template for tooltip, you need to specify the template in the toolTipInitialize event also which we have highlighted in the below code and here using the ej.format, you can format the values with respect to your requirement.
We have prepared a sample, kindly find the code snippet below to achieve this requirement.
|
JS:
<div id="tooltipTemplate" style="display: none;color: whitesmoke; padding: 5px 5px 5px 5px">
<div id="values">
<div id="xValue">X Value : #point.x#</div>
<div id="yValue">Y Value: #point.y#</div>
</div>
</div>
$("#container").ejChart({
toolTipInitialize: function (args) {
var x = args.data.series.points[args.data.pointIndex].x,
y = args.data.series.points[args.data.pointIndex].y;
args.data.currentText = "<div id='values'><div id='xValue'>X Value : " + x +
"</div><div id='yValue'>Y Value: " + ej.format(y, "c1", "en-US") + "</div></div>";
},
});
|
Screenshot:
Query #2: The scroll bars worked for the chart but when I turn it into an image, the legend is cut off. Is there any way to fix that?
Response: Yes, this scenario can be overcome by specifying the size to the legend. Before exporting the chart, you need to specify the size to the legend and redraw the chart. Once exported, again you need to set the size of legend to its default as depicted and redraw the chart. Find the code snippet below to achieve this scenario.
|
JS:
function Export(anchor) {
//Get instance of chart
var chartObj = $("#container").ejChart("instance");
//Specify the size to chart with respect to your requirement
chartObj.model.legend.size.width = '130';
//Refresh the chart before exporting
chartObj.redraw();
chartCanvas = chartObj.export();
if (window.navigator.msSaveOrOpenBlob)
window.navigator.msSaveOrOpenBlob(chartCanvas.msToBlob(), "Chart.png");
else {
var chartData = chartCanvas.toDataURL();
anchor.download = "Chart.png";
anchor.rel='nofollow' href = chartData;
}
//After exporting specify the width to its default and refresh the chart, so that the chart will have scrollbar for the text which crossed the legend bounds
chartObj.model.legend.size.width = null;
chartObj.redraw();
}
|
Screenshot in browser:
Screenshot after exporting as image:
Sample for reference can be find from below link.
Thanks,
Dharani.
SIGN IN To post a reply.
