Get correct sizing for apex line chart

Question

I am using apex chart for modern and flexible charts. (https://apexcharts.com/).
Here is my code snippet:

var options = {
      chart: {
        height: 15,
        type: 'line',
        zoom: {
          enabled: false
        }
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        curve: 'straight'
      },
      series: [{
        name: "Desktops",
        data: [10, 5, 2, 15, 12, 11, 10, 1, 0]
      }],
      title: {
        text: 'Product Trends by Month',
        align: 'left'
      },
      grid: {
        row: {
          colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
          opacity: 0.5
        },
      },
      xaxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
      }
    }

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

    chart.render();

<div id="chart">
  
</div>

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

As you can see the height of the chart is a no go. Its cause by the small numbers. When I would have data over 100 it works, but with small numbers, I have this problem. Any solutions to fix this?
~filip

Answer 1

try increasing chart.height to 200.
this allows the chart to be visible.

see following working snippet...

var options = {
      chart: {
        height: 200,
        type: 'line',
        zoom: {
          enabled: false
        }
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        curve: 'straight'
      },
      series: [{
        name: "Desktops",
        data: [10, 5, 2, 15, 12, 11, 10, 1, 0]
      }],
      title: {
        text: 'Product Trends by Month',
        align: 'left'
      },
      grid: {
        row: {
          colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
          opacity: 0.5
        },
      },
      xaxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
      }
    }

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

    chart.render();

<div id="chart">
  
</div>

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