How to make border for container in ZingChart

How to make a border around the chart and title bar over it in ZingChart. I tried with plotarea border but that is around the graph not the complete chart. I want the black border and title but i am only able to make the red border like in this image.

Here is the code

 {
"type":"bar",
"plotarea":{
  "border-color" : "#0ff",
  "border-width" : "2px"
},
"series":[
    {
        "values":[11,26,7,44,11]
    },
    {
        "values":[42,13,21,15,33]
    }
]

}

Solution

Accomplishing this look can be achieved by using border attributes for specific sides of different objects. In this case, setting borders for the right and left of the chart, and the bottom of the title.

Here is an example that shows this approach in action, with the key parts for you to use in your own code.

var myConfig = {
 	type: "bar",
 	borderRight: "6px solid #000",
 	borderLeft: "6px solid #000",
 	borderBottom: "6px solid #000",
 	title: {
 	  text: "My Title",
 	  height: 40,
 	  borderBottom: "6px solid #000" //needs to be added to title or will be hidden underneath
 	},
	series : [
		{
			values : [35,42,67,89,25,34,67,85]
		}
	]
};
 
zingchart.render({ 
	id : 'myChart', 
	data : myConfig, 
	height: 400, 
	width: 600 
});

<html>
	<head>
		<script src= 'https://cdn.zingchart.com/zingchart.min.js'></script>
		<script> zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/';
		ZC.LICENSE = ['569d52cefae586f634c54f86dc99e6a9','ee6b7db5b51705a13dc2339db3edaf6d'];</script>
	</head>
	<body>
		<div id='myChart'></div>
	</body>
</html>

I'm on the ZingChart team, so please let me know if you need additional clarification or if this isn't quite what you were looking for.