0

Currently I am using the Highcharts API here and here to style the export button for Highcharts. I am trying to get an ellipsis positioned inside of the export button to create a button that meets some styling guidelines, but due to the limitations of the API options, the closest I can get is placing it next to the symbol.

Current used options:

exportButton: {
    text: '...',
    symbolFill: 'rgb(250, 168, 0)',
    symbolStroke: 'transparent',
    symbol: 'circle'
},

this is the current result: JsFiddle

Ultimately, I want the end result to be something like this:

ellipsis inside circle

Does anyone know a way I can acheive this without using an image?

1
  • Might want to checkout styled mode for Highcharts. Unfortunately, that means including a separate set of highcharts.js files to render your charts. Jan 10, 2017 at 16:17

1 Answer 1

1

With the use of Renderer, you can render a proper shape and add it to the exporting button group.

Highcharts.Chart.prototype.callbacks.push(function(chart) {
var exportElements = chart.exportSVGElements,
  exportButton = exportElements[0],
  cx = exportButton.width / 2,
  cy = exportButton.height / 2,
  r = cx,
  renderer = chart.renderer;

    exportElements.push(renderer.circle({
      cx: cx,
      cy: cy,
      r: r,
      fill: '#ADD8E6'
    }).add(exportButton));

    [0.65, 1, 1.35].forEach(scx => {
      exportElements.push(renderer.circle({
        cx: scx * cx,
        cy: cy,
        r: r * 0.12,
        fill: 'white'
      }).add(exportButton));
    });
});

Then specify exporting width, height and you can set symbol to null

    exporting: {
  buttons: {
    contextButton: {
      symbol: null,
      height: 50,
      width: 50,
    }
  }
},

example: http://jsfiddle.net/0wd08pjw/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.