Apexchart leaves wrapper when I insert two Y-Axes

If I add two Y-Axes to an Apexchart it is pushed beyond the wrapper and does not resize properly. I would like to have one Y-Axis displayed on the left side of the chart and the other one on the right side of the chart.

I tried to debug it in my dev tools but I am sure that this is a canvas problem itself.

I provided the snippet below which shows how the left Y-Axis and Jan data are out of scope.

var yearMapOptions = {
  chart: {
    fontFamily: "'Varela Round', sans-serif",
    foreColor: '#2e1a6d',
    toolbar: {
      show: false
    },
    height: "100%",
    stacked: false
  },
  colors: ['#2e1a6d', '#47bfb6', '#f37b94', '#ebf394'],
  dataLabels: {
    enabled: false
  },
  series: [{
    name: 'Net Pips',
    type: 'line',
    data: [-10, 17, 39, -4, 63, -27, 55, 290, -83, 26, -45, 17],
  }, {
    name: 'Net Profit',
    type: 'line',
    data: [-35, 45, 190, -70, -50, 36, -80, 59, -29, 62, -65, 70]
  }, {
    name: 'Total Volume',
    type: 'column',
    data: [20, 60, 35, 57, 330, 30, 660, 58, 58, 230, 70, 120]
  }, {
    name: 'Total Trades',
    type: 'column',
    data: [6, 23, 11, 8, 33, 4, 57, 13, 13, 45, 17, 28]
  }],
  stroke: {
    width: [3, 3, 3, 3],
    curve: 'smooth'
  },
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'August', 'Sep', 'Oct', 'Nov', 'Dec'],
  },
  yaxis: [{
      show: true,
      seriesName: 'Net Pips',
      opposite: true,
      tickAmount: 2,
      forceNiceScale: true,
      axisTicks: {
        show: false,
      },
      axisBorder: {
        show: true,
        color: '#00E396'
      },
      axisTicks: {
          show: false,
          borderType: 'solid',
          color: '#47bfb6',
      },
      labels: {
        style: {
          color: '#00E396',
        }
      },
      title: {
        text: undefined,
        style: {
          color: '#00E396',
        }
      },
    }, {
      show: true,
      seriesName: 'Net Profit',
      opposite: false,
      tickAmount: 2,
      forceNiceScale: true,
      axisTicks: {
          show: true,
          borderType: 'solid',
          color: '#2e1a6d',
      },
      axisBorder: {
          show: true,
          color: '#FEB019'
      },
      labels: {
          style: {
              color: '#FEB019',
          },
      },
      title: {
          text: undefined,
          style: {
              color: '#FEB019',
          }
      },
    }
  ],
  plotOptions: {
    bar: {
      horizontal: false,
      endingShape: 'rounded',
      barheight: '100%'
    }
  },
  tooltip: {
    fixed: {
      enabled: true,
      position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft
      offsetY: 30,
      offsetX: 60
    },
  },
  grid: {
    show: false
  },
  legend: {
    position: 'top',
    horizontalAlign: 'left',
    offsetY: 10
  }
};

var yearMapChart = new ApexCharts(
  document.querySelector("#yearMap"),
  yearMapOptions
);

yearMapChart.render();

.apexcharts-yaxis, .apexcharts-xaxis-label {
  font-weight: bold;
}

.yearMapWrapper {
  height: 100%;
  width: 80%;
  margin-left: 10%;
}

<html>
<body>

<div class="rowFiveCol2 layerStyles">
  <div class="yearMapWrapper">
    <div id="yearMap"></div>
  </div>
</div>


</body>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<html>

Solution

Removing grid: { show: false } makes the y-axis visible.

PS: Changing grid behavior should not affect the y-axis. It seems like a bug in ApexCharts which will be addressed soon.