I want to show tooltip upon Legend and Axis Label also.

• April 28, 2021 at 7:48 pm #34164
  
  keval.panchal

  I want to show tooltip upon Legend and Axis Label also. Because in my chart Legend Name and Axis Label Name is Very Big. its almost 500 to 100 Character than if you give a support of it than its Use Full for me.
  https://jsfiddle.net/kevalpanchal/p6bv9x4n/24/

  April 29, 2021 at 7:25 pm #34175
  
  Manoj Mohan

  @keval-panchal,

  Sorry, it is not possible to show tooltip for axis label as of now. However you can show tooltip for legend with the help of itemmouseover and itemmouseout event of legends as shown in this code snippet.

  
  .
  .
  .
  legend: {
      cursor:"pointer",
      fontSize: 15,
      itemmouseover: function(e){
        showLegendToolTip(e.x, e.y, e.dataSeries.legendLongText);
      },
      itemmouseout: function(e) {
        hideLegendToolTip();
      }
  }
  .
  .
  .
  for(var i=0; i<chart.options.data.length; i++) {
    chart.options.data[i].legendLongText = chart.options.data[i].legendText;
    chart.options.data[i].legendText = chart.options.data[i].legendLongText.slice(0, 10);
  }
  
  chart.render();
  jQuery("#chartContainer").append("<div class='custom-legend-tooltip'></div>");
  var customToolTipLegend = jQuery(".custom-legend-tooltip");
  
  jQuery(".custom-legend-tooltip").on("mouseout", hideLegendToolTip);
  
  function showLegendToolTip(x, y, text) {
    customToolTipLegend.text(text);
    customToolTipLegend.css({left: x, top: y})
    customToolTipLegend.removeClass("hide");
  }
  
  function hideLegendToolTip() {
    customToolTipLegend.addClass("hide");
  }
  

  Please take a look at this JSFiddle for complete working code on the same.

  

  Also, you can show tooltip for legend by creating custom legends (DOM) and add title attribute to it. Please check out the code snippet below.

  //Add custom-legends as list and attach click event to that
  var legendListId = document.getElementById("legendList");
  customLegends(chart,legendListId);
  chart.render();
  
  function customLegends(chart, legendListId){
    for(var i=0; i < chart.options.data.length; i++){	
      var li = document.createElement("li");
      li.appendChild(document.createTextNode(chart.options.data[i].legendText.slice(0, 10)));
      li.title = chart.options.data[i].legendText;
      legendListId.appendChild(li); 
      chart.options.data[i].showInLegend = false;
      li.style.color = chart.options.data[i].color ? chart.options.data[i].color : chart.get("selectedColorSet")[i];
      $('li').each(function (i) {
        $(this).attr('id', (i));
      });
    }
  
    //Add click event to Custom-Legends being clicked
    $('li').click(function (event) {    		
      var index = $(this).index();
      var x = document.getElementById(index);   
      if (typeof (chart.options.data[index].visible) === "undefined" || chart.options.data[index].visible) {
        chart.options.data[index].visible = false;
      } else {
        chart.options.data[index].visible = true;
      }
      chart.render();
    });  
  }

  Check out this JSFiddle for complete working code.

  

  —-
  Manoj Mohan
  Team CanvasJS

  May 5, 2021 at 10:38 am #34234
  
  keval.panchal

  thanks for your Support Manoj Mohan