How to change label color in Donut Morris Chart (customized label colors)

Question

I want to change Label Color in Morris Donut chart:

For BusStop: Label Color should be Red
For Fence: Label Color should be Blue
For Route: Label Color Should be Yellow or anything...

Code Pen Example

I tried by doing:

data: [
    {
        label: 'BusStop',
        value:5,
        labelColor:"#EC407A",
    },
    {
        label: 'Fence',
        value: 6,
        labelColor:"#00897B",
    },
    {
        label: 'Route',
        value: 2,
        labelColor:"#C0CA33",
    }
],
labelColor:"#9CC4E4", //this is Constant for all label but I need customized labelColors

It's ok, if it is done by using jQuery or HTML or CSS. I tried to do in many ways without success.

Here I have attached screenshot and as well as Pen Code:

I am still a Fresher, and appreciate if this is done.

Answer 1

I tried to use only the formatter function but the labelColor is not updated.

So I used a modified morris adding a labelColor property for each data.

You can then define your data like this, using the labelColor property:

data: [
    { label: 'BusStop', value: 5, labelColor: 'yellow' },
    { label: 'Fence', value: 6, labelColor: 'blue' }, 
    { label: 'Route', value: 2, labelColor: 'red' }
]

You can use the latest Morris v0.5.1 and extend it to use some extra functionalities.

Please try the following snippet that extends Morris (I commented the with // ADDED for the lines or portion of code I added/changed from the original Morris):

(function () {
    var $, MyMorris;

    MyMorris = window.MyMorris = {};
    $ = jQuery;

    MyMorris = Object.create(Morris);

    MyMorris.Donut.prototype.select = function (idx) {
        var row, s, segment, _i, _len, _ref, _fill_color; // ADDED _fill_color
        _ref = this.segments;
        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
            s = _ref[_i];
            s.deselect();
        }
        segment = this.segments[idx];
        segment.select();
        row = this.data[idx];
        _fill_color = row.labelColor || this.options.labelColor || '#000000'; // ADDED
        return this.setLabels(row.label, this.options.formatter(row.value, row), _fill_color); // ADDED parameter _fill_color
    };


    MyMorris.Donut.prototype.setLabels = function (label1, label2, fill_color) {
        var inner, maxHeightBottom, maxHeightTop, maxWidth, text1bbox, text1scale, text2bbox, text2scale;
        _default_fill = fill_color || '#000000'; // ADDED
        inner = (Math.min(this.el.width() / 2, this.el.height() / 2) - 10) * 2 / 3;
        maxWidth = 1.8 * inner;
        maxHeightTop = inner / 2;
        maxHeightBottom = inner / 3;
        this.text1.attr({
            text: label1,
            transform: '',
            fill: fill_color // ADDED
        });
        text1bbox = this.text1.getBBox();
        text1scale = Math.min(maxWidth / text1bbox.width, maxHeightTop / text1bbox.height);
        this.text1.attr({
            transform: "S" + text1scale + "," + text1scale + "," + (text1bbox.x + text1bbox.width / 2) + "," + (text1bbox.y + text1bbox.height)
        });
        this.text2.attr({
            text: label2,
            transform: '',
            fill: fill_color // ADDED
        });
        text2bbox = this.text2.getBBox();
        text2scale = Math.min(maxWidth / text2bbox.width, maxHeightBottom / text2bbox.height);
        return this.text2.attr({
            transform: "S" + text2scale + "," + text2scale + "," + (text2bbox.x + text2bbox.width / 2) + "," + text2bbox.y
        });
    };
}).call(this);

getMorris('donut', 'donut_chart');

function getMorris(type, element) {
    if (type === 'donut') {
        var morris = Morris.Donut({
            element: element,
            data: [
                {
                    label: 'BusStop',
                    value: 5,
                    labelColor: 'red'
                }, {
                label: 'Fence',
                    value: 6,
                    labelColor: 'blue'
                }, 
                {
                    label: 'Route',
                    value: 2,
                    labelColor: 'yellow'
                }
            ],
            labelColor: "#9CC4E4",
            colors: ['#E53935', 'rgb(0, 188, 212)', 'rgb(255, 152, 0)', 'rgb(0, 150, 136)']
        });
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet" />

<div id="donut_chart"></div>