show few datas(ticks) more than than max in y axis in apex chart

Question

In the above graph I have 1 as the max value and I need some more ticks(upto say 5) how do I show more ticks than the max value.

In the graph the max value is 1(plotted). and i want the label in y axis(on the left side) to display some more(upto 5)

if the max values in the graph is 30 I want to add few more ticks in y axis.

Answer 1

Can use options.yaxis.max property with dynamically value.

const { createApp, ref, computed, watch, onMounted } = Vue

const app = createApp({
  setup() {
    /** Get Example Array **/
    const getRandomData = (length = 12) => Array.from(
      { length: length },
      () => Math.floor(Math.random() * length * 3)
    )
    
    const data = ref(getRandomData())
    const maxDataValue = computed(() => data.length === 0 ? 0 : Math.max(...data.value)) // find highest value
    
    /** Render Chart **/
    const renderChart = () => {
      /** RENDER CHART WITH EXTRA OPTIONS **/
      document.querySelector("#chart").innerHTML = ""
      const options = {
        chart: {
          type: 'line',
        },
        series: [{
          name: 'Example Value',
          data: data.value,
        }],
        yaxis: {
          max: maxDataValue.value + 5, // set end of Y axis to highest value + 5
          tickAmount: 5,
        },
      }
      const chart = new ApexCharts(document.querySelector("#chart"), options)
      chart.render()
      
      /** RENDER ORIGINAL CHART WITHOUT EXTRA OPTIONS **/
      // just render original chart to compare
      document.querySelector("#originalChart").innerHTML = ""
      const originalOptions = {
        chart: {
          type: 'line',
        },
        series: [{
          name: 'Example Value',
          data: data.value,
        }],
      }
      const originalChart = new ApexCharts(document.querySelector("#originalChart"), originalOptions)
      originalChart.render()
    }
    
    // Re-Render Chart when Data Changed
    watch(data, renderChart)
    
    // Render Chart when Mounted
    onMounted(() => {
      renderChart()
    })
    
    return { data, getRandomData }
  }
}).mount('#app')

#chart, #originalChart {
  padding: 5px 0;
  width: 300px;
}

button {
  margin: 5px;
}

<script src="https://unpkg.com/vue@3.3.4/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>

<div id="app">
  <button @click="data = []">empty data</button>
  <button @click="data = getRandomData(1)">random data [1]</button>
  <button @click="data = getRandomData()">random data [12]</button>
  <h2>With extra ticks on yaxis</h2>
  <div id="chart"></div>
  <h2>Original</h2>
  <div id="originalChart"></div>
</div>