CODEWITHSUNDEEP
javascriptchartszingchart
Spiff
Spiff

Reputation: 4104

How to format numbers on tooltips with ZingChart

I would like to format the number that's displayed on a tooltip like this:

var num = 0.1234567890;
num.toFixed(4);
"0.1235"

I checked the documentation but it mostly deals with dates and big numbers

Is there a way to do this?

Upvotes: 0

Views: 590

Answers (1)

nardecky
nardecky

Reputation: 2631

ZingChart has a decimals attribute that can format numbers on a global scale across the plot. What this means is if you apply the decimals attribute within plot the valueBox will inherit this property and tooltip will as well.

 plot: {
  decimals: 4,
  valueBox: {

  }
}...

If you do this just within the tooltip object you will only get the truncated value applied to the tooltip.

Note: the underscore in front of a JSON attribute is like an inline comment.

plot docs here

var myConfig = {
 	type: 'bar', 
 	plot: {
 	  _decimals: 4,
 	  valueBox: {}
 	},
 	tooltip: {
 	  decimals: 4
 	},
	series: [
		{
			values: [35,42,67,89,25,34,67,85]
		}
	]
};

zingchart.render({ 
	id: 'myChart', 
	data: myConfig, 
	height: '100%', 
	width: '100%' 
});
html, body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}
#myChart {
	height:100%;
	width:100%;
	min-height:150px;
}
.zc-ref {
	display:none;
}
<!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>
	<!--Inject End-->
	</head>
	<body>
		<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
	</body>
</html>

Upvotes: 1

Related Questions