CODEWITHSUNDEEP
javascriptangularjschartsgoogle-visualization
countryroadscat
countryroadscat

Reputation: 1750

Transparent background with multiple stacked google.charts.Bar,

I need to do multiple stacked bar/column chart with transparent background.

So, transparent background can be obtain pretty easily via:

var data = //my data
var options = {
    backgroundColor: {fill: 'transparent'}
} 

var chart = new google.visualization.ColumnChart(document.getElementById('columnChart'));
chart.draw(data, options);

This works perfectly when I use google.visualization API.

What is more I need to do multiple stacked chart like in jsfiddle.

Again this work perfecty BUT we need to use google.charts API there.

When we try to add backgroundColor: {fill: 'transparent'} to given jsfiddle our background wont be 100% transparent - chart area will still be white.

On the other hand we cannot implement a multistacked chart in google.visulatization API as mentioned here.

So my question is:

How to combine those two features? What is more I want to hide right axes and their ticks/lines and rescale it to fit left axis

Upvotes: 2

Views: 1068

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

in addition to --> backgroundColor: {fill: 'transparent'}

you can set the background color of the chart area with... 

    chartArea: {
      backgroundColor: 'transparent'
    }

see following working snippet... 

google.charts.load('current', {
    callback: drawStuff,
    packages:['bar']
});

function drawStuff() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Nescafe Instant');
    data.addColumn('number', 'Folgers Instant');
    data.addColumn('number', 'Nescafe Beans');
    data.addColumn('number', 'Folgers Beans');
    data.addRows([
        ['2001', 321, 621, 816, 319],
        ['2002', 163, 231, 539, 594],
        ['2003', 125, 819, 123, 578],
        ['2004', 197, 536, 613, 298]
    ]);

    // Set chart options
    var options = {
        isStacked: true,
        width: 800,
        height: 600,
        chart: {
            title: 'Year-by-year coffee consumption',
            subtitle: 'This data is not real'
        },
        vAxis: {
            viewWindow: {
                min: 0,
                max: 1000
            }
        },
        series: {
            2: {
                targetAxisIndex: 1
            },
            3: {
                targetAxisIndex: 1
            }
        },
        backgroundColor: {fill: 'transparent'},
        chartArea: {
          backgroundColor: 'transparent'
        }
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div style="background-color: magenta;">
  <div id="chart_div"></div>
</div>

note:

recommend using loader.js to load the library, instead of jsapi

according to the release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.

<script src="https://www.gstatic.com/charts/loader.js"></script>

this will only change the load statement

google.charts.load('current', {packages:['bar']});

you can also include the callback in the load statement, as in the above snippet...

Upvotes: 1

Related Questions