JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<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='myChart2'></div>
   	 <div id='myChart'></div>
	</body>
</html>

JavaScript

var myConfig = {
 	type: "mixed", 
 	scaleX:{
 	  guide:{
 	    visible: true, //set to false by default on some chart types
 	    lineColor: "red",
 	    lineWidth: 1
 	  }
 	},
	series : [
		{
			type : "bar",
      values : [35,42,67,79,25,34,67,85]
		},
		{
			values : [40,27,38,68,41,49,50,65]
		}
	]
};
var myConfig2 = {
 	type: "line", 
 	scaleX:{
              "offsetStart" : "30px",
              "offsetEnd" : "30px",
    guide:{
 	    visible: true, //set to false by default on some chart types
 	    lineColor: "red",
 	    lineWidth: 1
 	  }
 	},
	series : [
		{
			values : [55,22,43,19,66,49,35,60]
		}
	]
};
zingchart.render({ 
	id : 'myChart', 
	data : myConfig, 
	height: 200, 
	width: "100%"
});zingchart.render({ 
	id : 'myChart2', 
	data : myConfig2, 
	height: 200, 
	width: "100%"
});