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

css internet-explorer-8 cross-browser highcharts

91,084

Solution 1

Try this solution:

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

Solution 2

Can you try this -

backgroundColor: null

See on: jsfiddle

Solution 3

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.

Solution 4

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

Solution 5

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>

View more solutions

91,084

Nikshep

Updated on January 11, 2022

Comments

Nikshep over 2 years
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 ?
Capy over 11 years

Mayuresh's answer it's a good alternative but this works too and looks more clean.
Kato about 11 years

Perfect! If I only had 10 upvotes to give :) This is certainly the correct, elegant, not-a-hack solution.
Geoff almost 11 years

I agree; this should probably be the top answer.
Adrian Bartholomew over 10 years

Is not entirely transparent. The box is clearly seen. nessa.gp's answer worked for me.
Colton McCormack over 10 years

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.
ViniciusPires about 10 years

That's a workaround. Works better with backgroundColor:null.
Rostyslav Diachok almost 10 years

it also fixes whkhtmltopdf problem with black background.
russellhoff over 8 years

Thank you for your help. @ViniciusPires your solutions doesn't work for me (I see black background).
shadab.tughlaq almost 8 years

plotBackgroundImage: null, also might help
neo almost 8 years

backgroundColor:'rgba(255, 255, 255, 0.0)' will give you complete transparency
Stevethemacguy over 6 years

Null no longer works in HighCharts 6. Use backgroundColor: 'transparent' instead. (Tested on all modern browsers and IE11+).
Stevethemacguy over 6 years

Null no longer works in HighCharts 6. Use backgroundColor: 'transparent' instead. (Tested on all modern browsers and IE11+).
Bhesh Gurung over 6 years

@Stevethemacguy Do you have a sample (jsfiddle) to illustrate? Or is there a documentation?
Bhesh Gurung over 6 years

jsfiddle.net/BGurung/5w7xymnb Seems to be working but you are also right that 'transparent' is also working.
guioconnor almost 6 years

And then you will have to do that every time you update the library.
Clijsters over 5 years

While this code snippet may solve the question, including an explanation 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.
onzinsky over 2 years

You rock. Thanks for this. None of the other solutions were working for me