apex charts tooltip

tooltip is not working

by Osama Qassar

HTML

<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button @click="updateWidth">Update Width</button>
    <p>Even if sparkline is set to enabled: false tooltip is not showing</p>
    <div id="container">
      <vue-apex-charts
        type="donut"
        :options="chartOptions"
        :series="series">
      </vue-apex-charts>
    </div>
    <p>Why there's unused space below chart in container.</p>
    <p>This goes same for pie chart and radial.</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>

CSS

#container {
  width:300px;
  background: #eee;
  display: inline-block
}

JavaScript

new Vue({
	el: "#app",
  data() {
  	return {
		series: [11, 32, 45, 32],
    plotOptions: {
  pie: {
    customScale: 1,
    offsetX: 0,
    offsetY: 0,
    expandOnClick: true,
    dataLabels: {
        offset: 0,
        minAngleToShowLabel: 10
    }, 
    donut: {
      size: '65%',
      background: 'transparent',
      labels: {
        show: false,
        name: {
          show: true,
          fontSize: '22px',
          fontFamily: 'Helvetica, Arial, sans-serif',
          fontWeight: 600,
          color: undefined,
          offsetY: -10
        },
        value: {
          show: true,
          fontSize: '16px',
          fontFamily: 'Helvetica, Arial, sans-serif',
          fontWeight: 400,
          color: undefined,
          offsetY: 16,
          formatter: function (val) {
            return val
          }
        },stroke: {
    show: true,
    curve: 'smooth',
    lineCap: 'butt',
    colors: undefined,
    width: 5,
    dashArray: 0,      
},
        total: {
          show: false,
          showAlways: false,
          label: 'Total',
          fontSize: '22px',
          fontFamily: 'Helvetica, Arial, sans-serif',
          fontWeight: 600,
          color: '#373d3f',
          formatter: function (w) {
            return w.globals.seriesTotals.reduce((a, b) => {
              return a + b
            }, 0)
          }
        }
      }
    },      
  }
},
		chartOptions: {
    radios:0.5,
    size:2,
      labels: ["Blue", "Green", "Yellow", "Red"],
      chart: {
      	sparkline: { enabled: true }
      },
      tooltip: {
      enabled: true,
      }
      }
    }
  },
  methods: {
  	updateWidth() {
    console.log(document.getElementById("container").offsetWidth);
    	let w =document.getElementById("container");
      if(w.offsetWidth > 250) w.style.width = "200px"
      else w.style.width = "300px"
    }
  },
  components: {
  	VueApexCharts
  }
})