[Solved] Is it possible to have date labels in the value axis of a RangeBar Chart?

[Kenia]

I am developing a RangeBar chart that shows the timeline (date range) a medication was taken by a patient. I haven't been able to get the value axis to display dates or the bar to show at all. This is how the chart is built:

        @(
            Html.Kendo().Chart<ChartDetailDto>()
                .Name("rangeChart_" + Model.ElementId)
                .HtmlAttributes(new { @class = "w-100 rangeChart" })
                .ChartArea(ca => ca.Background("var(--bs-body-bg)"))
                .Legend(l => l.Visible(false))
                .ToClientTemplate()
        )

        function loadRangeBarChart(patientId, medId, isMedClass, medName) {
            abp.ajax({
                url: abp.appPath + 'App/PatientFigures/GraphRangeChartData',
                dataType: "json",
                data: {
                    id: patientId,
                    medId: medId,
                    isMedClass: isMedClass
                },
                type: "GET",
                traditional: true,
            }).fail(function (e) {
                console.log(e);
            }).done(function (result) {

                var data = result.map(m => ({
                    dose: m.dose,
                    startDate: new Date(m.startDate),
                    endDate: new Date(m.endDate)
                }));

                var chart = $("#rangeChart_" + medId).data("kendoChart");
                chart.setOptions({
                    dataSource: {
                        data: data
                    },
                    series: [{
                        type: "rangeBar",
                        fromField: "startDate",
                        toField: "endDate",
                        categoryField: "dose",
                        name: medName,
                        color: "#48A103",
                        opacity: 0.5,
                        gap: 5
                    }],
                    valueAxis: {
                        type: "date",
                        field: "date",
                        baseUnit: "months",
                        labels: {
                            format: "{0:dd/MM/yyyy}",
                            rotation: 30
                        }
                    }
                })
            });
        }

this is how it currently looks:

 

the category axis works fine.

Also, does the rangeBar chart allow zoom and pan?

[Kenia]

For anyone having the same problem, I found the solution.

I used the numeric value from the date object for the axis and then formatted the labels as date again.

    var doses = [...new Set(result.map(x => x.dose))];
    var seriesData = result.map(m => {
        var row = new Array(doses.length);
        var index = doses.indexOf(m.dose);

        row[index] = {
            from: new Date(m.startDate).getTime(),
            to: new Date(m.endDate).getTime(),
            dose: m.dose
        };
        return { data: row };
    });
    var allDates = result.flatMap(m => [
        new Date(m.startDate).getTime(),
        new Date(m.endDate).getTime()
    ]);
    const fifteenDaysTime = 15 * 86400000;
    var minDate = new Date((Math.min(...allDates)) - fifteenDaysTime);
    var maxDate = new Date((Math.max(...allDates)) + fifteenDaysTime);

    var chart = $("#rangeChart_" + medId).data("kendoChart");
    chart.setOptions({
        seriesDefaults: {
            type: "rangeBar",
            fromField: "from",
            toField: "to",
            spacing: -1,
        },
        series: seriesData,
        categoryAxis: {
            categories: doses,
        },
        valueAxis: {
            min: minDate.getTime(),
            max: maxDate.getTime(),
            majorUnit: 60 * 60 * 1000 * 24 * 30, // 1 month major unit
            labels: {
                template: "#= kendo.toString(new Date(value), 'dd/MM/yyyy') #",
                rotation: 30
            }
        },
    })