Formatting Legend Items using useHTML

[Bob]

Hi, I have a chart whose legend I want to modify with formatting. I want to align the text to the right.

My chart has been created and everything, and this is the code I use to supplement my functionality. I also want the ability to click on a legend item and do something once someone clicks it. This functionality works perfectly right now. When I use the code below, the functionality also works exactly the way I want it but clicks on individual legend item are no longer registered. (it doesnt hide by default when it used to) This is the code I added

legend.setOption("useHTML", "true");
LegendLabelsFormatter labelsFormatter = new LegendLabelsFormatter() {

        @Override
        public String format(LegendLabelsData legendLabelsData) {
            return legendLabelsData.getSeriesName() + " <span class=\"red\">"+"info"+"</span>";

        }
    };

    legend.setLabelsFormatter(labelsFormatter);

Contents of MyCSS.css

.highcharts-legend-item span {
width:200px!important;
text-align:right!important;
}

.red{
color: red;
}

Any advice how to remedy this would be greatly appreciated!

[Shawn Quinn]

Looks like this may be a known issue in the core Highcharts library. See this discussion:

https://github.com/highslide-software/highcharts.com/issues/1249

[Bob]

I have figured out my problem. The corecharts version is 2.3.3. and this bug was fixed in 2.3.5. so i just changed the higcharts.js file to the more updated version. The latest GWT wrapper was tested using 2.3.3 but I am hoping its safe to juse use 2.3.5. So far no problems! Fingers crossed