// source https://jsbin.com

index.html

<style id="jsbin-css">
@import url(https://fonts.googleapis.com/css?family=Roboto);

body {
  font-family: Roboto, sans-serif;
  
}

#chart {
  max-width: 650px;
  margin: 35px auto;
}
</style>
<div id="chart">
</div>
<script id="jsbin-javascript">
var options = {
  chart: {
    type: 'area'
  },series: [{
  data: [[1, 34], [3, 54], [5, 23] , [15, 43]]
}],

fill: {
  type: 'solid' ,
 colors: [
   
   
  function( value, seriesIndex, w ) {
    console.log(value);
    if (value < 15) {

      return '#7E36AF';
  } else {
      return '#D9534F';
  }
}
 ]
}}

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

chart.render();
</script>

<script id="jsbin-source-css" type="text/css">@import url(https://fonts.googleapis.com/css?family=Roboto);

body {
  font-family: Roboto, sans-serif;
  
}

#chart {
  max-width: 650px;
  margin: 35px auto;
}
</script>

<script id="jsbin-source-javascript" type="text/javascript">var options = {
  chart: {
    type: 'area'
  },series: [{
  data: [[1, 34], [3, 54], [5, 23] , [15, 43]]
}],

fill: {
  type: 'solid' ,
 colors: [
   
   
  function( value, seriesIndex, w ) {
    console.log(value);
    if (value < 15) {

      return '#7E36AF';
  } else {
      return '#D9534F';
  }
}
 ]
}}

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

chart.render();</script>

jsbin.untitled.css

@import url(https://fonts.googleapis.com/css?family=Roboto);

body {
  font-family: Roboto, sans-serif;
  
}

#chart {
  max-width: 650px;
  margin: 35px auto;
}

jsbin.untitled.js

var options = {
  chart: {
    type: 'area'
  },series: [{
  data: [[1, 34], [3, 54], [5, 23] , [15, 43]]
}],

fill: {
  type: 'solid' ,
 colors: [
   
   
  function( value, seriesIndex, w ) {
    console.log(value);
    if (value < 15) {

      return '#7E36AF';
  } else {
      return '#D9534F';
  }
}
 ]
}}

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

chart.render();