Highcharts Legend Custom HTML

Question

I have a highcharts graph and I'm looking to collect some data from the user about each line graphed. I'm trying to have a text input box with an id or a name related to the series name to appear next to each label in the legend. I could then have a button and code to submit the collected data to the server elsewhere.

I've tried setting a labelFormatter function, but that appears to only support plain text.

Is there an easy way to do this with highcharts or am I looking at writing my own function using the highchart event hooks that will go in and add the html I want?

Any help is appreciated. Thanks!

Answer 1

You can set the useHTML option of Highcharts legend to true.

legend: {
    useHTML: true,
    labelFormatter: function () {
        return '<span title="' + this.name + '">' + this.name + '</span>';
    }
}

http://api.highcharts.com/highcharts/legend.useHTML

Answer 2

when you want working html in any type of labels/tooltips you need to set useHTML to true (not in documentation:/). It gives some problembs in posistioning but can render any html.

example

plotOptions : {
   series: {
     dataLabels: {
       useHTML: true
     }
   }
}