Vue-chartjs not rendering chart until page resize-CodePudding

I am using vue-chartjs to create charts for my application. I am passing the chartData as a prop. My chart doesn't render at first but does when I resize the window. Here is my code. First the chart component:

<script>
    import { Doughnut, mixins } from "vue-chartjs";
    const { reactiveProp } = mixins;
    export default {
        extends: Doughnut,
        mixins: [reactiveProp],
        mounted() {
            this.render();
        },
        methods: {
            render() {
                console.log(this.chartData)
                let options = {
                    responsive: true,
                    maintainAspectRatio: false,
                    legend: {
                        display: false,
                    },
                };
                this.renderChart(this.chartData, options);
            },
        },
    };
</script>

Now here is the code from the component where the chart is displayed:

template part

<v-container>
    <ProjectDoughnutChart :chart-data="chartData" />
</v-container>

script part

components: {
    ProjectDoughnutChart,
},

data() {
    return {
        chartData: {
            labels: [],
            datasets: [
                {
                    backgroundColor: [],
                    hoverBackgroundColor: [],
                    data: [],
                },
            ],
        },
    };
},

setChartsTimesheets() {
    this.timesheets.forEach((timesheet) => {
        let typeTotal = 0;
        this.timesheets
            .filter((timesheet1) => timesheet1.type==timesheet.type)
            .forEach((timesheet1) => {
                typeTotal =timesheet1.billableAmount;
            });
        if (this.chartData.labels.indexOf(timesheet.type) === -1) {
            let colors = this.getTaskColors(timesheet.type);
            this.chartData.labels.push(timesheet.type);
            this.chartData.datasets[0].data.push(typeTotal);
            this.chartData.datasets[0].backgroundColor.push(colors.color);
            this.chartData.datasets[0].hoverBackgroundColor.push(colors.hover);
        }
    });
},

CodePudding user response：

Solved the problem using a similar solution as "Chart with API data" from the documentation.

TL;DR: Adding a v-if on the chart

CodePudding user response：

For people, that have similar problem, but not using vue.js or the official solution doesnt cut it. I had to chart.update() the graph to show values, that were added after the graph was created.

See the example. If you comment the chart.update() line, the graph will not refresh until the window is resized.

let chart = new Chart(document.getElementById("chart"), {
  type: "line",
  data: {
    labels: ["a", "b", "c", "d", "e", "f"],
    datasets: [{
      label: 'Dataset 1',
      data: [1, 5, 12, 8, 2, 3],
      borderColor: 'green',
    }]
  },
  options: {
    interaction: {
      mode: 'index',
      intersect: true,
    },
    stacked: false,
    responsive: true,
  }
});

// adding data to graph after it was created (like data from API or so...)
chart.data.labels.push("new data");
chart.data.datasets[0].data.push(9);

// with chart.update(), the changes are shown right away
// without chart.update(), you need to resize window first 
chart.update();

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="chart"></canvas>