Удалите пробелы над одиночной полосой в CanvasJS

Question

Я создал горизонтальную линейку с помощью CanvasJS. Но масштабирование беспокоит меня.

Если вы посмотрите http://www.vandeel.com/dashboard/canvasjs.html я создал для примеров; 1 с высотой 300 пикселей и 1 с высотой 100 пикселей. Первое приводит к появлению большого количества пустого пространства над полосой, второе нечитаемо. Вот моя скрипка: http://jsfiddle.net/canvasjs/QwZuf/

Как создать удобочитаемое, однообразное решение высотой 100 пикселей?

С наилучшими пожеланиями, Мартейн

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

Пробел вызван максимальным интервалом, установленным на оси Y. Это должно работать нормально, когда вы удалите то же самое. И вы можете сделать небольшие диаграммы удобочитаемыми, установив labelFontSize для оси и свойство fontSize легенды. Вот jsfiddle.

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