avneesh.kumar
Posts: 1
Joined: Wed Oct 03, 2018 7:17 am

Exported bar chart in jpeg or png color coming incorrect

Hi Team,

Issue is related to exported image color of bar graph.

I have changed the default colors of bars in bar graph by using css, colors are reflecting correctly on screen.
But when I am exporting the same chart, colors on exported image are the default colors not the colors that I have applied by css.

Below is the sample code of css:

Code: Select all

.highcharts-point.highcharts-color-0,
.highcharts-legend-item.highcharts-color-0 .highcharts-point,
.highcharts-tooltip .highcharts-color-0 {
            fill: @chartColor1;
}
.highcharts-point.highcharts-color-1,
.highcharts-legend-item.highcharts-color-1 .highcharts-point,
.highcharts-tooltip .highcharts-color-1 {
            fill: @chartColor2;
 }
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Exported bar chart in jpeg or png color coming incorrect

Hi, avneesh.kumar!

Instead of styling your markers in CSS, you can do this in your Highcharts options:

Code: Select all

Highcharts.chart('container', {

  series: [{
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
    marker: {
    	fillColor: 'red'
    }
  }, {
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
  }, {
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
  }],

});
Now your colors should be exported as expected.

jsFiddle: https://jsfiddle.net/BlackLabel/fuqgsb0n/

API Reference: https://api.highcharts.com/highcharts/s ... .fillColor

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
eh1160
Posts: 8
Joined: Wed Oct 03, 2018 5:17 pm

Re: Exported bar chart in jpeg or png color coming incorrect

We can't use the highcharts options because our colors are defined in LESS variables.

Is there a bug in the "styled mode" option that came in Highcharts 5 (https://www.highcharts.com/docs/chart-d ... yle-by-css)? Why doesn't the export honor the colors that we applied?
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Exported bar chart in jpeg or png color coming incorrect

eh1160,

To use "styled mode" you need to import right modules (like in HTML jsFiddle demo below). Then you can color markers in CSS and export server should honor colors you applied. Let me know if everything is working fine for you now.

working jsFiddle: https://jsfiddle.net/BlackLabel/kzf6Leg3/

Kind regards,
Rafał
Rafal Sebestjanski,
Highcharts Team Lead

Return to “Highcharts Usage”