CODEWITHSUNDEEP
javascriptangularjslineamchartsstacked
Faysal Kabir
Faysal Kabir

Reputation: 16

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

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. enter image description here But with line chart the total value goes up. enter image description here 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.

Upvotes: 0

Views: 1334

Answers (1)

xorspark
xorspark

Reputation: 16012

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
    }]

Upvotes: 1

Related Questions