CODEWITHSUNDEEP
htmlhighchartstooltip
Plazi
Plazi

Reputation: 75

Additional Chart in Tooltip possible?

Has anyone ever tried to insert another chart with completely different data to the tooltip which is popping up when hovering over data points? I have checked the possibilty to pass html to the formatter, but not sure how dynamically this is working.

I have a bubble chart and it would be perfect to add small line charts to the tooltips of the bubbles.

Upvotes: 3

Views: 71

Answers (1)

Kacper Madej
Kacper Madej

Reputation: 7886

Yes, it is possible.

If you set tooltip's useHTML to true and create a chart in it, then you will get a chart in a tooltip.

Example: http://jsfiddle.net/n9z7r5uj/

$(function() {
  $('#container').highcharts({
    series: [{
      type: 'bubble',
      data: [[1,2,3],[4,1,6],[2,3,9]]
    }],
    tooltip: {
      useHTML: true,
      pointFormatter: function() {
        var data = [this.x, this.y, this.z];
        setTimeout(function() {
          $('#chart').highcharts({
            title: {
                text: ''
            },
            legend: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            series: [{
                animation: false,
              data: data
            }],
            yAxis: {
                title: ''
            },
            xAxis: {
                categories: ['x','y','z']
            }
          });
        }, 0);
        return '<div id="chart" style="width: 100px; height: 150px;"></div>';
      }
    }
  });
});

Upvotes: 3

Related Questions