Kendo Line chart - baseUnit fit - tooltip displaying the wrong value

Question

I have the following issue using the kendo line chart when the baseUnit is set to "fit". The problem here is a mismatch between the chart render and the data. Please open this example: http://jsbin.com/geyeqi/edit?output

Selecting the second point under June 2013, I'm expecting the following value: 4650. However, the tooltip is showing the wrong value (4850).

Does anyone know how to fix it? I've already open a ticket in telerik: http://www.telerik.com/forums/kendo-line-chart---baseunit-fit---tooltip-displaying-the-wrong-value

here is the code:

window.minimumDate = new Date(Date.parse('03/01/2013'));
window.maximumDate = new Date(Date.parse('03/01/2015'));

$(document).ready(function () {
    var createLineChart = function (minDate, maxDate) {

        $("#plan-line-chart").kendoChart({
            dataSource: {
                data: getPrices(minDate, maxDate)
            },
            dataBound: function () {
                if (this.dataSource.view().length <= 12) {
                    this.options.categoryAxis.baseUnit = "months";
                }
            },
            legend: {
                position: "top"
            },
            seriesDefaults: {
                type: "line",
                style: "smooth"
            },
            seriesColors: ["rgba(178, 44, 27, 1)"],
            series:
            [
                 {
                     field: "CurrentPrice",
                     name: "Contributions",
                     categoryField: "Date"
                 }
            ],
            valueAxis: {
                majorGridLines: {
                    visible: true
                },
                line: {
                    visible: false
                },
                labels: {
                    template: "#= formatAmount(value) #"
                },
            },
            categoryAxis: {
                field: "Date",
                type: "Date",
                baseUnit: "fit",
                labels: {
                    rotation: 45
                },
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                format: "{0}%",
                template: "#= formatAmount(value) #"
            }
        });
    };
    var rangeSliderOnChange = function (element) {
        var minDate = new Date(element.value[0]);
        var maxDate = new Date(element.value[1]);
        var linechart = $("#plan-line-chart").data("kendoChart");
        if (linechart != undefined) {
            linechart.destroy();
            createLineChart(minDate, maxDate);
        }
    };

    var templateString = "#= formatToMonthYear(selectionStart) # - #= formatToMonthYear(selectionEnd) #";

    $("#plan-range-slider").kendoRangeSlider({
        change: rangeSliderOnChange,
        min: window.minimumDate.getTime(),
        max: window.maximumDate.getTime(),
        smallStep: 86400000,
        largeStep: 86400000,
        tickPlacement: "none",
        tooltip: {
            template: kendo.template(templateString)
        }
    });

    createLineChart(window.minimumDate, window.maximumDate);
});

function formatAmount(amount) {
    return kendo.toString(amount, "#,##0.00");
}
function formatToMonthYear(val) {
    return kendo.toString(new Date(val), 'MMM yyyy');
}

function getPrices(min, max) {
    var prices = [
       {
           "Date": new Date(Date.parse('03/01/2015')),
           "CurrentPrice": 8250.00
       },
       {
           "Date": new Date(Date.parse('02/01/2015')),
           "CurrentPrice": 8000.00
       },
       {
           "Date": new Date(Date.parse('01/01/2015')),
           "CurrentPrice": 7750.00
       },
       {
           "Date": new Date(Date.parse('12/01/2014')),
           "CurrentPrice": 7500.00
       },
       {
           "Date": new Date(Date.parse('11/01/2014')),
           "CurrentPrice": 7250.00
       },
       {
           "Date": new Date(Date.parse('10/01/2014')),
           "CurrentPrice": 7000.00
       },
       {
           "Date": new Date(Date.parse('09/01/2014')),
           "CurrentPrice": 6750.00
       },
       {
           "Date": new Date(Date.parse('08/01/2014')),
           "CurrentPrice": 6550.00
       },
       {
           "Date": new Date(Date.parse('07/01/2014')),
           "CurrentPrice": 6350.00
       },
       {
           "Date": new Date(Date.parse('06/01/2014')),
           "CurrentPrice": 6150.00
       },
       {
           "Date": new Date(Date.parse('05/01/2014')),
           "CurrentPrice": 5950.00
       },
       {
           "Date": new Date(Date.parse('04/01/2014')),
           "CurrentPrice": 5750.00
       },
       {
           "Date": new Date(Date.parse('03/01/2014')),
           "CurrentPrice": 5550.00
       },
       {
           "Date": new Date(Date.parse('02/01/2014')),
           "CurrentPrice": 5450.00
       },
       {
           "Date": new Date(Date.parse('01/01/2014')),
           "CurrentPrice": 5350.00
       },
       {
           "Date": new Date(Date.parse('12/01/2013')),
           "CurrentPrice": 5250.00
       },
       {
           "Date": new Date(Date.parse('11/01/2013')),
           "CurrentPrice": 5150.00
       },
       {
           "Date": new Date(Date.parse('10/01/2013')),
           "CurrentPrice": 4950.00
       },
       {
           "Date": new Date(Date.parse('09/01/2013')),
           "CurrentPrice": 4950.00
       },
       {
           "Date": new Date(Date.parse('08/01/2013')),
           "CurrentPrice": 4850.00
       },
       {
           "Date": new Date(Date.parse('07/01/2013')),
           "CurrentPrice": 4750.00
       },
       {
           "Date": new Date(Date.parse('06/01/2013')),
           "CurrentPrice": 4650.00
       },
       {
           "Date": new Date(Date.parse('05/01/2013')),
           "CurrentPrice": 4550.00
       },
       {
           "Date": new Date(Date.parse('04/01/2013')),
           "CurrentPrice": 4450.00
       },
       {
           "Date": new Date(Date.parse('03/01/2013')),
           "CurrentPrice": 4350.00
       }
    ];

    var currentPrices = [];
    $("#currentPrices").text('');
    var minDate = new Date((min.getMonth() + 1) + '/01/' + min.getFullYear());
    var maxDate = new Date((max.getMonth() + 1) + '/01/' + max.getFullYear());
    for (var i = prices.length - 1; i >=  0; i--) {
        if (prices[i].Date >= minDate && prices[i].Date <= maxDate) {
            currentPrices.push(prices[i]);

            $("#currentPrices").append("<li>" + kendo.toString(prices[i].Date, 'MMM yyyy') + " :: " + prices[i].CurrentPrice + "</li>");
        }
    }
    return currentPrices;
}

Answer 1

Thanks to Telerik I was able to find a way to fix it. Please read their reply.