title: Why would the label of the vertical axis only show after the button is clicked?
body: <p>I am working on a website which needs to show something on the chart (highchart) upon clicking of a button. </p>
  
  <p>The issue is: when the page is first loaded, the label on the vertical axis can not be seen, no matter how big I set the margin for the chart. However, after the button is clicked for the first time, the labels can be seen and remains so. </p>
  
  <p>There was no such problem before I set "reversed", "opposite" for xAxis and "reversed" for yAxis as true.</p>
  
  <p>What causes this phenomenon and how can I solve this?</p>
  
  <p>See the <a href="https://jsfiddle.net/Lf6ymuxr/83/" rel="nofollow noreferrer">JSFiddle</a> for detail. (There are some logic mistakes in the code which is irrelevant for my question.)</p>
  
  <p>I just discovered that when I first load the JSFiddle, the vertical axis of the graph shows up with label; but when I click on "Run" additionally, the graph is refreshed with a vertical axis without label. Maybe I can simulate certain process which takes place when a JSFiddle is loaded to make sure that the vertical axis of the graph shows up with labels. But I am not sure how to do that.</p>
  
  <p>Browser: Google Chrome Version 69.0.3497.92 (Official Build) (64-bit) (up to date)
  My OS: Windows 10</p>
  
  <p>Code for the generation of the chart:</p>
  
  <pre><code>function createColumnHorizChart(argMinY = minYAxis, argMaxY = maxYAxis) {
  
  
  
  var chart = new Highcharts.Chart({
      chart: { //not to be changed lightly
        renderTo: 'contr2',
        type: 'bar',
        width: 749,
        marginTop: 5,
        marginLeft: 1,
        marginRight: 90,
        marginBottom: 55
      },
      colors: [
        '#0000ff'
      ],
      title: {
        text: null
      },
      exporting: {
        enabled: false
      },
      legend: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      xAxis: {
        categories: ['smaller than 100', '100 - 110', '110 - 120', '120 - 130', '130 - 140', '140 - 150', 'bigger than 150'],
        gridLineWidth: 1,
        startOnTick: true,
        title: {
          text: 'Money Unit (MU)'
        },
        opposite: true,
        reversed: true
      },
      yAxis: {
        reversed: true,
        min: 0,
        max: 15,
        tickInterval: 5,
        title: {
          text: 'Frequency',
        }
      },
      tooltip: {
        positioner: function(boxWidth, boxHeight, point) {
          return {
            x: point.plotX - 50,
            y: point.plotY - 10
          };
        },
        style: {
          fontSize: "10px",
          fontWeight: "unbold"
        },
        formatter: function() {
          return Math.round(chartData[index - 2] * 100) / 100;
        }
      },
      plotOptions: {
        bar: {
          dataLabels: {
            enabled: false
          }
        },
        series: {
          borderColor: '#FFFFFF',
          animation: false, //disable all the animations,
          pointPadding: 0,
          groupPadding: 0,
          borderWidth: 1,
          shadow: false
        }
      },
      series: [{
        enableMouseTracking: false,
        data: Array(7).fill(0)
      }]
    });
  
    return chart;
  }
  </code></pre>