rangeArea charts ignore the yaxis tickAmount for the grid generation.

[vLabayen]

Description

While line charts show as many grid horizontal lines as yaxis ticks, rangeArea charts show a number of grid lines that is not consistent with tickAmount.

Steps to Reproduce

Examples taken from https://apexcharts.com/angular-chart-demos/range-area-charts/basic/.

1. Set yaxis.tickAmount = 3 in a rangeArea chart (https://codesandbox.io/s/apx-range-area-basic-forked-3pzxf9?file=/src/app/app.component.ts)
2. Set yaxis.tickAmount = 3 in a line chart (https://codesandbox.io/s/apx-range-area-basic-forked-ihg8to?file=/src/app/app.component.ts)

Expected Behavior

As happens in the line chart, I expect the grid horizontal lines to be equal to the number of ticks in the yaxis.

Actual Behavior

rangeArea charts correctly sets as many labels in the yaxis as yaxis.tickAmount, but the grid lines are not affected.

Screenshots

Reproduction Link

RangeArea: https://codesandbox.io/s/apx-range-area-basic-forked-3pzxf9?file=/src/app/app.component.ts
Line (for comparison): https://codesandbox.io/s/apx-range-area-basic-forked-ihg8to?file=/src/app/app.component.ts

Examples given for angular, but reproducible for vanilla js.
Just paste the following js into https://codepen.io/apexcharts/pen/bxzgZJ

var options = {
  chart: {
    height: 380,
    width: "100%",
    type: "rangeArea"
  },
  series: [
    {
      name: "Series 1",
      data: [{x: 1, y: [1,2]}, {x: 2, y: [2, 3]}, {x: 3, y: [2, 3]}, {x: 4, y: [2, 3]}, {x: 5, y: [2, 5]}]
    }
  ],
  yaxis: { tickAmount: 3 }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();