JS Vue3 dynamic bar chart graph with real-time reactive data

Question

Goal

I'm using Vue3 with the Composition API. I want to stream real-time data into a chart / graph (60 fps, possibly multiple streams / multiple updating arrays). To simplify for this question, I want to create a bar chart that updates it bars reactively to data changes by a button.

Attempts

I tried various JavaScript chart libraries like PrimeVue (Chart.js under the hood), vue-chartjs,Vue-ECharts, plotly.js. However, I'm still struggling either getting it to work or getting smooth animation. I thought real-time plotting would be a more common case, but I have a hard time finding examples (or my Google-foo fails me).

PrimeVue attempt

My best progress is with PrimeVue. I got the reactive part to work, but the issue is that the whole graph animates from scratch at each data update.

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import PrimeVue from 'primevue/config';
import Chart from 'primevue/chart';

const app = createApp(App);
app.use(PrimeVue);
app.component('Chart', Chart);
app.mount("#app");

<script setup lang="ts">
import { reactive, ref } from 'vue'

const chartValues = reactive([0.3, 1])

const basicData = ref({
  labels: ['January', 'February'],
  datasets: [
    {
      label: 'My First dataset',
      backgroundColor: '#42A5F5',
      data: chartValues
    },
    {
      label: 'My Second dataset',
      backgroundColor: '#FFA726',
      data: [0.4, 0.1]
    }
  ]
  });

const horizontalOptions = ref(
{
  // animation: {
  //   duration: 0
  // }
}
);

function increment() {
  chartValues[0] += 0.1
  if (chartValues[0] > 1) {
    chartValues[0] = 0
  }

}
</script>


<template>
  <h1>PrimeVue chart 2</h1>
  <button @click="increment">count is: {{ chartValues[0] }}</button>
  <div>
  <div class="card">
    <h5>Horizontal</h5>
    <Chart type="bar" :data="basicData" :options="horizontalOptions" />
  </div>
</div>
</template>

I can prevent the whole graph animation by setting animation: {duration: 0}, but this does not look dynamic/fluid. There is no transition between values.

Questions

It would be helpful if you could:

(best) Share a code snippet / link to a demo (any chart/graph library is okay) that only updates bars in a bar chart for which the data has changed (or line point in a line chart) with a smooth transition (or anything related to a single array) using Vue3.
Recommend a good JS chart library for smooth real-time plot animation that works with Vue3's reactive() / ref().
Any other advice that would help me

Daniel · Accepted Answer · 2023-01-06 03:39:18Z

3

It depends on what kind of changes you want to make.

If you only want to change existing data, then it's relatively easy. If you want to add additional data to the chart it gets quite a bit harder, but based on your example, you're looking to mutate the a specific data inside an array so I won't cover the later.

The problem appears to be that these libraries don't handle the reactive data. Whether you have a reactive in ref or just using reactive The data passed to chart.js loses it's reactivity. I haven't looked into any of them to see why, but seems like prime-vue, vue-chartjs, and @j-t-mcc/vue3-chartjs all lose reactivity. I suspect they might be watching reactivity at a higher level, and when arrays and objects are mixed within reactive, it doesn't work well

to get around it, you can can manually call the update of the chartjs component. To do that pass the component a ref and then call the update() method when you are making an update (or using a watch)

<script>
  import { reactive, ref, watch } from "vue";

  export default {
    setup() {
      const barGraph = ref(null); // define the $ref

      const basicData = reactive({
        labels: ["January", "February"],
        datasets: [
          {
            label: "My First dataset",
            backgroundColor: "#42A5F5",
            data: [0.3, 1],
          },
          {
            label: "My Second dataset",
            backgroundColor: "#FFA726",
            data: [0.4, 0.1],
          },
        ],
      });

      const horizontalOptions = {
        animation: {
          duration: 400,
        },
      };

      function increment() {
        let val = basicData.datasets[0].data[0];
        basicData.datasets[0].data[0] = ((val * 10 + 1) / 10) % 1;

        // when the data changes and the barGraph $ref is not null
        if (barGraph.value) {
          // call update method
          barGraph.value.chart.update();
        }
      }

      return {
        basicData,
        horizontalOptions,
        increment,
        barGraph,
      };
    },
  };
</script>

<template>
  <button @click="increment">
    count is: {{ basicData.datasets[0].data[0] }}
  </button>
  <div>
    <div class="card">
      <h5>Horizontal</h5>
      <Chart
        type="bar"
        :data="basicData"
        :options="horizontalOptions"
        ref="barGraph"
      />
    </div>
  </div>
</template>

answered Jan 6, 2023 at 3:39

Daniel

35.9k17 gold badges115 silver badges163 bronze badges

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

