This is a migrated thread and some comments may be shown as answers.

Remove space around chart

3 Answers 182 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Robert asked on 05 Aug 2014, 09:43 AM
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?

<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

Sort by
0
T. Tsonev
Telerik team
answered on 06 Aug 2014, 07:25 AM
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
 
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
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.
0
T. Tsonev
Telerik team
answered on 06 Aug 2014, 12:55 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
Robert
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Robert
Top achievements
Rank 1
Share this question
or