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

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

• javascript
• jquery
• html
• charts
• highcharts

• 1 So what have you tried? How did it fail? – elc Commented Jan 12, 2018 at 1:18
• 2 check this post stackoverflow./a/39577205/8632727 – Patata Commented Jan 12, 2018 at 6:16
• 2 @TranTram check this jsfiddle/qwgvL7wj. Is this you want ?? – Patata Commented Jan 15, 2018 at 9:11
• 3 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 Commented Jan 16, 2018 at 1:28
• 3 @TreeNguyen check api.highcharts./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 Commented Jan 17, 2018 at 4:51

2 Answers 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/kkulig/adr9otbg/

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./highcharts.js"></script>

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