Hi,
I am using the bar chart in a template for a grid column. It works well but I am having trouble removing some remaining space around the chart which looks like it is for the category and value axis labels. below is my configuration, if you run it up and look at the amount of space taken up by the element vs the render size of the bar you will see space on the left and bottom where the axis details would normally be. Is there any way to remove this?
Thanks,
Rob.
I am using the bar chart in a template for a grid column. It works well but I am having trouble removing some remaining space around the chart which looks like it is for the category and value axis labels. below is my configuration, if you run it up and look at the amount of space taken up by the element vs the render size of the bar you will see space on the left and bottom where the axis details would normally be. Is there any way to remove this?
<body> <div id="chart" style="width: 200px"></div><script>$("#chart").kendoChart({ chartArea: { background: "", height: 20, margin: 0, }, legend: { visible: false }, series: [{ type: "bar", data: [80], color: 'cornflowerblue', tooltip: { visible: false }, highlight: { visible: false }, margin: 0, gap: 0, spacing: 0, }], panes: [ { clip: false, margin: 0 } ], categoryAxis: { line: { visible: false, }, labels: { visible: false, }, majorGridLines: { visible: false }, }, valueAxis: { line: { visible: false, }, labels: { visible: false, }, majorGridLines: { visible: false }, max: 100, },});</script></body>Thanks,
Rob.
3 Answers, 1 is accepted
0
Hi,
The extra space seems to be allocated by the category and value axes. Hiding them should remove it:
categoryAxis: {
visible: false
},
valueAxis: {
max: 100,
visible: false,
majorGridLines: {
visible: false
}
}
-- Live demo --
I've also added a simple Sparkline to demonstrate how it compares in terms of built-in appearance and configuration.
Regards,
T. Tsonev
Telerik
The extra space seems to be allocated by the category and value axes. Hiding them should remove it:
categoryAxis: {
visible: false
},
valueAxis: {
max: 100,
visible: false,
majorGridLines: {
visible: false
}
}
-- Live demo --
I've also added a simple Sparkline to demonstrate how it compares in terms of built-in appearance and configuration.
Regards,
T. Tsonev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Robert
Top achievements
Rank 1
Rank 1
answered on 06 Aug 2014, 12:19 PM
Hi,
Great thank you! I must have overlooked that configuration option in my search to remove the space. I had tried so many other options :)
Cheers,
Rob.
Great thank you! I must have overlooked that configuration option in my search to remove the space. I had tried so many other options :)
Cheers,
Rob.
0
Hello,
It's not that hard to get confused with all those settings, happens to us all the time.
That's why I suggested using the Sparkline which is designed for embedding in other content.
I do realize that it looks quite differently though, so use the one that you like best.
Regards,
T. Tsonev
Telerik
It's not that hard to get confused with all those settings, happens to us all the time.
That's why I suggested using the Sparkline which is designed for embedding in other content.
I do realize that it looks quite differently though, so use the one that you like best.
Regards,
T. Tsonev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!