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", 
{
 .
 .
 axisX: {
    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 “black” “red”, “#FFF046″…
crosshair opacity Number 1 0.5, 0.8,…
crosshair thickness Number 1 5,10,20
crosshair lineDashType String dash “dot”, “dash”, “dashedDot”,…
crosshair valueFormatString String Automatically calculated “#,###.##”, “####.00”
crosshair label String “” (Empty String) “Custom Label”, “Crosshair Label”,…
crosshair labelWrap Boolean true true,false
crosshair labelMaxWidth Number Automatically Calculated based on label length 100, 200…
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 labelFontFamily String “arial” “Arial, Trebuchet MS, Tahoma, sans-serif”
crosshair labelFontColor String “white” “blue”,”#4135e9″
crosshair labelFontSize Number 12 18,19,20,22
crosshair labelFontWeight String “normal” “lighter”,”normal”,”bold”,”bolder”
crosshair labelFontStyle String “normal” “normal”,”oblique”,”italic”
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