0

Zk Charts custom tooltip with connector

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

rahulraibit gravatar image 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>
delete flag offensive retag edit
Be the first one to answer this question!
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

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

Seen: 9 times

Last updated: Feb 23 '16

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More