Html Kendo line chart x- axis labels overlaping

Question

I am using kendo line chart in my application, the x axis values/labels are overlapping. The xAxis.labels.step property doesn't work in my case as the categoryaxis is bind to an datasource that can contain a date difference in days/moths/years. How can i avoid ovelapping?

I have used rotation to fix this issue, but is there any other approach?

Below is my code:

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <title>Kendo UI Snippet</title>

 <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
 <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.rtl.min.css">
 <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css">
 <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css">
 <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css">
 <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.mobile.all.min.css">

 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
</head>

<body>

 <div id="chart"></div>
 <script>
  var seriesData = [
   {
    year: new Date(Date.parse("12/12/2011")),
    value: 1
   },
   {
    year: new Date(Date.parse("13/12/2012")),
    value: 3
   },
   {
    year: new Date(Date.parse("23/12/2012")),
    value: 4
   }
    ];
  $("#chart").kendoChart({
   categoryAxis: {
    min: new Date("12/1/2011"),
    max: new Date("23/12/2012"),
    baseUnit: "days",
    type: "date",
    field: "year",

    labels: {
     dateFormats: {
      days: "MM/dd/yy"
     },
    }
   },
   chartArea: {
    width: 300,
    height: 200
   },
   series: [
    {
     field: "value",
     type: "line"
    }
  ],
   dataSource: {
    data: seriesData
   }
  });
 </script>
</body>

</html>

score 0 · Answer 1 · answered Jan 26 '15 at 20:22

Kendo chart's x-axis labels can be adjusted dynamically using dataBound-event with the following dataBound function.

function dataBound(e) {
    var chart = $("#chart").data("kendoChart");
    if (seriesData.view().length > 2) {
        chart.options.categoryAxis.labels.step = 5;
    }
    else {
        chart.options.categoryAxis.labels.step = 1;
    }    
}

See full demo -> JSFIDDLE

Html Kendo line chart x- axis labels overlaping

1 Answers1