Home forums Using CanvasJS Graph is not rendered until browser resize happened

This topic contains 1 reply, has 2 voices, and was last updated by  Manoj Mohan 3 weeks, 6 days ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #27145

    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
    #27163

    @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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.