HowTo: Highlight a Datapoint Through Code in WijLineChart

Generally, when we hover the mouse over a datapoint on the wijlinechart, it highlights the datapoint and shows its data value in a tooltip. But, one of our customers had a requirement : He had a Google map on the same page as the line chart and when the mouse hovered over the Google map, he wanted to highlight the corresponding value on the wijmo line chart. That means, we need to highlight the datapoint and show tooltip programmatically. I thought this might help others as well and this blog demonstrates how you can highlight a specific datapoint through code in Wijmo LineChart. To start with, you can take a look at this demo on how to use the wijlinechart . After that, you can a create an object of tooltip using canvas object of wijlinechart as given below :

var lineChart = $("#wijlinechart").data("wijlinechart");  
//create tooltip object  
var tooltip = lineChart.canvas.tooltip(null, {});

Here is the complete code which you can use to highlight the datapoint on a button click:

$("#btnHighlight").click(function () {  

   //get the marker reference  
   var lineMarker = $("#wijlinechart").wijlinechart('getLineMarkers', 0);  

   lineMarker[index].transform("s1");  
   //get the index of the datapoint to be highlighted  
   index = $("#txtIndex").val();  

   if (index < lineMarker.length) {  
      //scale the specific marker  
      lineMarker[index].transform("s2");  

      //get the data to be displayed in tooltip  
      var label = lineChart.options.seriesList[0].label;  
      var x = lineChart.options.seriesList[0].data.x[index];  
      var y = lineChart.options.seriesList[0].data.y[index];  

      //set the properties of tooltip  
      tooltip.setOptions({  
         content: label + '\\n' + "X :" + x + '\\n' + "Y:" + y + '',  
         style: { fill: "#000000", "stroke-width": "2", stroke: "#00a6dd" },  
         animated: "fade", showAnimated: "fade", hideAnimated: "fade",  
         hideDelay: 150, easing: "easeOutExpo",  
         showEasing: "easeOutExpo", hideEasing: "easeOutExpo",  
         compass: "north", offsetX: 0, offsetY: 0  
      });  

      tooltip.showAt({  
         x: lineMarker[index].attrs.cx,  
         y: lineMarker[index].attrs.cy  
      });  
   }  
   else  
      index = 0;  
 });

You may download this sample with the complete implementation.