Search code examples
javascriptchartszingchart

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?


Solution

  • 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>