Show Amcharts Pie Chart inside a tooltip

Question

I have a text showing on my page. When the mouse hovers over it, I want an Amcharts pie chart to appear inside the tooltip.

I tried using Bootstrap tooltips and appended a div with the id "chartdiv" inside the tooltip title parameter, then initializing the chart.

The tooltip appears but it is empty.

Is there any way to get the pie chart to appear inside the tooltip?

Any help is appreciated!

Answer 1

To make pie charts appear in tooltips, you have to do a few things:

1) Make sure html is enabled in your tooltip options.

2) Make sure your tooltips are appropriately sized. You might need to tweak bootstrap's .tooltip-inner selector to account for your chart like so:

.tooltip-inner {
    max-width: 100% !important;
}

3) Since bootstrap is effectively creating and removing the elements in the title tag when you mouse over/out, you need to make sure you're creating and cleaning up the chart at the appropriate events, such as shown.bs.tooltip and hidden.bs.tooltip. Assuming your tooltip is in an element with an id of #chart-tooltip:

$("#chart-tooltip").tooltip({ html: true });
var chart;
$("#chart-tooltip").on("shown.bs.tooltip", function() {
  //create the chart when the tooltip is visible
  chart = AmCharts.makeChart("chartdiv", {
    // chart options here
  });
});

$("#chart-tooltip").on("hidden.bs.tooltip", function() {
  //clean up the chart instance when the tooltip is hidden
  chart.clear();
});

Demo below:

$("#chart-tooltip").tooltip({ html: true });
var chart;
$("#chart-tooltip").on("shown.bs.tooltip", function() {
  //create the chart when the tooltip is visible
  chart = AmCharts.makeChart("chartdiv", {
    type: "pie",
    theme: "dark",
    dataProvider: [
      {
        country: "Lithuania",
        litres: 501.9
      },
      {
        country: "Czech Republic",
        litres: 301.9
      },
      {
        country: "Ireland",
        litres: 201.1
      },
      {
        country: "Germany",
        litres: 165.8
      },
      {
        country: "Australia",
        litres: 139.9
      },
      {
        country: "Austria",
        litres: 128.3
      },
      {
        country: "UK",
        litres: 99
      },
      {
        country: "Belgium",
        litres: 60
      },
      {
        country: "The Netherlands",
        litres: 50
      }
    ],
    valueField: "litres",
    titleField: "country",
    pullOutRadius: 0,
    startDuration: 0,
    balloon: {
      fixedPosition: true
    }
  });
});

$("#chart-tooltip").on("hidden.bs.tooltip", function() {
  //clean up the chart instance when the tooltip is hidden
  chart.clear();
});

#chartdiv {
  width: 500px;
  height: 300px;
}

.chart-tooltip {
  text-decoration: underline double #ff0000;
}

.tooltip-inner {
    max-width: 100% !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/pie.js"></script>
<script src="//www.amcharts.com/lib/3/themes/dark.js"></script>

<p>This is some test text. <br><span class="chart-tooltip" id="chart-tooltip" title="<p>Pie chart:</p> <div id='chartdiv'></div>" data-toggle="tooltip" data-placement="right">Hover here for a chart</span></p>