Changing the labels of x-axis in a scatter line chart

[Gaurav]

Hello,

I am using scatter line graph and i want to edit the labels of x-axis to name of months (Jan, Feb, March, Apr .... Dec) instead of numbers which are currently rendered. Below is the code and screenshot is attached.

function rceTime() {

    $("#chart9").kendoChart({

        theme: $(document).data("kendoSkin") || "default",

        title:  {

            text: "Visa Expiry and Contract Expiry in Coming months"

        },

        dataSource: {

            transport: {

                read: {

                    url: "scripts/contractExpiry.json",

                    dataType: "json"

                }

            }

        },

        legend: {

            visible: true,

            position: "right"

        },

        seriesDefaults: {

            type: "scatterLine",

                                             

        },

        series: [{

            name: "Contract Expiry",

            xField: "month",

            yField: "day"

        },{

            name: "Visa Expiry",

            xField: "month1",

            yField: "day1"

        }],

        xAxis: {

            title:  {

                text: "Month"

            },

            max: 12,

             

        },

        yAxis: {

            title:  {

                text: "Date of Month"

            },

            min: 0,

            max: 31,

            labels: {

                format: "{0}"

            }

        },

        tooltip: {

            visible: true,

            template: "#= dataItem.name #"

        }

    });

}

[Iliana Dyankova]

Hello Gaurav,

I am afraid it is not possible to achieve the described functionality using Kendo UI Scatter Line Chart. The reason is the design of this type of chart - it is a XY Chart (such a Scatter line chart), which is suitable for plotting two-dimensional data. In order to set the names of the months as labels of x-axis I would suggest to use a Kendo UI Line Chart, which is a categorical chart.

 

Regards,
Iliana Nikolova
the Telerik team

[Gaurav]

Hi,

Thanks for the reply! I already tried that but my dataset contains multiple values for dates in a given month (dates are on y-axis and months on x-axis) and per my limited knowledge kendo line chart doesn't supports multiple values of y-axis for a given value of x-axis. Anyway is there any better way of doing that? Any help is really really appreciated.

[Iliana Dyankova]

Hello Gaurav,

As another approach for your scenario I would suggest to use a template for the axis labels in the Kendo UI Scatter Line Chart. Then create a function which sets text in the labels and call it in this template. For convenience, I created a simple example which illustrates such approach in action. 

Kind regards,

Iliana Nikolova
the Telerik team

[RamaKrishna P]

you can try it by changing xAxis lable format.

xAxis:{
labels:{ visible: true,format:"MMM"}
}