Highcharts - How to display legend symbol inside the tooltip

Question

I have a problem with Highcharts that I would like to ask.

I have a Highcharts, and I want to copy the preview symbol from legends to the tooltip.

I am doing this in 2 different case:

• Lines: I have 2 different series (1 with solid, 1 with dash). This is the default settings of highcharts so I guess it would be easier a bit.
• Bars: For this, I am using Pattern Fill extension from Highcharts. This is officially release from Highcharts too but not too much information regarding what to customise.

Extra information:

• Using highchart 4.1.9
• Highcharts legends symbol provide you a <svg> and I don't actually know how to copy a <svg>

Thanks in advance

Answer 1

Here's how to display the the SVG from the legend item in the tooltip (works for columns and pattern fill):

  tooltip: {
    useHTML: true,
    pointFormatter: function() {
      var point = this,
        series = point.series,
        legendSymbol = "<svg width='20' height='20'>" + series.legendSymbol.element.outerHTML + "</svg>";

      return legendSymbol + series.name + ": <b>" + point.y + "</b><br/>";
    }
  }

useHTML must be enabled to make it work.

Live demo: https://jsfiddle.net/kkulig/adr9otbg/