CODEWITHSUNDEEP
jquerychartslinechartmorris.js
NajLinus
NajLinus

Reputation: 187

In Morris.js is it possible to change the color of each dots in a single line?

I'm using Morris.js to draw a line chart graph.

Is it possible to change the color of each dots in a single line?

Upvotes: 0

Views: 1747

Answers (2)

krlzlx
krlzlx

Reputation: 5822

You can change the color of the dots with pointFillColors.
And the color of the circle around the dots with pointStrokeColors.

For example:

pointFillColors: ['grey', 'red'],
pointStrokeColors: ['black', 'blue'],

If you want to change a specific point, you'll have to modify Morris.
You can also set goals to draw a line for specific values.

I extended Morris and added these parameters: checkYValues, yValueCheck, yValueCheckColor.

Usage:

checkYValues: "eq" // Possible values: eq (equal), gt (greater than), lt (lower than)
yValueCheck: 3 // A value to check
yValueCheckColor: "pink" // A color to draw the point


(function () {
    var $, MyMorris;

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

    MyMorris = Object.create(Morris);

    MyMorris.Grid.prototype.gridDefaults["checkYValues"] = "";
    MyMorris.Grid.prototype.gridDefaults["yValueCheck"] = 0;
    MyMorris.Grid.prototype.gridDefaults["yValueCheckColor"] = "";

    MyMorris.Line.prototype.colorFor = function (row, sidx, type) {
        if (typeof this.options.lineColors === 'function') {
            return this.options.lineColors.call(this, row, sidx, type);
        } else if (type === 'point') {
            switch (this.options.checkYValues) {
                case "eq":
                    if (row.y[sidx] == this.options.yValueCheck) {
                        return this.options.yValueCheckColor;
                    }
                    break;
                case "gt":
                    if (row.y[sidx] > this.options.yValueCheck) {
                        return this.options.yValueCheckColor;
                    }
                    break;
                case "lt":
                    if (row.y[sidx] < this.options.yValueCheck) {
                        return this.options.yValueCheckColor;
                    }
                    break;
                default:
                    return this.options.pointFillColors[sidx % this.options.pointFillColors.length] || this.options.lineColors[sidx % this.options.lineColors.length];
            }

            return this.options.pointFillColors[sidx % this.options.pointFillColors.length] || this.options.lineColors[sidx % this.options.lineColors.length];                   
        } else {
            return this.options.lineColors[sidx % this.options.lineColors.length];
        }
    };
}).call(this);

Morris.Line({
    element: 'chart',
    data: [
        { y: '2015-01', a: 1, b: 5 },
        { y: '2015-02', a: 2,  b: 3 },
        { y: '2015-03', a: 2,  b: 9 },
        { y: '2015-04', a: 7,  b: 4 },
        { y: '2015-05', a: 2,  b: 2 },
        { y: '2015-06', a: 3,  b: 3 },
        { y: '2015-07', a: 1, b: 2 }
      ],
    xkey: 'y',
    ykeys: ['a', 'b'],
    labels: ['Line 1', 'Line 2'],
    hideHover: 'auto',
    resize: true,
    pointFillColors: ['grey', 'red'],
    pointStrokeColors: ['black', 'blue'],
    lineColors: ['red', 'blue'],
    goals: [3],
    goalLineColors: ['pink'],
    checkYValues: "eq",
    yValueCheck: 3,
    yValueCheckColor: "pink"
});
<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="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/>

<div id="chart"></div>

Upvotes: 5

Carol Skelly
Carol Skelly

Reputation: 362470

You can change the color of points for an entire line, but not each point individually: https://github.com/morrisjs/morris.js/issues/387

Upvotes: 0

Related Questions