0

I was looking at this example to apply font awesome to custom buttons in highcharts. http://jsfiddle.net/zfngxoow/6/ 

    (function (H) {
    H.wrap(H.Renderer.prototype, 'label', function (proceed, str, x, y, shape, anchorX, anchorY, useHTML) {
        if(/class="fa/.test(str))   useHTML = true;
        // Run original proceed method
        return proceed.apply(this, [].slice.call(arguments, 1));
    });
}(Highcharts));

This example works great, but when trying to apply the same to my Angular 2 highcharts, font awesome does not work.

plnkr: http://plnkr.co/edit/G26wiubT2M5ydrmL9GJZ?p=preview

Same applied on plnkr but it does not work:

    (function (H) {
    H.wrap(H.Renderer.prototype, 'label', function (proceed, str, x, y, shape, anchorX, anchorY, useHTML) {
        if(/class="fa/.test(str))   useHTML = true;
        // Run original proceed method
        return proceed.apply(this, [].slice.call(arguments, 1));
    });
}(Highcharts));
Mohy Eldeen
  • 1,261
  • 2
  • 13
  • 24

2 Answers2

1

Due to the nature of the way these buttons are rendered (within drawn svg), specifically they are written into <text><ispan>...</ispan></text>, you won't be able to directly write in an <i class="fa ..."></i> tag. In order to render these icons they will need to be placed into the highcharts symbol library, or the image will need to be directly referenced.

exportButton: {
  text: 'Download',
  symbol: 'symbolString or imageReference', // <---This will be the symbol to the left of the text.
  menuItems: Highcharts.getOptions().exporting.buttons.contextButton.menuItems.splice(2)
},

Check out this fiddle to see examples on custom symbol usage (specifically using an image reference), which seems to be the easiest way to integrate a printer symbol.

A more advanced method is to load the entire font awesome svg library as custom symbols into highcharts. This is far more intricate, but may be useful later if you're attempting to use font-awesome icons often in your highcharts project. Check out this fiddle for a general idea on how to load and use the icon library within the generated svg and outside standard <span></span> DOM.

Z. Bagley
  • 8,942
  • 1
  • 40
  • 52
  • Is your answer applicable to Highcharts in general? or the Angular 2 library? If its Highcharts in general, I provided a working example for my use case – Mohy Eldeen Jul 11 '17 at 19:08
  • It worked using the plunkr you set up for an image symbol, so it's applicable to both highcharts in general *and* the angular library. – Z. Bagley Jul 11 '17 at 19:17
  • Your example for the symbol worked. Thanks a lot. The icons are displaying a little bold, I will look into the code to see why this is happening, but please let me know if you have suggestions. http://plnkr.co/edit/JRfSumud8UjsCju4CNEH?p=preview – Mohy Eldeen Jul 11 '17 at 19:34
  • Very close, I used symbolStrokeWidth: 0. I will mark this as an answer, and will keep updating the plnkr in this comment – Mohy Eldeen Jul 11 '17 at 19:54
  • I edited your plunk and updated the options: http://plnkr.co/edit/s5HTCgmENPaQpwK6d18r?p=preview The other part is the stroke fill (note: I only did it for the download button as an example). – Z. Bagley Jul 11 '17 at 19:56
  • Thanks a lot. This looks great now! – Mohy Eldeen Jul 11 '17 at 20:01
0

The demo you've provided uses HighCharts 5, while your code uses 4.2.1. You need to update to the latest version of HighCharts, or at least use 4.2.4 which includes a bugfix for "display was not deferred on data labels with useHTML."

ebraley
  • 206
  • 1
  • 9