Search code examples
chartszingchart

ZingChart - Different colors for text in crosshair

If we specify the content of crosshairX in the 'plotarea' attribute, by default the color of whole text becomes black. I want to represent this text of crosshair in two different colors. For example, suppose my text is "2016 : 0.07 M", then '2016' should appear in blue color and '0.07 M' in red. How can we achieve this?

Solution

  • Full Disclosure, I'm a member of the ZingChart team.

    I would need to know how you are displaying your text to have a more specific solution. Are you using the default plotLabel.text or do you have a user defined plotLabel.text? If so what is it set to?

    Without knowing what you have defined for text I have taking the liberty to put together a demo of the different combinations of applying colors and text to a plotLabel.

    There are a couple things happening here:

    • headerText is defining its text color as grey
    • the first span tag in text is inheriting the plot color with %color
    • the second span tag in text is defining its text color as black
    • the plotLable.color attribute is red making all other text outside of the span tags red

    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>