CODEWITHSUNDEEP
vuejs2chart.js
CodeName
CodeName

Reputation: 579

Vue chartjs is not rendering from API

I have an API that gives me data about certain things. With that data, I would like to render my chart dynamically. However, when I use that API in the created() segment, it does not get rendered. But if I shift my data to hardcode it in the data() segment, it works. May I seek advice here?


 export default {
        extends: Line,
        data() {
            return {
                lineChartOptions: {
                    maintainAspectRatio: false,
                    responsive: true,
                    scales: { yAxes: [{ ticks: { beginAtZero: true }, gridLines: { display: true } }], xAxes: [{ gridLines: { display: false } }] },
                    legend: {
                        display: true,
                    },
                },
                lineChartData: [],
            };
        },
        created() {
            axios
                .get("someurl")
                .then((response) => {
                    let responseData = response.data;
                    let lineDataset = [];
    
                    for (let i = 0; i < responseData.pidList.length; i++) {
                        lineDataset.push({
                            label: responseData.pidList[i],
                            backgroundColor: "#2554FF",
                            data: 2000,
                        });
                    }
    
                    console.log(lineDataset);
    
                    this.lineChartData = { labels: ["2020", "2021"], datasets: { lineDataset } };
                })
                .catch(function(error) {
                    console.log(error);
                });
        },
        mounted() {
            this.renderChart(this.lineChartData, this.lineChartOptions);
        },
    };

Upvotes: 0

Views: 145

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31341

vue-chartjs does not live update by default, this is because chart.js does not support it. To make it live update you will need to add the reactiveProp mixin as described in the documentation: https://vue-chartjs.org/guide/#updating-charts

Upvotes: 1

Related Questions