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>

CuriousSuperhero CuriousSuperhero · Accepted Answer · 2015-01-26T20:22:40

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 Answers