All geek questions in one place

ZingChart - Different colors for crosshair text

If we specify the contents of crosshairX in the attribute "plotarea", by default the color of all the text will turn black. I want to present this crosshair text in two different colors. For example, suppose my text is “2016: 0.07 M”, then “2016” should look blue and “0.07 M” red. How can we achieve this?

+4
source share
1 answer

Full disclosure, I am a member of the ZingChart team.

I need to know how you display your text in order to have a more specific solution. Do you use plotLabel.text by default or do you have a custom plotLabel.text? If so, what is it installed on?

Not knowing what you defined for the text, I take the liberty of putting together a demo of various combinations of applying colors and text to plotLabel .

There are a couple of things here:

  • headerText defines the color of the text as gray
  • the first span tag in the text inherits the color of the chart with the color%
  • the second span tag in the text defines its text color as black
  • the plotLable.color attribute blushes, making all other text outside the span tags

var myConfig = {
 	type: "line",
 	scaleX:{
 	  values:['Mon','Tue','Wed','Th','Fri','Sat','Sun']
 	},
 	crosshairX:{
 	  plotLabel:{
 	    headerText:'<span style="color:#777">Header Text</span>',
 	    text:'<span style="color:%color">%kv</span>: <span style="color:black">%v</span> Extra Text...',
 	    color:'red'
 	  }
 	},
	series : [
		{
			values : [35,42,67,89,25,34,67]
		},
		{
			values : [35,42,67,89,25,34,67].sort()
		}
	]
};

zingchart.render({ 
	id : 'myChart', 
	data : myConfig, 
	height: 350, 
	width: '100%' 
});
<!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 code
+3
source

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

More articles:


All Articles