Amcharts Stacked Column Chart with Line Chart put valueaxis below line chart

Question

I've prepared a chart where stacked column chart combined with line chart. Now the total value of stacked chart i.e the valueaxis should be on stacked column. But the total value showing over line chart. Without line chart it is perfect. But with line chart the total value goes up. Here is my code

$scope.chart = AmCharts.makeChart("chartdiv", {
        "type": "serial",
        "theme": "none",
        "legend": {
            "position": "top",
            "useGraphSettings": true,
            "align": "center"
        },
        "dataProvider": $scope.monthly_chart_data,
        "valueAxes": [{
            "stackType": "regular",
            "axisAlpha": 0.3,
            "gridAlpha": 0,
            "totalText": "[[total]]"
        }],
        "graphs": [{
            "balloonText": "<span style='font-size:14px'><b>[[value]]</b></span>",
            "fillAlphas": 0.8,
            "lineAlpha": 0.0,
            "title": "Betrag",
            "type": "column",
            "color": "#000000",
            "valueField": "Rechnung",
            "fillColors": "#003d6a"
        }, {
            "balloonText": "<span style='font-size:14px'><b>[[value]]</b></span>",
            "fillAlphas": 0.8,
            "lineAlpha": 0.0,
            "title": "Bestellung",
            "type": "column",
            "color": "#000000",
            "valueField": "Bestellung",
            "fillColors": "#8673a4"
        }, {
            "id": "graph2",
            "lineThickness": 1.5,
            "fillAlphas": 0,
            "lineAlpha": 1,
            "lineColor": "#e95f30",
            "title": "Budget",
            "valueField": "Budget",
            "dashLengthField": "dashLengthLine",
            "stackable": false
        }],
        "categoryField": "month",
        "categoryAxis": {
            "gridPosition": "start",
            "axisAlpha": 0,
            "gridAlpha": 0,
            "position": "left"
        },
        "numberFormatter" : {
            "precision": -1,
            "decimalSeparator": ",",
            "thousandsSeparator": "."
        }
    });

How do I put total value i.e valueaxis over stacked column but below line chart? Any help would be appreciated. Thanks in advance.

xorspark xorspark · Accepted Answer · 2019-02-05T12:01:42

Your line axis is being added to the same stack; stacked applies to the entire value axis and all graphs associated it, not just specific graphs or types, so the line is also included in the stack and totals. If you don't want the line to be included in the stack and its totals, simply assign it to a different value axis.

    "synchronizeGrid": true, //optional if you want both axes to have the same scale. Doesn't always work, though.
    "valueAxes": [{
        "stackType": "regular",
        "axisAlpha": 0.3,
        "gridAlpha": 0,
        "totalText": "[[total]]"
    },{
        "id": "valueAxis2",  //create second axis for the line graph
        "axisAlpha": 0,
        "position": "right",
        "gridAlpha": 0
    }],
    "graphs": [
     // ...
     {
        "id": "graph2",
        "valueAxis": "valueAxis2", //assign line graph to valueAxis2
        "lineThickness": 1.5,
        "fillAlphas": 0,
        "lineAlpha": 1,
        "lineColor": "#e95f30",
        "title": "Budget",
        "valueField": "Budget",
        "dashLengthField": "dashLengthLine",
        "stackable": false
    }]

Amcharts Stacked Column Chart with Line Chart put valueaxis below line chart

1 Answers