Home Forums Chart Support I want to show tooltip upon Legend and Axis Label also.

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • #34164

    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.



    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: {
        fontSize: 15,
        itemmouseover: function(e){
          showLegendToolTip(e.x, e.y, e.dataSeries.legendLongText);
        itemmouseout: function(e) {
    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);
    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.css({left: x, top: y})
    function hideLegendToolTip() {

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

    Show Tooltip for Legend

    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");
    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;
        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;

    Check out this JSFiddle for complete working code.

    Show Tooltip for Custom DOM Legend

    Manoj Mohan
    Team CanvasJS


    thanks for your Support Manoj Mohan

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.