highchartsstyles

Exporting Highcharts with title background or border not working

I want to export a highchart chart with a styled title. I cannot get any background-color or border properties on the title to work in the exported file.

Here is an example chart with a title with both background-color and border: https://jsfiddle.net/rolfboom/u5471ypa/20/

title: {
  useHTML: true,
  style: {
    fontWeight: 'bold',
    padding: '10px',
    color: '#00FF00',
    backgroundColor: '#000000',
    border: '2px solid #FF0000',
  }
},

In all exported files, both these properties are not applied.

Chart rendered in browser Exported png
Chart rendered in browser Exported png

Does anyone know if this can be done and how? I have found some old posts describing this code to work, so maybe this changed with some Highcharts update? I have not found any recent posts about this though.

Solution

  • By default, exported chart is converted to SVG and stripped out of any HTML tags in the process. To override this behaviour, you can enable the allowHTML property inside of exporting options.

    exporting: {
    allowHTML: true
}

    Demo: https://jsfiddle.net/BlackLabel/sduza2q6/

    API: https://api.highcharts.com/highcharts/exporting.allowHTML