Change Morris area chart

Question

I would like to custom my area chart color, what should I do?

This is my code:

$.getJSON("http://10.30.6.69:1200/WebAPI.aspx/?api=RequestPostFiveMins", function (data4) {

    new Morris.Area({
        backgroundColor: '#ccc',
        labelColor: '#060',

        // ID of the element in which to draw the chart.
        element: 'POSTFIVEMINS',
        // Chart data records -- each entry in this array corresponds to a point on
        // the chart.
        data: data4,
        // The name of the data record attribute that contains x-values.
        xkey: 'Time',
        // A list of names of data record attributes that contain y-values.
        ykeys: ['Total', 'Success', 'Error'],
        // Labels for the ykeys -- will be displayed when you hover over the
        // chart.
        labels: ['Total', 'Success', 'Error'],
        parseTime: false,
        hideHover: 'auto',



}).progress(function () {
    $(document.getElementById("POSTFIVEMINSID").style.display = "");
}).done(function () {
    $(document.getElementById("POSTFIVEMINSID").style.display = "none");
});

Answer 1

Try adding the lineColors property which takes an Array containing colors for the series lines/points:

new Morris.Area({
    // ...
    lineColors: ['#0B62A4', '#F79263', '#A7B3BC'],
    // ...
});