height - Sets the Chart Height - 0 | JSFiddle Sample Code

height - Sets the Chart Height - 0 | JSFiddle Sample Code

by Ayan Ghatak

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<h1>
Y-Axis labels don't plot even in increased height
</h1>

<p>The spacing for labels / interval calculation in the yAxis ain't recomputed on update workflow, and continues to skip even for increased height.</p>

<button class='btn'>
	Toggle chart height
	</button>

<div id="chartContainer">
</div>

SCSS

.btn {
  margin: 10px;
  cursor: pointer;
}

JavaScript

window.onload = function() {
  var chart = new CanvasJS.Chart("chartContainer", {
    "height": 200,
    "zoomEnabled": true,
    "zoomType": "x",
    "data": [{
      "type": "bar",
      "dataPoints": [{
          "y": 1
        },
        {
          "y": 8
        },
        {
          "y": 5
        },
        {
          "y": 92
        },
        {
          "y": 1
        },
        {
          "y": 5
        },
        {
          "y": 20
        },
        {
          "y": 375
        },
        {
          "y": 25
        },
        {
          "y": 15
        },
        {
          "y": 14
        },
        {
          "y": 1740
        },
        {
          "y": 2
        },
        {
          "y": 2
        },
        {
          "y": 2
        }
      ],
    }]
  });

  chart.render();

  (function() {
    var isExpanded = true;
    document.getElementsByClassName('btn')[0].addEventListener('click', function() {
      isExpanded = !isExpanded;
      chart.set('height', isExpanded ? 200 : 800);
    })
  })()


}