3 Comments

NumesSanguis Over a year ago

Thank you for this answer and creating an example! The animation looks smooth like I want it to be. I noticed you put the update logic in the increment function. For this example that is good enough, but for my more complex use-case, I want it to be reactive. I will try to see if I can get your example to work with a watch, like you mentioned.

NumesSanguis Over a year ago

Hi @Daniel, in your comment (which is now deleted?) you provided an online environment where the chart is working as intended. Today I have more time so I intended to explore your solution in more depth, but noticed it's gone. When I copy your code in this answer though, the chart still refreshes completely (instead of just data that has changed). It seems the code in this answer is not exactly the same?

NumesSanguis Over a year ago

I found your stackblitz link in my browser history. It does work in that environment, but it's not working on my local machine. 1. When I download your project and try install it I get an error for package '@achrinza/[email protected]' as it only supports up till Node version 17 (I have 18 installed). 2. When I just copy your code in freshly made new project (npm init vue@latest), your code runs, but the whole graph is updated every button click (unlike your demo). Seems this code doesn't work with the latest version? "vue": "^3.2.45", "chart.js": "^4.1.2", "primevue": "^3.21.0"

NumesSanguis · Accepted Answer · 2023-01-08 05:40:09Z

With the Vue-ApexCharts library and learning from Daniel's answer, I was able to get a reactive bar chart to work.

Install Vue-ApexCharts in Vue3:

npm install --save apexcharts
npm install --save vue3-apexcharts

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import VueApexCharts from "vue3-apexcharts";

const app = createApp(App);
app.use(VueApexCharts);
app.mount("#app");

App.vue

<template>
  <div id="app">
    <button @click="increment">Increment bar 1</button>
    <button @click="addSeries">Add data series</button>
    <button @click="incrementExtra">Increment appended series data</button>
    <VueApexCharts :options="chartData.options" :series="chartData.series"/>
  </div>
</template>


<script setup lang="ts">
import { ref, reactive } from 'vue'
import VueApexCharts from 'vue3-apexcharts'

const seriesData1 = reactive([0.3, 1])
const seriesDataExtra = ref([0.1, 0.7])

const chartData = reactive({
  series: [
    {
      name: 'My First series',
      data: seriesData1
    },
    {
      name: 'My Second series',
      data: [0.4, 0.1]
    }
  ],
  options: {
    chart: {
      type: 'bar',
      // https://apexcharts.com/docs/options/chart/animations/
      animations: {
        enabled: true,
        easing: 'linear',
        speed: 200,
        animateGradually: {
          enabled: false
        },
        dynamicAnimation: {
          enabled: true,
          speed: 150
        }
      }
    },
    xaxis: {
      categories: ['January', 'February']
    }
  }
})

function increment() {
  seriesData1[0] = ((seriesData1[0] * 10 + 1) / 10) % 1  // + 0.1
  // chartData.series[0].data[0] = ((chartData.series[0].data[0] * 10 + 1) / 10) % 1

  console.log(seriesData1)
}

function incrementExtra() {
  seriesDataExtra.value = seriesDataExtra.value.map(element => ((element * 10 + 1) / 10) % 1)
  console.log(seriesDataExtra)
}

function addSeries() {
  console.log("Add extra series")
  chartData.series.push({
    name: 'My Next series',
    data: seriesDataExtra
  })
}
</script>

The above code can update a single bar's data, which triggers only an animation for that bar. This is done by:

Creating a reactive variable: const seriesData1 = reactive([0.3, 1])
With data: seriesData1 we assign this reactive array to the Chart
The first button triggers the function increment, which increments the first bar's data by 0.1: seriesData1[0] = ((seriesData1[0] * 10 + 1) / 10) % 1

Note that for step 3 we could have also directly updated the data in the Chart with chartData.series[0].data[0] = ((chartData.series[0].data[0] * 10 + 1) / 10) % 1 and this would give the same effect (this line of code also updates the variable seriesData1).

However, by updating the reactive variable seriesData1, we can separate data and the chart logic. You don't have to know how to assign data to the chart, but still get your reactive chart by just modifying the data.

As a bonus I also added a demonstration on how to:

Add an extra data stream / series to the plot with the function addSeries and
Reactively animate this new data by incrementing all values in a ref array using the function incrementExtra.
Modify the animation behavior so it updates all bars at the same time without a bouncy effect (default)

Demo video: https://i.imgur.com/e5a0y8Z.mp4

Collectives™ on Stack Overflow

JS Vue3 dynamic bar chart graph with real-time reactive data

Goal

Attempts

PrimeVue attempt

Questions

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Goal

Attempts

PrimeVue attempt

Questions

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related