Vue chartjs is not rendering from API

Question

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);
        },
    };

LeeLenalee · Accepted Answer · 2021-09-20 16:55:30Z

1

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

answered Sep 20, 2021 at 16:55

LeeLenalee

31.9k7 gold badges62 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue chartjs is not rendering from API

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related