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

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
     }
   }
}

Answer 2

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 3

Take a look this example. http://jsfiddle.net/LCFKA/ You have to set your series' data inside the loadedData and then you just have to set in the function getItemsDescription what do you want to show.

Answer 4

So I eventually came up with a "solution" to this. I'm not sure if it's the best, but I wanted to leave a note here in case anyone else needs it.

I ended up extending the highstock source code and copied their showCheckbox code to be a showTextbox code. It's not a very generic solution, but it solved my particular problem. I also had to modify the onmousedown handler to allow passing focus through to the text box when it's clicked on.

The boxes are rendered in html with exact position so they appear next to the legend items. The legend itself is part of the SVG of the graph which makes it rather difficult to get other html in there.

If you'd like all the code - leave a comment and I'll post it.