I’m looking for explanations about: Chart.

[pedro_barbosaParticipant]

How can I dynamically update the series data of a jqxChart in React when my component state changes?

[adminKeymaster]

Hi,

in React, when you use jqxChart, the chart data is typically bound to a source property (via a jqxDataAdapter or a plain array).
To dynamically update the chart when your component state changes, you need to:
– Keep your data in React state
– Pass that state as the chart’s source
– Ensure the chart re-renders when state updates

Here’s a working example

import React, { useState } from "react";
import JqxChart from "jqwidgets-scripts/jqwidgets-react-tsx/jqxchart";

Best regards,
Peter Stoev

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

export default function App() {
  // Step 1: keep data in state
  const [data, setData] = useState([
    { day: "Monday", value: 30 },
    { day: "Tuesday", value: 25 },
    { day: "Wednesday", value: 20 }
  ]);

  // Step 2: define chart settings
  const settings = {
    title: "Dynamic Data Example",
    description: "Updating series when state changes",
    enableAnimations: true,
    showLegend: true,
    source: data, // <-- bind React state here
    xAxis: {
      dataField: "day"
    },
    seriesGroups: [
      {
        type: "column",
        series: [
          { dataField: "value", displayText: "Value" }
        ]
      }
    ]
  };

  // Step 3: simulate updating the chart data
  const updateData = () => {
    const newData = [
      { day: "Monday", value: Math.round(Math.random() * 50) },
      { day: "Tuesday", value: Math.round(Math.random() * 50) },
      { day: "Wednesday", value: Math.round(Math.random() * 50) }
    ];
    setData(newData); // <-- triggers re-render
  };

  return (
    <div>
      <JqxChart
        style={{ width: "600px", height: "400px" }}
        {...settings}
      />
      <button onClick={updateData}>Update Chart Data</button>
    </div>
  );
}

[Author]

Posts