hi I am trying to implement a kendo donut . As per image I did it but there are more space between status bar and donut .
My html code :-
<style>
.overlay {
position: absolute;
top: 50%;
left: 50%;
height: 100px;
margin-top: -214px;
margin-left: -131px;
font-size: 16px;
line-height: 100px;
vertical-align: middle;
text-align: center;
}
</style>
<div id="brazil">
<div class="demo-section k-content wide">
<div id="chart"></div>
<div class="overlay" style="display: none;"><div>No Requests For The Current Year</div></div>
</div>
</div>
My js code :-
function createChart(s, s) {
$.ajax({
type: 'GET',
url: "/tgf.mvc/ss?siteId=" + s,
dataType: 'json',
success: function (data) {
$("#chart").kendoChart({
title: {
text: ""
},
chartArea: {
position: "center"
},
legend: {
labels: {
visible: true,
template: kendo.template("#: text # #: Math.floor(percentage*100) #%"),
position: "center",
},
position: "left"
},
dataSource: {
data: data123
},
series: [{
type: "donut",
field: "value",
categoryField: "source",
explodeField: "explode",
labels: {
visible: true,
position: "center",
template: "#: value # Files"
}
}]
tooltip: {
visible: false,
template: "${ category } - ${ value }"
}
});
things I tried 1.tried to reduce the weigh but still having the space . anyone please help me on it ? screenshot
The space is dependent on the width of the container the chart is in at the time it is initialized.
You can set the width before the chart is initialized: dojo
<div id="chart" style="width:400px;"></div>
If you change the width after the chart is initialized, you then need to redraw the chart. This will repaint the chart on screen: dojo
$("#chart").width(400);
$("#chart").data("kendoChart").redraw();