Graph is not rendered until browser resize happened

[Vijitha311]

HTML:
<div id="chartContainer"></div>

CSS:

#chartContainer {
  height: 300px;
  width: 100%;
}

Script

import * as CanvasJs from 'canvasjs'
 export default {

  data () {
    var explodePie = (e) => {
      if (typeof (e.dataSeries.dataPoints[e.dataPointIndex].exploded) === 'undefined' || !e.dataSeries.dataPoints[e.dataPointIndex].exploded) {
        e.dataSeries.dataPoints[e.dataPointIndex].exploded = true
      } else {
        e.dataSeries.dataPoints[e.dataPointIndex].exploded = false
      }
      e.chart.render()
    }
    var contentFormatter = (e) => {
      if (e.entries[0].dataPoints.y === 0) {
        return e.entries[0].dataPoints.name + '- Unallocated'
      } else {
        return e.entries[0].dataPoints.name + '-' + e.entries[0].dataPoints.y + 'K'
      }
    }
    return {
      section: {},
      initialLoad: false,
      mapmodel: [],
      totalSize: '',
      mapsections: [],
      chartOptions: {
        exportEnabled: true,
        animationEnabled: true,
        legend: {
          cursor: 'pointer',
          itemclick: explodePie
        },
        data: [{
          type: 'pie',
          dataPoints: [],
          showInLegend: true,
          toolTipContent: contentFormatter,
          indexLabel: '{name} - {y}k'
        }],
        chart: null
      }
    }
   }
 }

dataPoints

0:
name: "BOOT"
y: 320

1:
name: "CONF"
y: 1024

2:
name: "BKUPCONF"
y: 0

3:
name: "OSIMAGE"

4:
name: "WWW"
y: 0

5:
name: "ROOT"
y: 0

6:
name: "WOLFPASS"
y: 0

length: 7

[Manoj Mohan]

@vijitha311,

Please take a look at this sample project for integrating CanvasJS with VueJS.

If you are still facing the issue, kindly share a sample project along with the sample data reproducing the issue so that we can understand your scenario better and help you to resolve it.

—-
Manoj Mohan
Team CanvasJS