var options = {
  series: [
    {
      name: 'Actual',
      data: [
        {
          x: 'Jan',
          y: 1292,
          goals: [
            {
              name: 'Expected',
              value: 1400,
              strokeHeight: 5,
              strokeColor: '#775DD0',
            },
          ],
        },
        {
          x: 'Feb',
          y: 4432,
          goals: [
            {
              name: 'Expected',
              value: 5400,
              strokeHeight: 5,
              strokeColor: '#775DD0',
            },
          ],
        },
        {
          x: 'Mar',
          y: 5423,
          goals: [
            {
              name: 'Expected',
              value: 5200,
              strokeHeight: 5,
              strokeColor: '#775DD0',
            },
          ],
        },
        {
          x: 'Apr',
          y: 6653,
          goals: [
            {
              name: 'Expected',
              value: 6500,
              strokeHeight: 5,
              strokeColor: '#775DD0',
            },
          ],
        },
        {
          x: 'May',
          y: 8133,
          goals: [
            {
              name: 'Expected',
              value: 6600,
              strokeHeight: 13,
              strokeWidth: 0,
              strokeLineCap: 'round',
              strokeColor: '#775DD0',
            },
          ],
        },
        {
          x: 'Jun',
          y: 7132,
          goals: [
            {
              name: 'Expected',
              value: 7500,
              strokeHeight: 5,
              strokeColor: '#775DD0',
            },
          ],
        },
        {
          x: 'Jul',
          y: 7332,
          goals: [
            {
              name: 'Expected',
              value: 8700,
              strokeHeight: 5,
              strokeColor: '#775DD0',
            },
          ],
        },
        {
          x: 'Aug',
          y: 6553,
          goals: [
            {
              name: 'Expected',
              value: 7300,
              strokeHeight: 2,
              strokeDashArray: 2,
              strokeColor: '#775DD0',
            },
          ],
        },
      ],
    },
  ],
  chart: {
    height: 350,
    type: 'bar',
  },
  title: {
    text: 'Monthly Revenue vs Target',
    align: 'left',
  },
  plotOptions: {
    bar: {
      columnWidth: '60%',
    },
  },
  colors: ['#00E396'],
  dataLabels: {
    enabled: false,
  },
  legend: {
    show: true,
    showForSingleSeries: true,
    customLegendItems: ['Actual', 'Expected'],
    markers: {
      fillColors: ['#00E396', '#775DD0'],
    },
  },
}

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