JSFiddle - React, Tailwind, and code Playground

by beyondthegrace

HTML

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

JavaScript

var options = {
          series: [{
          name: 'All Data',
          type: 'column',
          data: [252600, 203280, 163800, 136458]
        }, {
          name: 'Section1',
          type: 'line',
          data: [0,0,0,0]
        },{
          name: 'Section2',
          type: 'line',
          data: [0,0,0,0]
        },{
          name: 'Section3',
          type: 'line',
          data: [0,0,0,0]
        },{
          name: 'Section4',
          type: 'line',
          data: [29040,16920,0,0]
        },{
          name: 'Section5',
          type: 'line',
          data: [26280,15960,0,7200]
        }],
          chart: {
          height: 450,
          type: 'line',
        },
        title: {
          text: 'Traffic Sources'
        },
        dataLabels: {
          enabled: true,
          enabledOnSeries: [1,2,3,4,5,6,7,8,9,10,11,12,13,14]
        },
        labels: ['11 Jan 2001', '12 Jan 2001', '13 Jan 2001', '14 Jan 2001'],
        xaxis: {
          type: 'datetime'
        },
        yaxis: [{
          title: {
            text: 'All Data',
          },
        
        }, {
          opposite: true,
          title: {
            text: 'Section Data'
          }
        }]
        };

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