Kendo Bar chart data labels cropped
Demonstrates problem with cropping of column labels
HTML
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">
<div id="chart"></div>
CSS
#chart .k-tooltip {
border-width: 1px;
}
.it-tooltip-content {
margin: 5px;
text-align: left;
}
.align-client10 {
padding: 10px;
height: calc(100% - 20px);
width: calc(100% - 20px);
}
JavaScript
function loadChart() {
$("#chart").kendoChart({
dataSource: {
data: [{
"AverageTime": 0,
"Completed": 0,
"InProgress": 0,
"Key": "Extraction category class A",
"Order": 1,
"Pending": 0,
"ProcessingSpeed": 0,
"TimePosition": 1
}, {
"AverageTime": 0,
"Completed": 0,
"InProgress": 0,
"Key": "Extraction category class B",
"Order": 2,
"Pending": 0,
"ProcessingSpeed": 0,
"TimePosition": 1
}, {
"AverageTime": 0,
"Completed": 0,
"InProgress": 0,
"Key": "Extraction category class C",
"Order": 3,
"Pending": 1,
"ProcessingSpeed": 0,
"TimePosition": 1
}, {
"AverageTime": 0,
"Completed": 0,
"InProgress": 0,
"Key": "Extraction category class D",
"Order": 4,
"Pending": 0,
"ProcessingSpeed": 0,
"TimePosition": 1
}, {
"AverageTime": 0,
"Completed": 0,
"InProgress": 0,
"Key": "Extraction category class E",
"Order": 5,
"Pending": 0,
"ProcessingSpeed": 0,
"TimePosition": 1
}, {
"AverageTime": 0,
...