Remove whitespace above a single stacked bar in CanvasJS

Question

I have created a horizontal stacked bar using CanvasJS. But the scaling bothers me.

If you look to http://www.vandeel.com/dashboard/canvasjs.html I have created to examples; 1 with 300px height and 1 with 100px height. The first results in a lot of whitespace above the bar, the second is unreadable. Here is my fiddle: http://jsfiddle.net/canvasjs/QwZuf/

How to create a readable, one bar solution with a height of 100 pixels?

Kind regards, Martijn

HTML

<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->

<div id="budgetbar" style="height: 300px; width: 100%;"></div>

Javascript

var chart = new CanvasJS.Chart("budgetbar",
{
  animationEnabled: true,
  axisX: {     
    interval: 0,
    minimum: 0,
    maximum: 0,
    indexLabelFontSize: 50
  },
  axisY: {     
    interval: 10000,
    minimum: 0,
    maximum: 105000,
    valueFormatString: "€ #,###,###",
    gridThickness: 0,
    gridColor: "#ffffff",
    tickLength: 3,
    indexLabelFontSize: 50
  },
  data: [
    {        
    type: "stackedBar",
    name: "Verbruikt",
    showInLegend: "false",
    dataPoints: [
        { x:1, y: 27000, color: "#cc33bb", toolTipContent: "€ 30.000 Spent" }
        ]
    },
    {        
    type: "stackedBar",
    name: "Prognose V",
    showInLegend: "false",
    dataPoints: [
        { x:1, y: 500, color: "#fc9935", toolTipContent: "€ 27.500 Prognose V" }
        ]
    },
    {        
    type: "stackedBar",
    name: "Verbruikt",
    showInLegend: "false",
    dataPoints: [
        { x:1, y: 2500, color: "#cc33bb", toolTipContent: "€ 30.000 Spent" }
        ]
    },
    {        
    type: "stackedBar",
    name: "Budget",
    showInLegend: "false",
    dataPoints: [
        { x:1, y: 64500, color: "#EEEEEE", toolTipContent: "€ 100.000 Budget" }
        ]
    },
    {
    type: "stackedBar",
    name: "Prognose T",
    showInLegend: "false",
    dataPoints: [
        { x:1, y: 500, color: "#999900", toolTipContent: "€ 95.000 Prognose" }
        ]
    },
    {        
    type: "stackedBar",
    name: "Budget",
    showInLegend: "false",
    dataPoints: [
        { x:1, y: 5000, color: "#EEEEEE", toolTipContent: "€ 100.000 Budget" }
        ]
    }
  ]
  ,
  legend:{
    cursor:"pointer",
    itemclick:function(e) {
      if(typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible){
        e.dataSeries.visible = false;
      }
      else {
        e.dataSeries.visible = true;
      }

      chart.render();
    }
  }
});

chart.render();

Answer 1

Whitespace is because of the maximum & interval that you have set on axisY. It should work fine when you remove the same. And you can make small charts readable by setting labelFontSize of axis and fontSize property of legend. Here is a jsfiddle.

      axisX:{
          labelFontSize: 10
      },
      axisY:{
          labelFontSize: 10
      }