Search code examples
zingchart

How to set Zingchart line border?

Is it possible to draw a line with a border in zingchart?

I have a 

"type" : "line",
"values"     : [something],
"line-color": "#somecolor",

but adding "border-color" : "#something" and "border-width" : 3px doesn't do it.

I've tried the documentation, but I haven't found anything related, except for bar series types.

edit: Forgot to say, I'm in a mixed type chart (bars + lines), I can set borders to "bar" type series, but not "line" type.

Solution

  • ZingChart's drawing engine mimics a lot of how SVG is drawn, therefore lines do not have borders inherently. However in true SVG fashion, we have a property called top-state that allows the user to replicate a shape to be placed right on top of the existing shape.

    To emulate a border around the line, we can make the size of the top-state line-width a little thinner than the plot line-width.

    Don't hesitate to reach out if you need any further assistance -- I'm a part of the ZingChart team

    var myConfig = {
 	type: "mixed", 
	series : [
		{
		  type : 'bar',
			values : [35,42,67,89,25,34,67,85]
		},
		{
		  type : 'line',
			values : [35,42,67,89,25,34,67,85],
			lineWidth : "6px",
			topState : {
			  lineWidth : "2px",
			  lineColor : "pink"
			}
		}
	]
};

zingchart.render({ 
	id : 'myChart', 
	data : myConfig, 
	height: 400, 
	width: 600 
});
    <!DOCTYPE html>
<html>
	<head>
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
	</head>
	<body>
		<div id='myChart'></div>
	</body>
</html>