82

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 ?

8 Answers 8

133

Can you try this -

backgroundColor: null

See on: jsfiddle

8
  • 7
    Mayuresh's answer it's a good alternative but this works too and looks more clean.
    – Capy
    Oct 1, 2012 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, 2013 at 0:14
  • 4
    I agree; this should probably be the top answer.
    – Geoff
    Jul 2, 2013 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. Jan 8, 2014 at 22:59
  • it also fixes whkhtmltopdf problem with black background. May 23, 2014 at 11:47
132

Try this solution:

histogram = new Highcharts.Chart({
                chart: { renderTo: 'histogram', defaultSeriesType: 'bar',
                         backgroundColor:'rgba(255, 255, 255, 0.0)'
                }
6
  • Is not entirely transparent. The box is clearly seen. nessa.gp's answer worked for me. Oct 10, 2013 at 12:30
  • 26
    That's a workaround. Works better with backgroundColor:null. Apr 12, 2014 at 3:10
  • Thank you for your help. @ViniciusPires your solutions doesn't work for me (I see black background).
    – joninx
    Sep 9, 2015 at 11:45
  • 3
    backgroundColor:'rgba(255, 255, 255, 0.0)' will give you complete transparency
    – neo
    Jul 14, 2016 at 16:37
  • 2
    Null no longer works in HighCharts 6. Use backgroundColor: 'transparent' instead. (Tested on all modern browsers and IE11+). Oct 26, 2017 at 21:01
9

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.

2

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

2

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>

1
  • 1
    You rock. Thanks for this. None of the other solutions were working for me
    – onzinsky
    Jan 18, 2022 at 23:23
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

1
  • 1
    And then you will have to do that every time you update the library.
    – guioconnor
    Jun 11, 2018 at 17:12
-2

May be you have to write

filter:0 !important;

in your css.

-2
backgroundColor:'rgba(255, 255, 255, 0.0)',
1
  • 1
    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.
    – Clijsters
    Sep 10, 2018 at 12:03

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

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

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