Canvas.js shows 12AM when width stretched (weird bug)

Question

Why is the tooltip for the canvas.js chart displaying "12:00AM: 0.0645840023" when I hover over the points?

JSFiddle: http://jsfiddle.net/ssjqoa64/2/

If I expand the container/window width it displays 12AM bug. Extremely weird bug.

It should display the date instead.

window.onload=function () {
    CanvasJS.addColorSet("colset", ["#337ab7"]);
    var chart=new CanvasJS.Chart("chartContainer", {
        colorSet: "colset", backgroundColor: "#f5f5f5", zoomEnabled: true, exportEnabled: true, exportFileName: "Earnings Chart", axisX: {
            labelFontFamily: "tahoma"
        }
        , axisY: {
            labelFontFamily: "tahoma",
        }
        , data: [ {
            type: "area", dataPoints: [ {
                x: new Date(2015, 12, 29), y: 0.016440000385046
            }
            , {
                x: new Date(2015, 12, 30), y: 0.064584002396259
            }
            , {
                x: new Date(2015, 12, 31), y: 0.0098100002505817
            }
            , {
                x: new Date(2016, 1, 1), y: 0.34803301144257
            }
            , {
                x: new Date(2016, 1, 2), y: 0.20135760693211
            }
            , ]
        }
        ]
    }
    );
    chart.render();
}

Answer 1

It looks like when the xAxis is changing to a smaller granularity (IE: Changing from dates to times) the tooltip format changes to match.

The solution was to use a custom tooltip function as per the documentation.

Please find a working solution at this fiddle.

The new JavaScript:

CanvasJS.addColorSet("colset", ["#337ab7"]);
var chart=new CanvasJS.Chart("chartContainer", {
    colorSet: "colset", backgroundColor: "#f5f5f5", zoomEnabled: true, exportEnabled: true, exportFileName: "Earnings Chart", axisX: {
        labelFontFamily: "tahoma"
    }
    , toolTip: { // THIS IS NEW
        contentFormatter: function(e) {
            var date = e.entries[0].dataPoint.x;
            var value = e.entries[0].dataPoint.y;
            return CanvasJS.formatDate(date, "MMM DD YYYY") + ": " + value;
        }
    } // END OF NEW
    , axisY: {
        labelFontFamily: "tahoma"
    }
    , data: [ {
        type: "area", dataPoints: [ {
            x: new Date(2015, 12, 29), y: 0.02
        }
        , {
            x: new Date(2015, 12, 30), y: 0.06
        }
        , {
            x: new Date(2015, 12, 31), y: 0.01
        }
        , {
            x: new Date(2016, 1, 1), y: 0.35
        }
        , {
            x: new Date(2016, 1, 2), y: 0.21
        }
        , ]
    }
    ]
}

);
chart.render();