CODEWITHSUNDEEP
javascript
SK2017
SK2017

Reputation: 773

Javascript bar in bar chart with dual axis

Can anyone recommend a good source to create a graph like the following -

enter image description here

This chart is actually from Excel, but I would like to use this on a web project using javascript..

Hopefully someone could advise on a source?

Upvotes: 2

Views: 100

Answers (1)

Jailbot
Jailbot

Reputation: 2608

This is pretty easy to accomplish in ZingChart. Here's a demo I put together based on your image. Scroll down and run the snippet to see the live demo.

Disclaimer* I'm on the ZingChart team. Comment if you have questions! 

var myConfig = {
  theme:"none",
 	type: "bar", 
 	scaleY:{
 	  values: "0:120:20"
 	},
 	plot:{
 	  shadow:false,
 	  barsOverlap:"100%"
 	},
 	scaleY2:{
		  values:"0:700:100",
		  guide:{
		    visible:false
		  }
	},
	scaleX:{
    guide:{
      visible:false
    }
  },
	series : [
		{
			values : [89,108,46,31,8,8,5,1],
		  barWidth:"80%",
		  backgroundColor:"#C0504D",
		  valueBox:{
		    color:"black"
		  },
			hoverState:{
		    visible:false
		  }
		},
		{
		  values: [410,115,108,115,615,105,250,90],
		  barWidth:"20%",
		  scales:"scale-x,scale-y-2",
		  backgroundColor:"#9BBB59",
		  hoverState:{
		    visible:false
		  }
		},
	]
};

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

Upvotes: 4

Related Questions