Home Forums Chart Support Canvas.js charts width problem in vue.js

Canvas.js charts width problem in vue.js

Viewing 4 posts - 1 through 4 (of 4 total)
  • #29164

    Hello, I’m using canvas.js pie charts.
    Implementation is :
    I have a component called “PieChart” and create chart like this :

      <div
        v-if="emptyChart == false"
        style="height: 370px; max-width: 100%; margin: 0px auto;"
        :id="chartArea"
      ></div>

    and I have a method :

    initCharts() {
          console.log("1");
          var flag = false;
          for (let i = 0; i < this.chartData.length; i++) {
            if (this.chartData[i] != 0) {
              flag = true;
              break;
            }
          }
          if (flag == false) {
            this.emptyChart = true;
            return;
          }
    
          this.chart = new CanvasJS.Chart(this.chartArea, this.chartConfig);
          this.chart.render();
        },

    this component called from its parent like this :

                <div style="width:100%">
                  <div style="width:33%;display:inline-block;position:relative">
                    <PieChart :chartData="eventsPieChartData" chartArea="t1" title="Events" :visible="testMounted" />
                  </div>
                  <div style="width:33%;display:inline-block;position:relative">
                    <PieChart :chartData="partsPieChartData" chartArea="t2" title="Parts" :visible="testMounted" />
                  </div>
                  <div style="width:33%;display:inline-block;position:relative">
                    <PieChart :chartData="warningChartData" chartArea="t3" title="Warnings" :visible="testMounted" />
                  </div>
                </div>

    first testMounted is false. I change testMounted to true when the parent component is fully mounted and all data is received.
    now the charts does not fit the whole container and does not shown properly.
    but when i zoom out in browser and zoom in again the width is good and will be fit to the whole container(33%)
    i don’t want to use setTimeout(because sometimes it works and sometimes it does not)
    thanks alot.

    #29189

    What can I do to solve this problem ?

    #29195

    @armangh,

    Calling render method after mounting (testMounted value changes to true) should work fine in this case.

    If you are still facing the issue, kindly create a sample project reproducing the issue and share it with us over Google-Drive or Onedrive along with the sample data so that we can look into the code, run it locally to understand the scenario better and help you resolve.

    —-
    Manoj Mohan
    Team CanvasJS

    #29217

    Thanks for your reply, it was just a <v-container> tag missing :)

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

You must be logged in to reply to this topic.