Search code examples
javascripthtmlcsshighchartstooltip

Formatting dataLabels in Highcharts

I am trying to use html tags like <table> and <tr> for the dataLabels, but it seems I'm not able to use these tags and only the basic tags (<b>, <strong>, <i>, <em>, <br/>, <span>). I was able to format the tooltip data with other html tags by setting the 'useHTML' tag to true. Is there a way to do the same for the dataLabels? This is what the two look like, the tooltip is on bottom. enter image description here

Solution

  • You can format dataLabels with useHTML also. I don't know how readable your chart will be with all that extra data showing at all times, but you can put a table in the dataLabels.

    http://jsfiddle.net/crLcxvLr/1

      plotOptions: {
    series: {
      dataLabels: {
        formatter: function() {
          return "<table><tr><td>HEADER LEFT</td><td class='right'>Header Right</td></tr><tr><td>" + this.x + "</td><td class='right'>" + this.y + "</td></tr>";
        },
        enabled: true,
        useHTML: true,
      }
    }
  },