Morris Chart - How to Format Hover Label

Question

I'm using morris chart. On x-axis I'm showing a date. Everything is fine except label. I want to show my label like x-axis format. How can I change the green circle's value to the red circle's value format?

graph picture

$(function() {
                "use strict";

                var monthNames = [ "Oca", "Şub", "Mar", "Nis", "May", "Haz","Tem", "Ağu", "Eyl", "Eki", "Kas", "Ara" ];


                // LINE CHART
                var line = new Morris.Line({
                    element: 'kelime-gecmisi',
                    resize: true,

                    data: [
                        {tarih: '2014-07-05', sira: 30},
                        {tarih: '2014-07-06', sira: 25},
                        {tarih: '2014-07-07', sira: 19},
                        {tarih: '2014-07-08', sira: 17},
                        {tarih: '2014-07-09', sira: 11},
                        {tarih: '2014-07-10', sira: 8},
                        {tarih: '2014-07-11', sira: 4},
                        {tarih: '2014-07-12', sira: 1},
//                        {tarih: '2014-07-13', item1: 1/3},
//                        {tarih: '2014-07-14', item1: 1/4},
//                        {tarih: '2014-07-15', item1: 1/9}
                    ],
                    xkey: 'tarih',
                    ykeys: ['sira'],
                    xLabels:'day',
                  //  continuousLine:false,
                    labels: ['Sıra'],
                    lineWidth: 2,
                    lineColors: ['#00A65A'],
                    hideHover: 'auto',
                    ymin:'auto 1', 
                    ymax:'auto 30',
                    gridIntegers: true,




                    xLabelFormat: function(d) {
                    return d.getDate()+' '+monthNames[d.getMonth()]+' '+d.getFullYear(); 
                    },

                    //yLabelFormat: function(y) { if (y === 0) return 30; else return Math.round(1/y); }


                });
            });

score 1 · Answer 1 · edited May 23 '17 at 12:34

1

Here's the Answer https://stackoverflow.com/a/19886777/1449779

hoverCallback instead of //yLabelFormat also works with line charts http://jsbin.com/UJUkosa/199/edit

edited May 23 '17 at 12:34

Community

1
1

answered Aug 25 '14 at 23:19

dpineda

2,401
27
25

asdasd · Answer 2 · 2014-12-27T23:58:10.173

1

http://jsbin.com/ziyupujewe/1/edit?html,js,output

{ y: ..., x: ..., label: "my own label"},'

...
Morris.Line({
    hoverCallback: function(index, options, content) {
        var data = options.data[index];
        $(".morris-hover").html('<div>Custom label: ' + data.label + '</div>');
    },
    ...
    other params
});

edited Dec 27 '14 at 23:58

answered Dec 27 '14 at 23:50

asdasd

181
2
3

score 1 · Answer 3 · answered Mar 11 '17 at 23:15

you can use dateFormat option:

"dateFormat": function(unixTime) {
    var d = new Date(unixTime);
    var monthNames = [
        "Oca", "Şub", "Mar", "Nis", "May", "Haz",
        "Tem", "Ağu", "Eyl", "Eki", "Kas", "Ara"
    ];
    return d.getDate() + ' ' + monthNames[d.getMonth()] + ' ' + d.getFullYear();
}

score 0 · Answer 4 · edited Dec 18 '16 at 08:43

0

dateFormat: function (d) {

            var ds = new Date(d);
            return ds.getHours() + ":" + ds.getMinutes();
        }

it's dateFormat, been spinning on guinea pig wheel for hours till i noticed that dateFormat had a typo as dataFormat (that's for the green eclipse)

for the red one, was auto formatted for me, you can peek at the source too!

edited Dec 18 '16 at 08:43

Panther

3,312
9
27
50

answered Dec 18 '16 at 08:23

m s lma

11
2

Morris Chart - How to Format Hover Label

4 Answers4