var options = {
  series: [
    {
      name: 'Net Cash Flow',
      data: [18, -24, 41, -33, 12, 58, -47, 29, -18, 63, 22, -39],
    },
  ],
  chart: {
    height: 350,
    type: 'area',
    zoom: {
      enabled: false,
    },
  },
  dataLabels: {
    enabled: false,
  },
  title: {
    text: 'Monthly Net Cash Flow',
    align: 'left',
  },
  subtitle: {
    text: 'Months in deficit draw in a different color',
    align: 'left',
  },
  yaxis: {
    labels: {
      formatter: function (val) {
        return '$' + val + 'k'
      },
    },
  },
  xaxis: {
    categories: [
      'Jan',
      'Feb',
      'Mar',
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec',
    ],
  },
  stroke: {
    width: 0,
  },
  plotOptions: {
    line: {
      colors: {
        threshold: 0,
        colorAboveThreshold: '#00E396',
        colorBelowThreshold: '#FF4560',
      },
    },
  },
}

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