Search code examples
javascriptjqueryhighcharts

Set custom legend item symbol (or icon) in HIghcharts

I'm trying to change the default highcharts legend symbol to my own custom one. I wish to have a font-awesome icon next to the legend label. for that, Iv'e thought about labelformatter:

labelFormatter: function () {
                    var on  = '<g><text x="0" y="0" style="color:'+this.color+';font-family:FontAwesome">&#xf14a;</text></g> ' + this.name;
                    var off   = '<g><text x="0" y="0" style="color:'+this.color+';font-family:FontAwesome">&#xf0c8;</text></g> ' + this.name;

                    return  this.iconState ? on : off;
                }

that actually let me add the icon as I wanted, but now my probelm is the following: when clicking on the legend items, the icons remain in the original color and do not become gray like the labels. Iv'e thought about re-rendering the legend when a click event is fired (using legendItemClicked), but I havnn't found anything that works out.

Does anyone know how can I manage re-rendering the legend?

OR

How Its even possible to set the symbol to my own?

Thanks!

Solution

  • You can define your custom symbol by adding this information to Highcharts symbol arrays, like in the example: 

     Highcharts.SVGRenderer.prototype.symbols.cross = function (x, y, w, h) {
    return ['M', x, y, 'L', x + w, y, 'z'];
};
if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.cross = Highcharts.SVGRenderer.prototype.symbols.cross;
}

    http://jsfiddle.net/nhx59/2/

    or use a image http://www.highcharts.com/demo/spline-symbols