Breaking News: Grepper is joining You.com. Read the official announcement!

update chart js vue

Add Answer

Bluesit answered on February 8, 2023 Popularity 7/10 Helpfulness 5/10

answer update chart js vue

related use chartjs in vue 3

update chart js vue

Comment

Install vue-chart.js

npm i vue-chartjs

main.js

import { createApp } from 'vue'
import App from './App.vue'
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

createApp(App).mount('#app')

App.vue

<template>
  <canvas id="myChart"></canvas>
</template>

<script setup>
import { onMounted } from "@vue/runtime-core";
import {Chart} from "chart.js"

onMounted(() => {
let myChart = new Chart("myChart",
{
  type:"bar",
  data:{
    labels:["label","label2"],
    datasets:[{
          type:"bar",
          backgroundColor:["blue","red"],
          data:[5,3]
        },
        //Second Bar (Optional)
        {
          type:"bar",
          data:[4,1],
          backgroundColor:["green","yellow"]
        }]
      },
      options:{
          responsive:false,
          maintainAspectRatio:false,
          plugins:{
            legend:{
                display:false
              },
              title:{
                display:false
              }
          }
      }
});

//Udate Chart
myChart.data.datasets[0].data[0] = 10;
myChart.update();
})
</script>

Popularity 7/10 Helpfulness 5/10 Language whatever

Source: Grepper

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Feb 08 2023

Bluesit

0 Answers Avg Quality 2/10

Closely Related Answers

use chartjs in vue 3

Comment

Install vue-chart.js

npm i vue-chartjs

main.js

import { createApp } from 'vue'
import App from './App.vue'
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

createApp(App).mount('#app')

App.vue

<template>
  <canvas id="myChart"></canvas>
</template>

<script setup>
import { onMounted } from "@vue/runtime-core";
import {Chart} from "chart.js"

onMounted(() => {
let myChart = new Chart("myChart",
{
  type:"bar",
  data:{
    labels:["label","label2"],
    datasets:[{
          type:"bar",
          backgroundColor:["blue","red"],
          data:[5,3]
        },
        //Second Bar (Optional)
        {
          type:"bar",
          data:[4,1],
          backgroundColor:["green","yellow"]
        }]
      },
      options:{
          responsive:false,
          maintainAspectRatio:false,
          plugins:{
            legend:{
                display:false
              },
              title:{
                display:false
              }
          }
      }
});

//Udate Chart
myChart.data.datasets[0].data[0] = 10;
myChart.update();
})
</script>

Popularity 10/10 Helpfulness 5/10 Language whatever

Source: Grepper

Tags: whatever whateve

Link to this answer
Share Copy Link

Contributed on Feb 08 2023

Bluesit

0 Answers Avg Quality 2/10

update chart js vue

Contents

More Related Answers

update chart js vue

Closely Related Answers

use chartjs in vue 3

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.