Search code examples
model-view-controllermorris.js

limited color in Morris chart

I want to draw Morris chart in my MVC View but my data are dynamic and more than 30 item i have, but morris chart just colors chart by 12 colors and repeat remaining slice and for my legend which i had create just for 12 colors display color like image which o attached. how can i use unlimited color for my chart?!

enter image description here

var ChartBlockShopFirstMelt = new Morris.Donut({
        element: 'MychartViewArea',
        parseTime: false,
        dataLabelsPosition: 'outside',
        resize: true,
        //donutType: 'pie',
        dataLabels: true,
        hidehover: 'auto',
        //colors: [
        //    '#882222'
        //    ],

            data: [
              @foreach(var item in ListAreaAndSheare )
                {
                    @:{ label: "@item.Lable", value: "@Math.Round(item.VALUE,2)" },
                }
    ],

    });

    ChartBlockShopFirstMelt.options.data.forEach(function (label, i) {
        var lgn = $('<span style=margin-left:10px;background-color:' + ChartBlockShopFirstMelt.options.colors[i] + '>    </span><br>').text(label['label']).prepend();
        $("#legendFirstMelt").append(lgn);
    });
Solution

  • You need to define an array of colors in the option colors.

    Then for your legend, you can use modulo operator (%) to display the right color from that array.

    In my example below: color_morris is the array of color i is the index parsed

    color_morris[i%color_morris.length]