All geek questions in one place

JS Chart library that allows partial shading of the y axis

I was looking for a line chart library that allows you to shade one or more sections of the y axis to display an acceptable range for a graphical value. Something similar to this

I used Google Charts in a previous project and looked at the documentation for various libraries found through Google (chart.js, c3.js, nvd3.js ...), and none of them seem to support it. So I wonder if anyone has any recommendations.

+4
source share
1 answer

The Zingchart library can handle what you are trying to achieve with tags and markers. You can set the marker of an area or line around a specific range of values ​​and set the style of that marker. Labels (for your labels A, B, C) are placed on the x / y coordinate scale and can be changed accordingly.

I am on the ZingChart team and will be more than happy to help with any additional questions.

var myConfig = {
 	type: "line", 
 	labels : [
 	  {
 	    x : "15%",
 	    y : "15%",
 	    fontSize : 18,
 	    text : "ZONE"
 	  },
 	  {
 	    x : "15%",
 	    y : "25%",
 	    fontSize : 18,
 	    text : "A"
 	  },
      {
 	    x : "15%",
 	    y : "34%",
 	    fontSize : 18,
 	    text : "B"
 	  },
 	  {
 	    x : "15%",
 	    y : "42%",
 	    fontSize : 18,
 	    text : "C"
 	  },
 	  {
 	    x : "15%",
 	    y : "50%",
 	    fontSize : 18,
 	    text : "C"
 	  },
      {
 	    x : "15%",
 	    y : "59%",
 	    fontSize : 18,
 	    text : "B"
 	  },
      {
 	    x : "15%",
 	    y : "68%",
 	    fontSize : 18,
 	    text : "A"
 	  },
 	],
 	scaleY : {
 	  values : "-100:100:10",
 	  markers : [
 	    {
 	      type : 'line',
 	      range : [75],
 	      lineWidth : 2,
 	      lineStyle : "dotted",
 	      lineColor : "#ff2424"
 	    },
 	    {
 	      type : 'area',
 	      range : [50,75],
 	      alpha : 0.6,
 	      backgroundColor : "#ff7171"
 	    },
 	    {
 	      type : 'area',
 	      range : [25,50],
 	      alpha : 0.6,
 	      backgroundColor : "#fdff71"
 	    },
 	    {
 	      type : 'area',
 	      range : [0,25],
 	      alpha : 0.6,
 	      backgroundColor : "#98ff71"
 	    },
 	    {
 	      type : 'line',
 	      range : [0],
 	      lineWidth : 2,
 	      lineStyle : "dotted",
 	      lineColor : "#006dff"
 	    },
 	    {
 	      type : 'area',
 	      range : [0,-25],
 	      alpha : 0.6,
 	      backgroundColor : "#98ff71"
 	    },
 	    {
 	      type : 'area',
 	      range : [-25,-50],
 	      alpha : 0.6,
 	      backgroundColor : "#fdff71"
 	    },
 	    {
 	      type : 'area',
 	      range : [-50,-75],
 	      alpha : 0.6,
 	      backgroundColor : "#ff7171"
 	    },
 	    {
 	      type : 'line',
 	      range : [-75],
 	      lineWidth : 2,
 	      lineStyle : "dotted",
 	      lineColor : "#ff2424"
 	    }
 	  ]
 	},
 	
	series : [
		{
			values : [2,4,4,25,36,14,23,23,24,25,16,8],
		}
	]
};
 
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>
Run codeHide result
+6
source

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

More articles:


All Articles