score:0

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>

score:5

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/


Related Query

More Query from same tag