All geek questions in one place

Horizontal chart (preferably animated) react.js

I need to create a fairly simple horizontal diagram of the horizontal in my responder application, but I really can’t do this.

Things I've tried so far (vertical stripes work well):

1) http://fraserxu.me/react-chartist/ , the chart itself has horizontal stripes, but I did not find a way to make it work with the reactive module

2) https://github.com/reactjs/react-chartjs does not support horizontal stripes, although there is a PR for it, but also not sure how to do it work

3) https://github.com/laem/react-horizontal-bar-chart is no longer supported

I need to have something like this so that not all bars start with axes enter image description here So does anyone know any existing component for such things? I am also looking for an opportunity to add animation at boot time.

Or any other exit options.

thank

+4
source share
1 answer

full disclosure I am a member of the ZingChart team.

ZingChart supports horizontal histogram with offsetValues . I have compiled a response example for you. The following standard version of vanillaJS is also listed below.

respond demo to 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>
Run codeHide result
+4
source

Source: https://habr.com/ru/post/1657832/

More articles:


All Articles