Apexcharts average is not displayed correctly

Question

Can you please tell me why the average value which is located at 14 is displayed at the bottom, and not the line?

Other values, for example 15, are displayed in the right place (see screenshots).

I tried different options for the amount of information, it is still displayed incorrectly. Tell me please.

const options = {
  series: [{
    name: 'Count',
    data: [1, 2, 1, 3, 1, 2, 0]
  }],
  chart: {
    height: 250,
    type: 'area',
    toolbar: {
      show: false
    }
  },
  dataLabels: {
    enabled: false
  },

  stroke: {
    curve: 'smooth',
    colors: ["#6f42c1"],
  },
  grid: {
    show: false,
  },
  sparkline: {
    enabled: true
  },
  xaxis: {
    type: 'category',
    categories: ["11", "12", "13", "14", "15", "16", "17"],
    labels: {
      show: true,
      style: {
        colors: "#b7bbc8",
        fontSize: "10px",
        fontWeight: 900
      }
    }
  },
  yaxis: {
    show: false
  },
  fill: {
    type: 'gradient',
    gradient: {
      shade: 'light',
      type: "vertical",
      shadeIntensity: 1,
      opacityFrom: 1,
      opacityTo: 1,
      colorStops: [{
          offset: 0,
          color: "#6f42c1",
          opacity: 0.2
        },

        {
          offset: 100,
          color: "#fff",
          opacity: 0.5
        }
      ]
    }
  },
  tooltip: {
    x: {
      format: 'dd/MM/yy HH:mm'
    },
  }
};

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

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>

Answer 1

This happens when yaxis max is equal to largest number from series. Try something like this:

const options = {
  series: [{
    name: 'Count',
    data: [1, 2, 1, 3, 1, 2, 0]
  }],
  chart: {
    height: 250,
    type: 'area',
    toolbar: {
      show: false
    }
  },
  dataLabels: {
    enabled: false
  },

  stroke: {
    curve: 'smooth',
    colors: ["#6f42c1"],
  },
  grid: {
    show: false,
  },
  sparkline: {
    enabled: true
  },
  xaxis: {
    type: 'category',
    categories: ["11", "12", "13", "14", "15", "16", "17"],
    labels: {
      show: true,
      style: {
        colors: "#b7bbc8",
        fontSize: "10px",
        fontWeight: 900
      }
    }
  },
  yaxis: {
    show: false,
    max:3.1
  },
  fill: {
    type: 'gradient',
    gradient: {
      shade: 'light',
      type: "vertical",
      shadeIntensity: 1,
      opacityFrom: 1,
      opacityTo: 1,
      colorStops: [{
          offset: 0,
          color: "#6f42c1",
          opacity: 0.2
        },

        {
          offset: 100,
          color: "#fff",
          opacity: 0.5
        }
      ]
    }
  },
  tooltip: {
    x: {
      format: 'dd/MM/yy HH:mm'
    },
  }
};

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

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>