Hi all,
I'm finding the JS Kendo UI pretty great thus far, but I'm having an issue with some sizing of a horizontal stacked bar. Basically I'd like the complete displayed area to only be as big as the value of the series, with no space shown around the 1st series (chart will only ever have one series, being used as a linear gauge more or less).
Code I have thus far for the init:
$("#chart").kendoChart({
chartArea:{
height:40,
width:200,
margin:5,
background:"green",
margin:0
},
title: {
text: ""
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar",
stack: true,
margin:15,
gap:2
},
panes:[
{name: "top-pane",height:70}
],
series: [{
name: "Red Portion",
data: [10],
color: "#ff0000"
}, {
name: "Yellow Portion",
data: [25],
color: "#ffff00"
}, {
name: "Green Portion",
data: [100],
color: "#00ff00"
}],
labels:{
visible:true
},
valueAxis: {
max: 180,
line: {
visible: false
},
minorGridLines: {
visible: false
},
majorGridLines:{
visible: false
},
labels:{
visible:false
}
},
categoryAxis: {
majorGridLines: {
visible: false
},
labels:{
visible:false
},
visible:false
},
tooltip: {
visible: true
}
});
The above results in pretty much what I want in terms of one series represented as one stacked horizontal bar, but there's still some extra space around it which I'd like to eliminate so the eventual SVG renders as just the series bar itself.
1 Answer, 1 is accepted
In order to achieve this you should:
- Set series.gap 0;
- Change the valueAxis.max to 135.
For your convenience here is the updated example.
Regards,
Iliana Nikolova
Telerik