Displaying values in lakhs, crores instead of millions.
function formatIndianSuffix(num) {
var x = parseInt(num).toString();
var len = x.length;
var formattedNum = "";
if (len <= 3) {
formattedNum = '₹' + Math.floor(x);
} else if (len > 3 && len < 6) {
formattedNum = '₹' + (roundOff(x / 1000)).toString() + ' K'
} else if (len >= 6 && len < 8) {
formattedNum = '₹' + (roundOff(x / 100000)).toString() + ' L'
} else if (len >= 8) {
formattedNum = '₹' + (roundOff(x / 10000000)).toString() + ' Cr'
}
return formattedNum;
}
I am using this function to format numbers, but how to use this in chart?
Full disclosure, I'm a member of the ZingChart team.
We do support functions for building your scale labels. Here is a working example of a similar idea.
var gFactor = 1.000;
var gFactorMultiplier = 1000;
var myConfig = {
type: "bar",
scaleY:{
"factor": gFactor,
"format":"formatMyLabels()",
label:{
text:"Size"
}
},
plotarea:{
margin: "dynamic"
},
series : [
{
values : [899,1024,1142,2267,3389,4425,5534,6667,7785]
}
]
};
window.formatMyLabels = function(v) {
var localFactor = gFactor * gFactorMultiplier;
switch(localFactor) {
case 1000:
if (v < 1000) {
return v;
} else if (v >= 1000 && v < 1000000) {
return v/1000 + 'K'
} else if (v >= 1000000) {
return v/1000000 + 'M'
}
break;
case 1024:
if (v < 1024) {
return v + 'bps';
} else if (v >= 1024) {
return v/1024 + 'kbps';
}
break;
}
}
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: '100%'
});
<!DOCTYPE html>
<html>
<head>
<!--Assets will be injected here on compile. Use the assets button above-->
<script src= 'https://cdn.zingchart.com/zingchart.min.js'></script>
<script> ZC.MODULESDIR = 'https://cdn.zingchart.com/modules/';</script>
<!--Inject End-->
</head>
<body>
<div id='myChart'></div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With