fix: chart render issue

Author: YogendraShelke

packages/pluggableWidgets/bar-chart-native/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We have resolved an issue preventing Bar chart from rendering correctly.
+
 ## [3.1.1] - 2025-3-18
 
 ### Fixed

packages/pluggableWidgets/bar-chart-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bar-chart-native",
   "widgetName": "BarChart",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "license": "Apache-2.0",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
   "repository": {

packages/pluggableWidgets/bar-chart-native/src/components/BarChart.tsx

@@ -1,6 +1,6 @@
 import { ReactElement, useCallback, useMemo, useState } from "react";
 import { LayoutChangeEvent, Text, View } from "react-native";
-import { VictoryAxis, VictoryBar, VictoryChart, VictoryGroup, VictoryStack } from "victory-native";
+import { VictoryAxis, VictoryBar, VictoryChart, VictoryGroup, VictoryLabel, VictoryStack } from "victory-native";
 import { BarProps } from "victory-bar";
 import { extractStyles } from "@mendix/pluggable-widgets-tools";
 
@@ -108,6 +108,7 @@ export function BarChart({
                     horizontal
                     key={index}
                     data={dataPoints}
+                    labelComponent={<VictoryLabel />}
                     width={barStyles.width}
                     cornerRadius={barStyles.cornerRadius}
                     style={{
@@ -226,12 +227,14 @@ export function BarChart({
                                         <VictoryAxis
                                             orientation={"bottom"}
                                             dependentAxis
+                                            tickLabelComponent={<VictoryLabel />}
                                             style={mapToAxisStyle(style.grid, style.xAxis)}
                                             {...(firstSeries?.xFormatter
                                                 ? { tickFormat: firstSeries.xFormatter }
                                                 : undefined)}
                                         />
                                         <VictoryAxis
+                                            tickLabelComponent={<VictoryLabel />}
                                             style={mapToAxisStyle(style.grid, style.yAxis)}
                                             orientation={"left"}
                                             {...(firstSeries?.yFormatter

packages/pluggableWidgets/bar-chart-native/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="BarChart" version="3.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="BarChart" version="3.2.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="BarChart.xml" />
         </widgetFiles>

packages/pluggableWidgets/column-chart-native/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We have resolved an issue preventing Column chart from rendering correctly
+
 ## [2.1.1] - 2025-3-18
 
 ### Fixed

packages/pluggableWidgets/column-chart-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "column-chart-native",
   "widgetName": "ColumnChart",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "license": "Apache-2.0",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
   "repository": {

packages/pluggableWidgets/column-chart-native/src/components/ColumnChart.tsx

@@ -1,6 +1,6 @@
 import { ReactElement, useCallback, useMemo, useState } from "react";
 import { LayoutChangeEvent, Text, TextStyle, View } from "react-native";
-import { VictoryAxis, VictoryBar, VictoryChart, VictoryGroup, VictoryStack } from "victory-native";
+import { VictoryAxis, VictoryBar, VictoryChart, VictoryGroup, VictoryLabel, VictoryStack } from "victory-native";
 import { BarProps } from "victory-bar";
 import { extractStyles } from "@mendix/pluggable-widgets-tools";
 
@@ -114,6 +114,7 @@ export function ColumnChart({
                 <VictoryBar
                     key={index}
                     data={dataPoints}
+                    labelComponent={<VictoryLabel />}
                     width={columnStyles.width}
                     cornerRadius={columnStyles.cornerRadius}
                     style={{

packages/pluggableWidgets/column-chart-native/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="ColumnChart" version="2.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="ColumnChart" version="2.2.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="ColumnChart.xml" />
         </widgetFiles>