CODEWITHSUNDEEP
javascriptreactjschartsbar-chart
Olenka
Olenka

Reputation: 269

Horizontal Bar Chart (preferably animated) react.js

I need to create pretty simple horizontal bar chart in my react application, but really can't get it done.

Things I've tried so far (vertical bars are working good though):

1) http://fraserxu.me/react-chartist/, chartist itself has horizontal bars, but I didn't find a way to make it work with react module

2) https://github.com/reactjs/react-chartjs doesn't support horizontal bars, though there is some PR for it, but also not sure how to make it work

3) https://github.com/laem/react-horizontal-bar-chart isn't supported anymore

I need to have something like this, so that not all bars start from the axes enter image description here So does somebody know any existing component for such things? I'm also looking for opportunity to add some animation on load there.

Or any other ways out.

Thanks

Upvotes: 4

Views: 3394

Answers (1)

nardecky
nardecky

Reputation: 2631

full disclosure I'm a member of the ZingChart team.

ZingChart supports horizontal bar charts with offsetValues. I have put together a react example for you. The following standard vanillaJS version is below as well.

react demo on codepen

var myConfig = {
 	type: 'hbar', 
 	plot: {
 	  stacked: true,
      animation: {
        sequence: 3,
        effect: 4,
        method: 1,
        speed: 500
      }
 	},
 	legend: {
 	  borderWidth: 0
 	},
    plotarea: {
      margin: 'dynamic'
    },
 	scaleX: {
 	  labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu']
 	},
 	scaleY: {
 	  minValue: 0,
 	  maxValue: 16,
 	  step: 4.5,
 	  decimals: 1
 	},
	series: [
		{
			values: [5.0,3.0,5.5,2.0,2.5],
			offsetValues: [1.0,3.0,0,2.0,2.5],
			backgroundColor: '#FF6600',
			valueBox: {
			  placement: 'bottom',
			  rules: [
			    {
			      rule: '%i == 2',
			      visible: false
			    }  
			  ]
			},
            text: 'Jim'
		},
		{
			values: [5.0,8.0,9.0,4.0,3.5],
			offsetValues: [1.0,3.0,0,2.0,2.5],
			backgroundColor: '#DC143C',
			valueBox: {},
            text: 'Joe'
		}
	]
};

zingchart.render({ 
	id: 'myChart', 
	data: myConfig, 
	height: '100%', 
	width: '100%' 
});
html, body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}
#myChart {
	height:100%;
	width:100%;
	min-height:150px;
}
<!DOCTYPE html>
<html>
	<head>
	<!--Assets will be injected here on compile. Use the assets button above-->
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
		<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
</script>
	<!--Inject End-->
	</head>
	<body>
		<div id="myChart"></div>
	</body>
</html>

Upvotes: 6

Related Questions