Zk Charts custom tooltip with connector

asked 2016-02-23 08:27:55 +0800

rahulraibit
1

updated 2016-02-23 09:50:08 +0800

Hi, i want to customize the chart tooltip. this tooltip should visible at a certain height which will be connected with the connector or a line.

i am trying to create a svg line and setting the tootlip x and y coordinate but the svg line is not coming correctly for different type of charts.

Can anyone help me in this asap...thx in advance

here is my code

 <script defer="true">
      jq.each(jq(".z-charts"), function(i, chartElem) {
      var chart = Highcharts.charts[i];
      var dom = jq(chartElem).find(".highcharts-tooltip")[0];
      var $s = function(elem) {
          return jq(document.createElementNS('svglink',      elem));
        }

       if (chart){
           if(chart.tooltip) {
      chart.tooltip.options.positioner = function(labelWidth, labelHeight, point) {                         
     if(dom){
                    var x=(point.plotX);
                     if(jq(dom).find(".tooltip-connector").length === 0){
dom.appendChild($s('path').attr({d: "M  " + x + "  45  L  " + x  + "  110", "class": "tooltip-connector","stroke-width":"2", "stroke":"black"})[0]);
                                  }
  else{
     jq(".tooltip-connector").attr("d", "M  " + x + "  45  L  " + x  + "  110");
     }
   }
      return {
             x: point.plotX, y: (point.plotY - 45)};     
      }

    }

    }

  });
  </script>