Colors in percentage stacked AreaChart looks awful

vmakovsky commented 8 years ago

When using AreaChart with isStacked: 'percent' or isStacked: 'relative' option the colors looks awful (see e.g. the fourth graph - 100% STACKED example in section Stacking Areas https://developers.google.com/chart/interactive/docs/gallery/areachart#stacking-areas ): bad

I think it used to show the colors correctly (not 100% sure): good

Code:

<html><head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", '1.1', {packages:['corechart']});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['X', 'Andrew', 'Peter'], [100, 100, 100], [200, 35, 65], [400, 64, 144]
    ]);

    for(var i = 0; i < data.getNumberOfRows(); i++){
        var valA = data.getValue(i, 1);
        var valB = data.getValue(i, 2);
        data.setValue(i, 1, valA);
        data.setValue(i, 2, valB);
    };

    var ac = new google.visualization.AreaChart(document.getElementById('chart'));
    ac.draw(data, {
        isStacked: 'percent',
        vAxis: {format: "0%",},
        width: 600,
        height: 400,
    });
  }
</script>
</head>
<body>
    <span id='chart'></span>
</body>
</html>

dlaliberte commented 8 years ago

Thanks. I have a fix for this bug that I will try to push to the frozen v45 soon.

nitishmittal17 commented 8 years ago

Facing the same issue.. Is this fixed.. ??

vmakovsky commented 8 years ago

There is a workaround. It works fine if you use:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> ... google.charts.load('current', {packages: ['corechart']}); google.charts.setOnLoadCallback(drawChart);

instead of (which is perhaps an old way of how to call google charts - but it has this bug in the latest version) <script type="text/javascript" src="https://www.google.com/jsapi"></script> ... google.load("visualization", '1.1', {packages:['corechart']}); google.setOnLoadCallback(drawChart);

If you use 'upcoming' instead of 'current' it doesn't work either. I assume it's not in the latest version.

google / google-visualization-issues

Colors in percentage stacked AreaChart looks awful #2267