crosshair: Object

Crosshairs are interactive vertical or horizontal lines with label that shows the x & y axis values at the current mouse co-ordinates or the nearest data points.

You can customize the appearance of crosshair line using thickness, lineColor, lineDashType etc and labels using labelColor, labelBackgroundColor, labelFontSize, labelFontStyle, etc.

Crosshairs can be displayed using Axis X or Axis Y’s crosshair object. This allows you to have crosshair on both x & y axis.

Here is an example:

var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 axisY:{
       	crosshair : {
		enabled: true,
		color: "orange",
		labelFontColor: "#F8F8F8"
	}
 },
 .
 .
});
chart.render();

Simple crosshair Attributes

Applies To Attribute Type Default Options/Examples
crosshair enabled Boolean false false, true
crosshair snapToDataPoint Boolean false true, false
crosshair color String “grey” “red”, “#FFF046″…
crosshair opacity Number 1 0.5, 0.8,…/td>
crosshair thickness Number 2 1, 3,0,…
crosshair lineDashType String “dash” “dot”, “dash”, “dashedDot”,…
crosshair valueFormatString String Automatically calculated “#,###.##”, “####.00”
crosshair label String “” (Empty String) “Custom Label”, “Axis Y Label”,…
crosshair labelWrap Boolean true true,false
crosshair labelMaxWidth Number Automatically Calculated based on label length 100, 50…
crosshair labelTextAlign String “left” “left”, “center”, “right”
crosshair labelBackgroundColor String “grey” “black”, “#E8E8E8”,…
crosshair labelBorderColor String “grey” “black”, “#E8E8E8”,…
crosshair labelBorderThickness Number 0 1,2,…
crosshair labelFontColor String “white” “red”,”#4135e9″
crosshair labelFontFamily String “Calibri, Optima, Candara, Verdana, Geneva, sans-serif” “Arial, Trebuchet MS, Tahoma, sans-serif”
crosshair labelFontSize Number 16 14,20,…
crosshair labelFontStyle String “normal” “normal”,”oblique”,”italic”
crosshair labelFontWeight String “normal” “lighter”,”normal”,”bold”,”bolder”
crosshair labelFormatter Function – –
crosshair updated Function – –
crosshair hidden Function – –
Try Editing The Code

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question