CODEWITHSUNDEEP
javascriptchartsamcharts
NawazSE
NawazSE

Reputation: 613

Amcharts setting column bars to a specific color is not working

I am using amcharts. I need to set the column/bar color to a specific color.

I tried with many attempts like:

But nothing is working for me.

My JSFiddle

Not sure, what I am missing. Any suggestion would be highly appreciated!

Upvotes: 1

Views: 635

Answers (1)

gaetanoM
gaetanoM

Reputation: 42044

You can add a color attribute to each chartData2 element. Now, in graphs options you can add:

colorField": "color"

That means to take the color attribute from chartData2 while drawing each bar.

var chartData2 = [{
    "month": "Apr 2018",
    "peekValue": "60.5",
    "averageValue": "33.40",
    "color": "#ff0000",
    "color1": "#008000"
}, {
    "month": "May 2018",
    "peekValue": "66",
    "averageValue": "34.05",
    "color": "#ff0000",
    "color1": "#008000"
}, {
    "month": "Jun 2018",
    "peekValue": "74.5",
    "averageValue": "34.45",
    "color": "#ff0000",
    "color1": "#008000"
}, {
    "month": "Jul 2018",
    "peekValue": "76",
    "averageValue": "33.77",
    "color": "#ff0000",
    "color1": "#008000"
}, {
    "month": "Aug 2018",
    "peekValue": "71.33",
    "averageValue": "34.60",
    "color": "#ff0000",
    "color1": "#008000"
}, {
    "month": "Sep 2018",
    "peekValue": "60.17",
    "averageValue": "33.99",
    "color": "#ff0000",
    "color1": "#008000"
}
];



AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "dataProvider": chartData2,
    "valueAxes": [{
        "position": "left",
        "unit": "%",
        "title": "Memory Usage Trends"
    }],
    "graphs": [{
        "id": "g1",
        "fillAlphas": 0.9,
        "valueField": "peekValue",
        "lineAlpha": 0.8,
        "type": "column",
        "colorField": "color",
        "balloonText": "<div style='margin:5px; font-size:12px;'>Peek Usage: <b>[[value]]%</b></div>"
    },
        {
            "id": "g2",
            "fillAlphas": 0.9,
            "lineAlpha": 0.8,
            "type": "column",
            "valueField": "averageValue",
            "balloonText": "<div style='margin:5px; font-size:12px;'>Average Usage: <b>[[value]]%</b></div>",
            "colorField": "color1",
        },

    ],

    "chartCursor": {
        "categoryBalloonDateFormat": "JJ:NN, DD MMMM",
        "cursorPosition": "mouse"
    },
    "categoryField": "month",
    "categoryAxis": {
    },
    "export": {
        "enabled": true,
        "menu": []
    }
});
#chartdiv {
    width: 100%;
    height: 500px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>


<div id="chartdiv"></div>

Upvotes: 1

Related Questions