Highcharts chart option backgroundColor:'transparent' showing black on IE 8

Question

Highcharts chart option backgroundColor:'transparent' showing black on IE 8

histogram = new Highcharts.Chart({
            chart: { renderTo: 'histogram', defaultSeriesType: 'bar',
                     backgroundColor:'transparent'
            }

This works fine on I.E 9 and others but fails on I.E 8 and Safari anyone has any idea why ?

Bhesh Gurung · Answer 1 · 2014-08-20T21:21:13.643

132

Can you try this -

backgroundColor: null

See on: jsfiddle

edited Aug 20 '14 at 21:21

answered Oct 12 '11 at 18:31

Bhesh Gurung

50,430
22
93
142

7

Mayuresh's answer it's a good alternative but this works too and looks more clean. – Capy Oct 01 '12 at 14:34
4

Perfect! If I only had 10 upvotes to give :) This is certainly the correct, elegant, not-a-hack solution. – Kato Feb 19 '13 at 00:14
4

I agree; this should probably be the top answer. – Geoff Jul 02 '13 at 18:03
Your fiddle is broken now that Highcharts has moved the .js file you linked to. As mentioned elsewhere null will not always work. nessa.gp's answer gives the best case values for each browser, as discovered by Highcharts themselves. – Colton McCormack Jan 08 '14 at 22:59
it also fixes whkhtmltopdf problem with black background. – Rostyslav Diachok May 23 '14 at 11:47
Null no longer works in HighCharts 6. Use backgroundColor: 'transparent' instead. (Tested on all modern browsers and IE11+). – Stevethemacguy Oct 26 '17 at 21:00
@Stevethemacguy Do you have a sample (jsfiddle) to illustrate? Or is there a documentation? – Bhesh Gurung Oct 26 '17 at 21:39
http://jsfiddle.net/BGurung/5w7xymnb/ Seems to be working but you are also right that `'transparent'` is also working. – Bhesh Gurung Oct 26 '17 at 21:46

Mayuresh · Accepted Answer · 2017-07-14T08:54:44.837

131

Try this solution:

histogram = new Highcharts.Chart({
                chart: { renderTo: 'histogram', defaultSeriesType: 'bar',
                         backgroundColor:'rgba(255, 255, 255, 0.0)'
                }

edited Jul 14 '17 at 08:54

answered Oct 13 '11 at 09:15

Mayuresh

1,613
1
11
18

Is not entirely transparent. The box is clearly seen. nessa.gp's answer worked for me. – Adrian Bartholomew Oct 10 '13 at 12:30
26

That's a workaround. Works better with `backgroundColor:null`. – ViniciusPires Apr 12 '14 at 03:10
Thank you for your help. @ViniciusPires your solutions doesn't work for me (I see black background). – joninx Sep 09 '15 at 11:45
plotBackgroundImage: null, also might help – shadab.tughlaq Jul 06 '16 at 07:43
3

backgroundColor:'rgba(255, 255, 255, 0.0)' will give you complete transparency – neo Jul 14 '16 at 16:37
2

Null no longer works in HighCharts 6. Use backgroundColor: 'transparent' instead. (Tested on all modern browsers and IE11+). – Stevethemacguy Oct 26 '17 at 21:01

score 9 · Answer 3 · answered Jun 10 '13 at 15:16

I found this in Highcharts sources:

Empirical lowest possible opacities for TRACKER_FILL

IE6: 0.002

IE7: 0.002

IE8: 0.002

IE9: 0.00000000001 (unlimited)

IE10: 0.0001 (exporting only)

FF: 0.00000000001 (unlimited)

Chrome: 0.000001

Safari: 0.000001

Opera: 0.00000000001 (unlimited)

TRACKER_FILL = 'rgba(192,192,192,' + (hasSVG ? 0.0001 : 0.002) + ')'

So you can set the chart background color to 'rgba(255,255,255,0.002)' and it runs in the most important browsers.

score 2 · Answer 4 · answered Apr 04 '18 at 14:29

2

backgroundColor: 'transparent' also working if you need type safety.

answered Apr 04 '18 at 14:29

Attila Csányi

95
1
3

score 2 · Answer 5 · edited Jan 10 '22 at 10:30

You should use this :

.highcharts-background {
   fill: transparent;
}

Documentation

Full example:

Highcharts.chart('container', {
    chart: {
        type: 'line',
        styledMode: true
    },
    title: {
        text: 'Chart border and background by CSS'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    legend: {
        layout: 'vertical',
        floating: true,
        align: 'left',
        x: 100,
        verticalAlign: 'top',
        y: 70
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

@import "https://code.highcharts.com/css/highcharts.css";

.highcharts-background {
    fill: #efefef;
    stroke: #a4edba;
    stroke-width: 2px;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px"></div>

You rock. Thanks for this. None of the other solutions were working for me — onzinsky, Jan 18 '22 at 23:23

score 0 · Answer 6 · answered Mar 27 '13 at 19:10

0

If you can access the highcharts.js file go to the backgroundColor line (around 479) and change line like backgroundColor:"rgba(255, 255, 255, 0)". It will change all backgrounds of the charts to transparent

answered Mar 27 '13 at 19:10

GrooveNow

44
3

1

And then you will have to do that every time you update the library. – guioconnor Jun 11 '18 at 17:12

score -2 · Answer 7 · answered Sep 10 '18 at 09:29

-2

backgroundColor:'rgba(255, 255, 255, 0.0)',

answered Sep 10 '18 at 09:29

Pankaj Upadhyay

2,114
21
22

1

While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Clijsters Sep 10 '18 at 12:03

score -2 · Answer 8 · answered Oct 12 '11 at 07:45

-2

May be you have to write

filter:0 !important;

in your css.

answered Oct 12 '11 at 07:45

sandeep

91,313
23
137
155

Highcharts chart option backgroundColor:'transparent' showing black on IE 8

8 Answers8

Linked