new Vue({
  el: "#app",
  data() {
    return {
      series: [{
        name: 'Likes',
        data: [0.1, 3, 10, 9, 29, 19, 22, 9, 12, 7000],
        color: "#FFF" // serie color
      }],
      chartOptions: {
        chart: {
          height: 600,
          type: 'bar',
          foreColor: '#FFFFFF88',
          fontFamily: 'Montserrat, sans-serif',
           toolbar: {
            show: false
          },
        },
        tooltip: {
    intersect: false, // Tooltip only shows when mouse "intersects" the point
    shared: true    // Usually set to false when intersect is true
  },
        plotOptions: {
          bar: {
            horizontal: true,
            /* rangeBarOverlap: true, */
             borderRadius: 2,
            barHeight: '20',
          },
        },
        stroke: {
          width: 0,
          curve: 'smooth'
        },

        fill: {
          type: 'gradient',
          colors:['#FFF'],
          gradient: {
            shade: 'dark',
            shadeIntensity: 1,
            type: 'vertical',
            gradientToColors: [ '#000'],
            opacityFrom: 1,
            opacityTo: 1,
            stops: [0, 100,100,100]
          },
        },
         yaxis: {
          min: 0,
          max: 100,
          lines: {
            show: false,
          },
        },
        xaxis: {
            min: 0,
          max: 500,
          color:'#FFF',
          lines: {
            show: false,
          },
        },
      },
    }
  },

  components: {
    VueApexCharts
  }
})