Highcharts - 如何在工具提示中显示图例符号

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/

Answer 2

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>