JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.dataviz.min.css">
<div id="chart" style="relative;"></div>
CSS
.custom-overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
font-size: 20px;
}
#message{
position: absolute; left: 40%; top: 345px;
}
JavaScript
$().ready(function() {
setTimeout(function() {
createChart();
}, 400);
});
var graphData = [{
'Choice': 'Selected',
'Level_of_Change': '2'}];
function createChart() {
$('#chart').kendoChart({
theme: $(document).data('kendoSkin') || 'default',
dataSource: {
data: graphData
},
title: {
text: 'Test',
color: '#000',
font: '16px Arial,Helvetica,sans-serif; font-weight:bold;'
},
legend: {
position: 'bottom',
offsetX: 25,
border: {
width: 1,
color: '#C0C0C0'
}
},
seriesDefaults: {
type: 'column'
},
series: [{
field: 'Level_of_Change',
name: 'Level of Change'}],
categoryAxis: {
field: 'Choice',
title: {
text: '',
font: '14px Arial,Helvetica,sans-serif;'
},
labels: {
rotation: -90
}
},
valueAxis: {
title: {
text: '',
font: '14px Arial,Helvetica,sans-serif;'
},
labels: {
format: '{0}'
},
majorUnit: 1
},
tooltip: {
visible: true,
format: '{0:N0}'
},
seriesColors: ["#4575B4"]
});
}