Zing scatter chart node at border gets chopped off

At this time of writing, the only way I can think of is to adjust your scale-x and scale-y values manually based off of the values you are inserting into the chart. Perhaps a function to preprocess the data to determine a maximum value before rendering a chart would be best. In the example below, I am creating 2 charts. One with set values but does not compensate for markers cutting off the edge, and another which has a helper function to increase the maximum y value by 10%.

HOWEVER! There is an unreleased attribute that will be on the next release we are scheduling within the next week or two. It exposes an attribute called mask-tolerance which will allow markers to bleed past the plot area. Keep an eye out for that as that is the optimum solution. --I'm on the ZingChart team; let me know if you have any further questions.

var myConfig = {
 	type: "scatter", 
 	plot : {
 	  marker : {
 	    size : 10
 	  }
 	},
	series : [
		{
			values : [35,42,67,89,25,100,67,100]
		}
	],
	plotarea :{
	  padding : "10px"
	},
	scaleY : {
	  values : "0:90:10"
	}
};

zingchart.render({ 
	id : 'myChart', 
	data : myConfig, 
	height: 200, 
	width: 300 
});


function preProcessData(){
  var myValues = [35,42,67,89,25,100,67,100];
  var maxVal = Math.max.apply(null,myValues);
  var maxScale = maxVal + Math.floor(maxVal * 0.10);
  return {
   	type: "scatter", 
   	plot : {
   	  marker : {
   	    size : 10
   	  }
   	},
  	series : [
  		{
  			values : myValues
  		}
  	],
  	plotarea :{
  	  padding : "10px"
  	},
  	scaleY : {
  	  values : "0:"+maxScale+":10"
  	}
  };  
}

zingchart.render({ 
	id : 'myChart2', 
	data : preProcessData(), 
	height: 200, 
	width: 300 
});

<html>
	<head>
		<script src= 'https://cdn.zingchart.com/zingchart.min.js'></script>
	</head>
	<body>
		<div id='myChart'></div>
		<div id="myChart2"></div>
	</body>
</html>

Recommended topics

Hot tags