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

There is no trying, since I am not totally sure where to even start. Highcharts legends symbol provide you a — Tran Tram, Jan 12 '18 at 01:59
To all who has downvoted this question, it would be nice if you can just leave a comment on how I can improve this question. Thanks — Tran Tram, Jan 12 '18 at 03:29
check this post https://stackoverflow.com/a/39577205/8632727 — Patata, Jan 12 '18 at 06:16
@TranTram check this http://jsfiddle.net/qwgvL7wj/. Is this you want ?? — Patata, Jan 15 '18 at 09:11
The issue is that "Teach me how to do X" are not considered valid questions on this site. SO is for (loosely speaking) "help me figure out this bug". If you haven't tried and you aren't hitting a bug, then this isn't the right venue for you. If you get help anyway, great. But someone working through a review queue is is going to find this a question that is too broad and doesn't show necessary initial due diligence in making an attempt. That's what I meant to point out above but I admit I was nowhere near adequately direct or explicit. — elc, Jan 16 '18 at 01:28
@Patata having the same problem with the poster, and yours does work in line, but with column and pattern fill extension, that doesn't work. — Tree Nguyen, Jan 17 '18 at 00:51
@TreeNguyen check https://api.highcharts.com/highcharts/series.column.marker which states _Other series types, like column series, don't have markers, but have visual options on the series level instead._ In above fiddle I used marker which are not available for column — Patata, Jan 17 '18 at 04:51

score 5 · Answer 1 · answered Jan 19 '18 at 12:37

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/

score 0 · Answer 2 · answered Nov 08 '18 at 06:05

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>

Highcharts - How to display legend symbol inside the tooltip

2 Answers2