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?

$(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); }


                });
            });

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?

$(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); }


                });
            });

• javascript
• jquery
• linechart
• morris.js

Share Improve this question Follow edited Dec 18, 2016 at 8:26 user6269864 asked Jul 14, 2014 at 22:31 hakkihakki 6,53777 gold badges6565 silver badges110110 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

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

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

http://jsbin./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
});

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!

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();
}