Search code examples
heightwidthzingchart

Percentages in height and width of ZingChart do not work accordingly

Whenever I am setting height and width of ZingChart in percentage, so that it's compatible with all screen sizes, it has no effect. Example: If I set 1% height and 1% width, nothing as such happens. I am changing height and width as:

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

You can view the complete code here: http://jsfiddle.net/xbh2ap18/

Solution

  • ZingChart's height and width inherits from the parent container that you are attaching to. The actual chart is a child of myChart, so you will need to apply css to your container.

    zingchart.render({
  id  : 'myChart',
  data : {
    type:"line",
    series :[
      { values : [1,2,3,4] } 
    ]
  },
  height: "100%",
  width: "100%"
  
});
    html,body,#myChart{
  height: 100%;
  width: 100%;
}
    <!DOCTYPE html>
<html>
	<head>
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>

	</head>
	<body>
		<div id='myChart'></div>
	</body>
</html>