Comments (5)
Because your "random" data is not random.
If I click on "change data" and take a look at your console logs, its always the same data .
Here is an example for the reactive data chart https://stackblitz.com/github/apertureless/vue-chartjs/tree/main/sandboxes/reactive?file=src%2FApp.vue
from vue-chartjs.
Thanks for your answer @apertureless . I want to say that the data is changing by adding 1 extra data point for every click on "Change data" (you can see in the console).
If you click twice on the "My second Dataset" you will see the new points being displayed.
I also tryied the example you suggested and with a periodic function inside my child component the data is changing. So, I am not sure what is happening, it seems that vue is not able to detect the change in the props that I am sending props.data
for some reason or the chart does not detect to do a re-render.
Edit: After clicking twice on the legend "My second Dataset", the chart is re-rendered. However not on button click "Change data"
from vue-chartjs.
I cannot understand why changing the actual data
like this
function changeData() {
count++
var valueX = 'new' + count
var valueY = 50 + count
data.value.labels.push(valueX)
data.value.datasets[0].data.push(valueY)
console.log(data.value.labels)
console.log(data.value.datasets[0].data)
}
gives Uncaught RangeError: Maximum call stack size exceeded
Just putting a div
in the child component without a chart (as bellow), updates the DOM reactively without any issues. As soon as I add the chart, then RangeError
.
<div>{{ props.data }}</div>
from vue-chartjs.
Because Chart.js itself is not reactive and you have to manually call the .update()
function.
So we have a deep watcher in place to detect changes. https://github.com/apertureless/vue-chartjs/blob/main/src/chart.ts#L65-L113
However the data property is a complex type with nested arrays. If you log out the whole data object you see that it is quite huge. So deep comparing in the watcher is expensive, but we need to do it. And we have to do some manual comparing if data really changed.
I guess changing first the labels and then the data directly on the reactive prop will trigger too many updates.
In the first example you can also add a watcher to your prop in the chart component and then manually updating the chart with calling the .update()
function on chart instance.
from vue-chartjs.
I fixed it with plain chartjs
and implementing a watcher. I tried to see if I can achieve the same with vue-chartjs
, but did not succeed. Could be because vue-chartjs
has intenally his own wacher and way to update the chart.
Thanks for your help.
You can see the result here:
https://codesandbox.io/p/sandbox/confident-morning-qq9x8c
2024-01-10.12-11.mov
Parent: App.vue
<script setup>
import Chartjs from "./components/Chartjs.vue";
import { ref } from "vue";
var data = ref({
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First Dataset",
data: [65, 59, 80, 81, 56, 55, 40],
borderColor: "rgb(75, 192, 192)",
},
],
});
let count = 0;
function changeData() {
count++;
var valueX = "new" + count;
var valueY = 50 + count;
data.value.labels.push(valueX);
data.value.datasets[0].data.push(valueY);
console.log(data.value.labels);
console.log(data.value.datasets[0].data);
}
</script>
<template>
<div id="app">
<button @click="changeData">Change Data</button>
<Chartjs :data="data" />
</div>
</template>
<style></style>
Child component: Chartjs.vue
<script setup>
import Chart from "chart.js/auto";
import { ref, onMounted, watch, toRaw } from "vue";
const props = defineProps(["data"]);
const ChartLine = ref(null);
let chart;
const options = {
responsive: true,
};
onMounted(() => {
const canvas = ChartLine.value;
chart = new Chart(canvas, {
type: "line",
data: toRaw(props.data), // To avoid errors, remove Vue Proxy data using `ToRaw`
options: options,
});
});
watch(props.data, (newData) => {
if (chart) {
chart.data = toRaw(newData); // To avoid errors, remove Vue Proxy data using `ToRaw`
chart.update();
}
});
</script>
<template>
<canvas ref="ChartLine"></canvas>
</template>
<style scoped></style>
from vue-chartjs.
Related Issues (20)
- [Bug]: Security Issues warning from browser, can something done about it? HOT 6
- Standalone page support HOT 1
- [Bug]: Read only issue while using vue-query HOT 3
- [Bug]: Reactive Data on Line Chart : can update a single value, cannot update the entire array HOT 2
- [Bug]: Options (parsing) not updating chart as expected HOT 1
- [Bug]: Error with package version HOT 2
- Mixed chart types support HOT 5
- [Bug]: vue-tsc reports type errors
- [Bug]: Rendering a chart with multiple y axes will display both datasets on the larger scale HOT 1
- [Bug]: Line data point can be of type string when using a timescale HOT 1
- different behaviour between chrome and firefox with same dataset
- [Bug]: Wrong typings for Bar component HOT 7
- a11y: support ARIA attributes, role and fallback content for canvas
- [Bug]: Incorrect animation on data change on two or more datasets in doughnut chart
- [Bug]: Tooltip references invalid element after chart data updates HOT 2
- [Bug]: Fill property is ignored in Line Chart HOT 1
- [Bug]: Error: "category" is not a registered scale. HOT 1
- Seems like there is no way to use chartjs-gauge library with vue-chartjs. Is there a workaround? HOT 2
- [Bug]: Problem using vue-chartjs when imported as ESM module
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-chartjs.