I’m curious if anyone has solved: Chart.

[sandeParticipant]

What is the correct way to bind reactive Vue data to jqxChart so the chart updates automatically?

[adminKeymaster]

Hi,

If you install jqwidgets-scripts you’ll find Vue components like <JqxChart>. These are reactive and bind to Vue data directly.

<template>
  <JqxChart :source="chartData" :title="'Sales by Year'" :xAxis="xAxis" :seriesGroups="seriesGroups" />
</template>

<script setup>
import { ref } from "vue";
import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";

const chartData = ref([
  { Year: 2018, Sales: 30 },
  { Year: 2019, Sales: 50 },
  { Year: 2020, Sales: 70 },
]);

const xAxis = {
  dataField: "Year",
  unitInterval: 1,
  valuesOnTicks: true
};

const seriesGroups = [
  {
    type: "column",
    valueAxis: {
      title: { text: "Sales (in USD)" }
    },
    series: [{ dataField: "Sales", displayText: "Sales" }]
  }
];

// Example of updating Vue data reactively:
setTimeout(() => {
  chartData.value.push({ Year: 2021, Sales: 90 }); // Chart updates automatically
}, 2000);
</script>

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts