CODEWITHSUNDEEP
morris.js
Wonko the Sane
Wonko the Sane

Reputation: 832

Disable labels for a single line in morris line

I have a Morris chart with two lines. I would like to disable the labels for one of the lines, but allow labels for the other line.

enter image description here

I found the "hideHover" option in the documentation, but it appears to be a global setting that cannot be applied to individual lines:

...
pointFillColors: [ '#039be5', '#C9302C'],
pointStrokeColors: [ '#039be5', '#C9302C'],
hideHover: "always"
...

Then I tried this, thinking that it might work:

...
pointFillColors: [ '#039be5', '#C9302C'],
pointStrokeColors: [ '#039be5', '#C9302C'],
hideHover: ["always",'auto'],
...

From the image above you will see the label I am trying to remove.

Alas, no success.

Does anyone know a way to do this?

Upvotes: 1

Views: 965

Answers (1)

krlzlx
krlzlx

Reputation: 5822

You can use the hoverCallback to achieve your goal. Loop trough the content element and get only the header and exclude the line you don't want like this:

hoverCallback: function (index, options, content, row) {
    var finalContent = "";
    var indexHeader = 0;
    var indexLineToIgnore = 1;

    // Get the data
    $(content).each(function (i, e) {
        if (i == indexHeader) {
            finalContent += e.outerHTML;
        } else {
            if (i != indexLineToIgnore) {
                finalContent += e.outerHTML;
            }
        }
    });

    return finalContent;
}

Please try the following snippet:

var data = [
    { "date": "1/1/2010", "a": "5", "b": null },
    { "date": "5/2/2010", "a": "6", "b": "20" },
    { "date": "6/3/2010", "a": "7", "b": "1" },
    { "date": "7/4/2010", "a": "8", "b": "9" },
    { "date": "8/5/2010", "a": "9", "b": "4" },
    { "date": "9/6/2010", "a": "10", "b": "2" }
];

new Morris.Line({
    element: 'chart',
    data: data,
    xkey: 'date',
    ykeys: ['a', 'b'],
    labels: ['Series A', 'Series B'],
    hideHover: 'auto',
    parseTime: false,
    resize: true,
    pointFillColors: ['#039be5', '#C9302C'],
    pointStrokeColors: ['#039be5', '#C9302C'],
    hoverCallback: function (index, options, content, row) {
        var finalContent = "";
        var indexHeader = 0;
        var indexLineToIgnore = 1;

        // Get the data
        $(content).each(function (i, e) {
            if (i == indexHeader) {
                finalContent += e.outerHTML;
            } else {
                if (i != indexLineToIgnore) {
                    finalContent += e.outerHTML;
                }
            }
        });

        return finalContent;
    }
});
<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="chart"></div>

Upvotes: 2

Related Questions