<div class="card learningchart-card">
  <div class="card-header code-header">
   <h5>Learning Reports</h5>
  </div>
  <div class="card-body p-0">
   <div id="learningChart"></div>
  </div>
</div>

 
var options = {
  series: [{
   name: 'Materials',
   data: [31, 40, 62, 51, 42, 29, 100],
  }, {
   name: 'Exam',
   data: [11, 32, 45, 82, 34, 52, 41],
  }],
  chart: {
   height: 350,
   type: 'area',
  },
  colors: ['#467FFB', '#05B48B'],
  legend: {
   position: 'top',
  },
  dataLabels: {
   enabled: false
  },
  stroke: {
   curve: 'smooth'
  },
  xaxis: {
   categories: ["S", "M", "T", "W", "T", "F", "S"]
  },
  yaxis: {
   show:true,
   offsetX: 0,
  },
  grid: {
   borderColor: 'rgba(116, 120, 141,0.5)',
   strokeDashArray: 4,
   padding: {
    top: 10,
    bottom: 2,
    right: 0,
   },
  },
  responsive: [{
   breakpoint: 1440,
   options: {
    yaxis: {
     show:false,
     offsetX: 0,
    },
   },
  },{
  breakpoint: 480,
  options: {
   chart: {
    height: 250,
    type: 'area',
   },
  },
  }]
  };

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