Highchart.js: use bootstrap glyphicons instead of symbols on contextbutton

Question

How can i use bootstrap glyphicons instead of "regular" symbols in the contextbuttons of Highcharts. Going to exporting > buttons > contextButton. I have added some glyphicon in the className propery, but the symbol shows up instead. Is there any way to override this?

Here is an example JSON object for Highcharts:

{
"chart": {
    "type": "column",
    "renderTo": "periodChart"
},
"title": {
    "text": "Verkoop per periode"
},
"xAxis": {
    "categories": ["2015", "2016", "2017"]
},
"yAxis": {
    "title": {
        "text": "Aantal verkochte producten"
    }
},
"exporting": {
    "buttons": {
        "contextButton": {
            "align": "right",
            "symbol": "menu",
            "height": 22,
            "width": 24,
            "y": 0,
            "x": 0,
            "className": "glyphicon glyphicon-print",
            "enabled": true
        }
    }
},
"series": [{
    "borderColor": "#555",
    "data": [{
        "name": "2015",
        "y": 6121.0
    }, {
        "name": "2016",
        "y": 6172.0
    }, {
        "name": "2017",
        "y": 4943.0
    }],
    "name": "Aantallen  per jaar (P/s)"
}]
}

I have added the following packages to my html, along with bootstrap and jquery:

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

Edit: when i leave the symbol property empty ("") then nothing shows up. Not using the property at all will result in the default "menu" symbol.

Kamil Kulig · Accepted Answer · 2017-11-03T14:46:08.780

EDIT

The post before the edit contained only the information how to add a regular image as a background to the context button which wasn't the actual answer for this question.

Here I used glyphicon as a charcter in the text of te button: http://jsfiddle.net/kkulig/LoLtm8bn/

I haven't found a way to completely disable the symbol in the context button. The workaround for this is to hide it but the space reserved for it still remains there.

I ended up using the approach from Full text button example in this API record: https://api.highcharts.com/highcharts/exporting.buttons.contextButton.text (contextButton disabled, exportButton used instead).

Live demo: http://jsfiddle.net/kkulig/np80zf58/

END OF EDIT

Context button is an SVG element so you need to use defspattern for this:

JS:

events: {
  load: function() {

    var chart = this,
      renderer = chart.renderer;
    var pattern = renderer.createElement('pattern').add(renderer.defs).attr({
      width: 1,
      height: 1,
      id: "image1",
      patternContentUnits: 'userSpaceOnUse'
    });

    renderer.image('https://www.highcharts.com/samples/graphics/sun.png', 0, 0, 24, 24).add(pattern);

  }
}

CSS:

// hide the default symbol
.highcharts-button-symbol {
  display: none
}

// use a new one
.highcharts-button-box {
  fill: url(#image1)
}

Live working example: http://jsfiddle.net/kkulig/2cpvuydd/

SO related question: Fill SVG path element with a background-image

Highcharts docs reference: https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns

Highcharts API reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer

Is the example supposed to display a Sun insead of the menu image? Also this still doesn't answer my question, I want to use glyphicons insead of svg. — Bob Meijwaard, Oct 31 '17 at 12:13
You're right, my bad. I edited my answer and fixed the original fiddle (the one with the sun icon). — Kamil Kulig, Nov 03 '17 at 14:32
Sorry for responding late. The edit is exactly what i was looking for. Thank you. — Bob Meijwaard, Nov 23 '17 at 07:25

Highchart.js: use bootstrap glyphicons instead of symbols on contextbutton

1 Answers1