Angular-google-area-chart chart background color overlapping

Question

I am creating an area chart using angular-google-chart. I am trying to show different colors for the particular area. But you can see the area of red and green lines(areas) are overlapped by the blue area. Is there something wrong with configuration?

"data": {
    "cols": [{
        "id": "date",
        "label": "Date",
        "type": "string",
        "p": {}
    }, {
        "id": 'sd0',
        "label": 'sdo',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd1',
        "label": 'sd1',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd2',
        "label": 'sd2',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd3',
        "label": 'sd3',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd1Neg',
        "label": 'sd1Neg',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd2Neg',
        "label": 'sd2Neg',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd3Neg',
        "label": 'sd3Neg',
        "type": "number",
        "p": {}
    }],
    "rows": $scope.dataMap
},
"options": {
    "isStacked": "false",
    'displayAnnotations': true,
    'legend': {
        'position': 'bottom'
    },

    "fill": 20,
    "displayExactValues": true,
    "vAxis": {
        "title": 'Weight'
    },
    "hAxis": {
        "title": "Age",
        "slantedText": false,
        /* Enable slantedText for horizontal axis */
        // "slantedTextAngle": 90
    },
    'chartArea': {
        'width': '82%',
        'height': '70%',
        'top': '15%',
        'left': '15%',
        'right': '3%',
        'bottom': '30%'
    },
    'pointSize': 2,
    'annotation': {
        'alwaysOutside': true,
        'textStyle': {
            'fontSize': 17,
            'auraColor': '#eee',
            'annotationsWidth': 25,
            'color': '#eee'
        }
    },
    'series': {
        0: { areaOpacity: 1},
        1: { areaOpacity: 1},
        2: { areaOpacity: 1},
        3: { areaOpacity: 1},
        4: { areaOpacity: 1},
        5: { areaOpacity: 1},
        6: { areaOpacity: 1}
    },
    'colors': ['#FF0000','#FF0000','#00FF00','#0000FF','#00FF00','#0000FF','#FFFFFF']
},

In $scope.dataMap I am pushing data from arrays:

for(var i=0;i<$scope.data.sd0.length;i++){
    $scope.dataMap.push({
        c: [{
            v: $scope.gData.sd0[i].month
        }, {
            v: $scope.gData.sd0[i].value
        }, {
            v: $scope.gData.sd1[i].value
        }, {
            v: $scope.gData.sd2[i].value
        }, {
            v: $scope.gData.sd3[i].value
        }, {
            v: $scope.gData.sd1Neg[i].value
        }, {
            v: $scope.gData.sd2Neg[i].value
        }, {
            v: $scope.gData.sd3Neg[i].value
        }]
    });
}

$scope.gData is object I am getting from post request and contains value arrays. There are 7 value arrays, JSON structure is same for all

"sd0": [
    {
        "month": "0",
        "value": "2.1"
    },
    {
        "month": "1",
        "value": "2.9"
    },
    {
        "month": "2",
        "value": "3.8"
    },
    {
        "month": "3",
        "value": "4.4"
    }
    .....
]

user_18331543 · Answer

**HTML**

   


**js**

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

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2013',  1000,      400],
      ['2014',  1170,      460],
      ['2015',  660,       1120],
      ['2016',  1030,      540]
    ]);

    var options = {
      title: 'Company Performance',
      hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
      vAxis: {minValue: 0}
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

Angular-google-area-chart chart background color overlapping

1 Answers