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

This goal can be achieve by using pointFormat or pointFormatter. There are couple of example using pointFormatter, So i will use pointFormat attribute to achievethis goal.With this approch you dont need to enable useHTML property.

  tooltip: {
    pointFormat:
      '<svg width="10" height="10" style="color:{series.color}">●</svg> 
       <b>{series.name}: {point.percentage:.0f}%</b>
       <br/>',
    shared: true
  },

Highcharts.chart("container", {
  chart: {
    type: "column"
  },
  title: {
    text: null
  },
  credits: {
    enabled: false
  },
  xAxis: {
    categories: ["Apple", "Orange", "Grapes", "Mango", "Pinapple", "Papaya"],
    title: "Fruits"
  },
  yAxis: {
    min: 0,
    floor: 0,
    ceiling: 100,
    title: {
      text: null
    },
    labels: {
      align: "right",
      x: 0,
      y: -2
    }
  },
  tooltip: {
    pointFormat:
      '<svg width="10" height="10" style="color:{series.color}">●</svg> <b>{series.name}: {point.percentage:.0f}%</b><br/>',
    shared: true
  },
  plotOptions: {
    series: {
      stacking: "normal"
    }
  },
  series: [
    {
      name: "Small",
      data: [5, 3, 4, 7, 2, 3],
      color: "#A2CD32"
    },
    {
      name: "Large",
      data: [2, 2, 3, 2, 1, 2],
      color: "#FFF500"
    },
    {
      name: "Medium",
      data: [3, 4, 4, 2, 5, 2],
      color: "#FF220"
    }
  ]
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

Answer 2

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/