<div class="wrapper">
  
</div>

.wrapper {
  width: 500px;
  height: 350px;
  background: #f3f3f3;
  border: 1px solid black;
}

const options = {
  series: [{
    name: 'Динамика',
    data: [1222, 300, 2222, 5000, 30000]
  }],
  chart: {
    height: 350,
    type: 'line',
    fontFamily: 'HelveticaNeueCyr, sans-serif',
    toolbar: {
      show: false
    }
  },
  dataLabels: {
    enabled: true,
    offsetY: -10,
    style: {
      fontSize: '14px',
      colors: ['#222222'],
      fontWeight: 400
    },
    textAnchor: 'start',
    background: {
      enabled: false
    }
  },
  tooltip: {
    enabled: false
  },
  legend: {
    show: false
  },
  colors: [
    '#F4BB03'
  ],
  stroke: {
    width: 1,
    curve: 'smooth'
  },
  xaxis: {
    floating: true,
    position: 'top',
    offsetY: -40,
    tooltip: {
      enabled: false
    },
    categories: [
      'Март 2016',
      'Апрель 2016',
      'Май 2016',
      'Июнь 2016',
      'Июль 2016',
      'Август 2016',
      'Сенябрь 2016',
      'Октябрь 2016'
    ],
    labels: {
      style: {
        fontSize: '14px',
        colors: ['#797979', '#797979', '#797979', '#797979', '#797979', '#797979']
      }
    },
    axisBorder: {
      show: false
    }
  },
  yaxis: {
    show: false
  },
  grid: {
    borderColor: '#E5E5E5',
    padding: {
      top: 40,
      right: 0,
      bottom: 0,
      left: 0
    }
  },
  markers: {
    size: 7,
    hover: {
      size: 7
    }
  }
}

const chart = new ApexCharts(document.querySelector(".wrapper"), options)
chart.render()