I’m seeking advice related to: Chart.

[krishna_jpParticipant]

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

[adminKeymaster]

Hi,

When you’re using jqxChart in React, the right way to dynamically update the chart’s series data is to bind the chart’s source prop to your component’s state (or props), and then update that state. The jqxChart component will re-render automatically

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

export default function ChartExample() {
  // Initial state
  const [data, setData] = useState([
    { day: "Monday", sales: 30 },
    { day: "Tuesday", sales: 40 },
    { day: "Wednesday", sales: 25 },
  ]);

  // Chart settings
  const seriesGroups = [
    {
      type: "column",
      series: [
        { dataField: "sales", displayText: "Sales" }
      ]
    }
  ];

  return (
    <div>
      <JqxChart
        style={{ width: "600px", height: "400px" }}
        title="Sales per Day"
        description="Dynamic update example"
        showLegend={true}
        enableAnimations={true}
        padding={{ left: 10, top: 5, right: 10, bottom: 5 }}
        titlePadding={{ left: 90, top: 0, right: 0, bottom: 10 }}
        source={data}   {/* ✅ bind to state */}
        xAxis={{ dataField: "day" }}
        seriesGroups={seriesGroups}
      />

      <button
        onClick={() =>
          setData([
            { day: "Monday", sales: 35 },
            { day: "Tuesday", sales: 55 },
            { day: "Wednesday", sales: 20 },
            { day: "Thursday", sales: 50 },
          ])
        }
      >
        Update Data
      </button>
    </div>
  );
}

Best regards,
Peter Stoev

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

[Author]

Posts