yordan-st · Oct 22, 2026 · Oct 22, 2026 · Oct 22, 2026 · Oct 22, 2026 · Oct 22, 2026
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+- We added a "Refresh time (in seconds)" property that periodically reloads the chart data.
+
 ## [6.2.1] - 2025-07-15
 
 ### Changed

@@ -2,8 +2,10 @@ import {
     ChartWidget,
     ChartWidgetProps,
     containerPropsEqual,
+    seriesDataSources,
     SeriesMapper,
-    usePlotChartDataSeries
+    usePlotChartDataSeries,
+    useRefreshInterval
 } from "@mendix/shared-charts/main";
 import "@mendix/shared-charts/ui/Chart.scss";
 import classNames from "classnames";
@@ -32,6 +34,8 @@ const areaChartSeriesOptions: ChartWidgetProps["seriesOptions"] = {};
 // disable eslint rule to have nice component name in component tree at devtools
 
 export const AreaChart = memo(function AreaChart(props: AreaChartContainerProps): ReactElement {
+    useRefreshInterval(seriesDataSources(props.series), props.refreshInterval);
+
     const mapSeries = useCallback<SeriesMapper<SeriesType>>((line, dataPoints, { getExpressionValue }) => {
         const lineColorExpression = line.dataSet === "static" ? line.staticLineColor : line.dynamicLineColor;
         const markerColorExpression = line.dataSet === "static" ? line.staticMarkerColor : line.dynamicMarkerColor;

@@ -194,6 +194,10 @@
                         </propertyGroup>
                     </properties>
                 </property>
+                <property key="refreshInterval" type="integer" defaultValue="0">
+                    <caption>Refresh time (in seconds)</caption>
+                    <description />
+                </property>
             </propertyGroup>
             <propertyGroup caption="General">
                 <property key="enableAdvancedOptions" type="boolean" defaultValue="false">

@@ -18,6 +18,7 @@ describe("The AreaChart widget", () => {
         return render(
             <AreaChart
                 name="line-chart-test"
+                refreshInterval={0}
                 class="line-chart-class"
                 series={configs.map(setupBasicAreaSeries)}
                 showLegend={false}

@@ -82,6 +82,7 @@ export interface AreaChartContainerProps {
     style?: CSSProperties;
     tabIndex?: number;
     series: SeriesType[];
+    refreshInterval: number;
     enableAdvancedOptions: boolean;
     showPlaygroundSlot: boolean;
     playground?: ReactNode;
@@ -110,6 +111,7 @@ export interface AreaChartPreviewProps {
     renderMode: "design" | "xray" | "structure";
     translate: (text: string) => string;
     series: SeriesPreviewType[];
+    refreshInterval: number | null;
     enableAdvancedOptions: boolean;
     showPlaygroundSlot: boolean;
     playground: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+- We added a "Refresh time (in seconds)" property that periodically reloads the chart data.
+
 ## [6.2.1] - 2025-07-15
 
 ### Changed

@@ -1,4 +1,11 @@
-import { ChartWidget, ChartWidgetProps, containerPropsEqual, usePlotChartDataSeries } from "@mendix/shared-charts/main";
+import {
+    ChartWidget,
+    ChartWidgetProps,
+    containerPropsEqual,
+    seriesDataSources,
+    usePlotChartDataSeries,
+    useRefreshInterval
+} from "@mendix/shared-charts/main";
 import "@mendix/shared-charts/ui/Chart.scss";
 import classNames from "classnames";
 import { memo, ReactElement, useCallback, useMemo } from "react";
@@ -32,6 +39,8 @@ const barChartSeriesOptions: ChartWidgetProps["seriesOptions"] = {
 // disable eslint rule to have nice component name in component tree at devtools
 
 export const BarChart = memo(function BarChart(props: BarChartContainerProps): ReactElement | null {
+    useRefreshInterval(seriesDataSources(props.series), props.refreshInterval);
+
     const layoutOptions = useMemo(
         () => ({
             ...barChartLayoutOptions,

@@ -154,6 +154,10 @@
                         </propertyGroup>
                     </properties>
                 </property>
+                <property key="refreshInterval" type="integer" defaultValue="0">
+                    <caption>Refresh time (in seconds)</caption>
+                    <description />
+                </property>
             </propertyGroup>
             <propertyGroup caption="General">
                 <property key="enableAdvancedOptions" type="boolean" defaultValue="false">

@@ -20,6 +20,7 @@ describe("The BarChart widget", () => {
         return render(
             <BarChart
                 name="bar-chart-test"
+                refreshInterval={0}
                 class="bar-chart-class"
                 barmode="group"
                 series={configs.map(setupBasicBarSeries)}

@@ -68,6 +68,7 @@ export interface BarChartContainerProps {
     style?: CSSProperties;
     tabIndex?: number;
     series: SeriesType[];
+    refreshInterval: number;
     enableAdvancedOptions: boolean;
     showPlaygroundSlot: boolean;
     playground?: ReactNode;
@@ -97,6 +98,7 @@ export interface BarChartPreviewProps {
     renderMode: "design" | "xray" | "structure";
     translate: (text: string) => string;
     series: SeriesPreviewType[];
+    refreshInterval: number | null;
     enableAdvancedOptions: boolean;
     showPlaygroundSlot: boolean;
     playground: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+- We added a "Refresh time (in seconds)" property that periodically reloads the chart data.
+
 ## [6.2.1] - 2025-07-15
 
 ### Changed

@@ -1,4 +1,11 @@
-import { ChartWidget, ChartWidgetProps, traceEqual, usePlotChartDataSeries } from "@mendix/shared-charts/main";
+import {
+    ChartWidget,
+    ChartWidgetProps,
+    seriesDataSources,
+    traceEqual,
+    usePlotChartDataSeries,
+    useRefreshInterval
+} from "@mendix/shared-charts/main";
 import "@mendix/shared-charts/ui/Chart.scss";
 import Big from "big.js";
 import classNames from "classnames";
@@ -30,6 +37,8 @@ export const BubbleChart = memo(
     // disable eslint rule to have nice component name in component tree at devtools
 
     function BubbleChart(props: BubbleChartContainerProps): ReactElement {
+        useRefreshInterval(seriesDataSources(props.lines), props.refreshInterval);
+
         const getSizes = (line: LinesType): number[] => {
             const sizes: number[] = [];
             let dataset: LinesType["staticDataSource"] | LinesType["dynamicDataSource"] | undefined;

@@ -183,6 +183,10 @@
                         </propertyGroup>
                     </properties>
                 </property>
+                <property key="refreshInterval" type="integer" defaultValue="0">
+                    <caption>Refresh time (in seconds)</caption>
+                    <description />
+                </property>
             </propertyGroup>
             <propertyGroup caption="General">
                 <property key="enableAdvancedOptions" type="boolean" defaultValue="false">

@@ -24,6 +24,7 @@ describe("The Bubble widget", () => {
         return render(
             <BubbleChart
                 name="bubble-chart-test"
+                refreshInterval={0}
                 class="bubble-chart-class"
                 lines={configs.map(setupBasicBubbleSeries)}
                 showLegend={false}

@@ -74,6 +74,7 @@ export interface BubbleChartContainerProps {
     style?: CSSProperties;
     tabIndex?: number;
     lines: LinesType[];
+    refreshInterval: number;
     enableAdvancedOptions: boolean;
     showPlaygroundSlot: boolean;
     playground?: ReactNode;
@@ -102,6 +103,7 @@ export interface BubbleChartPreviewProps {
     renderMode: "design" | "xray" | "structure";
     translate: (text: string) => string;
     lines: LinesPreviewType[];
+    refreshInterval: number | null;
     enableAdvancedOptions: boolean;
     showPlaygroundSlot: boolean;
     playground: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+- We added a "Refresh time (in seconds)" property that periodically reloads the chart data.
+
 ## [6.2.1] - 2025-07-15
 
 ### Changed

@@ -1,4 +1,11 @@
-import { ChartWidget, ChartWidgetProps, containerPropsEqual, usePlotChartDataSeries } from "@mendix/shared-charts/main";
+import {
+    ChartWidget,
+    ChartWidgetProps,
+    containerPropsEqual,
+    seriesDataSources,
+    usePlotChartDataSeries,
+    useRefreshInterval
+} from "@mendix/shared-charts/main";
 import "@mendix/shared-charts/ui/Chart.scss";
 import classNames from "classnames";
 import { memo, ReactElement, useCallback, useMemo } from "react";
@@ -32,6 +39,8 @@ const columnChartSeriesOptions: ChartWidgetProps["seriesOptions"] = {
 // disable eslint rule to have nice component name in component tree at devtools
 
 export const ColumnChart = memo(function ColumnChart(props: ColumnChartContainerProps): ReactElement | null {
+    useRefreshInterval(seriesDataSources(props.series), props.refreshInterval);
+
     const layoutOptions = useMemo(
         () => ({
             ...columnChartLayoutOptions,

@@ -154,6 +154,10 @@
                         </propertyGroup>
                     </properties>
                 </property>
+                <property key="refreshInterval" type="integer" defaultValue="0">
+                    <caption>Refresh time (in seconds)</caption>
+                    <description />
+                </property>
             </propertyGroup>
             <propertyGroup caption="General">
                 <property key="advancedOptions" type="boolean" defaultValue="false">

@@ -26,6 +26,7 @@ describe("The ColumnChart widget", () => {
         return render(
             <ColumnChart
                 name="column-chart-test"
+                refreshInterval={0}
                 class="column-chart-class"
                 barmode="group"
                 series={configs.map(setupBasicColumnSeries)}

@@ -68,6 +68,7 @@ export interface ColumnChartContainerProps {
     style?: CSSProperties;
     tabIndex?: number;
     series: SeriesType[];
+    refreshInterval: number;
     advancedOptions: boolean;
     showPlaygroundSlot: boolean;
     playground?: ReactNode;
@@ -97,6 +98,7 @@ export interface ColumnChartPreviewProps {
     renderMode: "design" | "xray" | "structure";
     translate: (text: string) => string;
     series: SeriesPreviewType[];
+    refreshInterval: number | null;
     advancedOptions: boolean;
     showPlaygroundSlot: boolean;
     playground: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+- We added a "Refresh time (in seconds)" property that periodically reloads the chart data.
+
 ## [6.2.1] - 2025-07-15
 
 ### Fixed

@@ -1,4 +1,4 @@
-import { ChartWidget, ChartWidgetProps } from "@mendix/shared-charts/main";
+import { ChartWidget, ChartWidgetProps, useRefreshInterval } from "@mendix/shared-charts/main";
 import "@mendix/shared-charts/ui/Chart.scss";
 import classNames from "classnames";
 import { ReactElement, useMemo } from "react";
@@ -54,6 +54,8 @@ const heatmapChartSeriesOptions: ChartWidgetProps["seriesOptions"] = {
 };
 
 export function HeatMap(props: HeatMapContainerProps): ReactElement | null {
+    useRefreshInterval([props.seriesDataSource], props.refreshInterval);
+
     const heatmapChartData = useHeatMapDataSeries({
         customSeriesOptions: props.customSeriesOptions,
         horizontalAxisAttribute: props.horizontalAxisAttribute,

@@ -28,6 +28,10 @@
                         <selectionType name="Single" />
                     </selectionTypes>
                 </property>
+                <property key="refreshInterval" type="integer" defaultValue="0">
+                    <caption>Refresh time (in seconds)</caption>
+                    <description />
+                </property>
             </propertyGroup>
             <propertyGroup caption="Axis">
                 <property key="horizontalAxisAttribute" type="attribute" required="false" dataSource="seriesDataSource">

@@ -19,6 +19,7 @@ describe("The HeatMap widget", () => {
         return render(
             <HeatMap
                 name="line-chart-test"
+                refreshInterval={0}
                 class="line-chart-class"
                 enableAdvancedOptions={false}
                 gridLines={"none"}

@@ -42,6 +42,7 @@ export interface HeatMapContainerProps {
     seriesDataSource: ListValue;
     seriesValueAttribute: ListAttributeValue<Big>;
     seriesItemSelection?: SelectionSingleValue;
+    refreshInterval: number;
     horizontalAxisAttribute?: ListAttributeValue<string>;
     horizontalSortAttribute?: ListAttributeValue<Big | string | Date>;
     horizontalSortOrder: HorizontalSortOrderEnum;
@@ -85,6 +86,7 @@ export interface HeatMapPreviewProps {
     seriesDataSource: {} | { caption: string } | { type: string } | null;
     seriesValueAttribute: string;
     seriesItemSelection: "None" | "Single";
+    refreshInterval: number | null;
     horizontalAxisAttribute: string;
     horizontalSortAttribute: string;
     horizontalSortOrder: HorizontalSortOrderEnum;

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+- We added a "Refresh time (in seconds)" property that periodically reloads the chart data.
+
 ## [6.2.1] - 2025-07-15
 
 ### Changed

@@ -1,4 +1,11 @@
-import { ChartWidget, ChartWidgetProps, traceEqual, usePlotChartDataSeries } from "@mendix/shared-charts/main";
+import {
+    ChartWidget,
+    ChartWidgetProps,
+    seriesDataSources,
+    traceEqual,
+    usePlotChartDataSeries,
+    useRefreshInterval
+} from "@mendix/shared-charts/main";
 import "@mendix/shared-charts/ui/Chart.scss";
 import { defaultEqual, flatEqual } from "@mendix/widget-plugin-platform/utils/flatEqual";
 import classNames from "classnames";
@@ -28,6 +35,8 @@ export const LineChart = memo(
     // disable eslint rule to have nice component name in component tree at devtools
 
     function LineChart(props: LineChartContainerProps): ReactElement | null {
+        useRefreshInterval(seriesDataSources(props.lines), props.refreshInterval);
+
         const chartLines = usePlotChartDataSeries(
             props.lines,
             useCallback((line, dataPoints, { getExpressionValue }) => {

@@ -184,6 +184,10 @@
                         </propertyGroup>
                     </properties>
                 </property>
+                <property key="refreshInterval" type="integer" defaultValue="0">
+                    <caption>Refresh time (in seconds)</caption>
+                    <description />
+                </property>
             </propertyGroup>
             <propertyGroup caption="General">
                 <property key="enableAdvancedOptions" type="boolean" defaultValue="false">