Added | yAxisLabelText | prop for each item in Bar chart and Line charts

docs/BarChart/BarChartProps.md

@@ -56,6 +56,7 @@ So, all the three must be used together. Using any 1 or 2 of them may produce ab
 | labelComponent         | Component  | Custom label component appearing below the bar                                 |
 | topLabelComponent      | Component  | Custom component appearing above the bar                                       |
 | topLabelContainerStyle | object     | Style object for the container of the custom component appearing above the bar |
+| yAxisLabelText         | string     | Y axis label text                                                              |
 | cappedBars             | Boolean    | To show caps on the top of bar                                                 |
 | capThickness           | number     | Thickness of the bar cap                                                       |
 | capColor               | ColorValue | Color of the bar cap                                                           |

docs/LineChart/LineChartProps.md

@@ -43,6 +43,7 @@ So, all the three must be used together. Using any 1 or 2 of them may produce ab
 | value                 | number     | Value of the item representing representing its position                  |
 | label                 | string     | Label text appearing under the X axis                                     |
 | labelTextStyle        | object     | Style object for the label text appearing under the X axis                |
+| yAxisLabelText        | string     | Y axis label text                                                         |
 | dataPointText         | string     | Text appearing near the data points                                       |
 | textShiftX            | number     | To shift the dataPointText text horizontally                              |
 | textShiftY            | number     | To shift the dataPointText text vertically                                |

src/BarChart/index.tsx

@@ -83,7 +83,7 @@ type PropTypes = {
   labelWidth?: number;
 };
 type sectionType = {
-  value: number;
+  value: string;
 };
 type itemType = {
   value?: number;
@@ -102,12 +102,13 @@ type itemType = {
   disablePress?: any;
   labelComponent?: View;
   spacing?: number;
+  yAxisLabelText?: string;
 };
 
 export const BarChart = (props: PropTypes) => {
   const containerHeight = props.height || 200;
   const noOfSections = props.noOfSections || 10;
-  const horizSections = [{value: 0}];
+  const horizSections = [{value: '0'}];
   const stepHeight = props.stepHeight || containerHeight / noOfSections;
   const data = props.data || [];
   const spacing = props.spacing === 0 ? 0 : props.spacing ? props.spacing : 20;
@@ -214,7 +215,7 @@ export const BarChart = (props: PropTypes) => {
     if (props.showFractionalValues || props.roundToDigits) {
       value = parseFloat(value.toFixed(props.roundToDigits || 1));
     }
-    horizSections.push({value});
+    horizSections.push({value: data[i].yAxisLabelText ?? value.toString()});
   }
 
   const heightValue = new Animated.Value(0);
@@ -277,7 +278,7 @@ export const BarChart = (props: PropTypes) => {
                     width: yAxisLabelWidth,
                   },
                 ]}>
-                {!hideYAxisText && (
+                {!hideYAxisText ? (
                   <Text
                     numberOfLines={1}
                     ellipsizeMode={'clip'}
@@ -303,7 +304,7 @@ export const BarChart = (props: PropTypes) => {
                       ? ''
                       : '0'}
                   </Text>
-                )}
+                ) : null}
               </View>
               <View
                 style={[

src/LineChart/index.tsx

@@ -142,10 +142,11 @@ type itemType = {
   showVerticalLine?: Boolean;
   verticalLineColor?: string;
   verticalLineThickness?: number;
+  yAxisLabelText?: string;
 };
 
 type sectionType = {
-  value: number;
+  value: string;
 };
 
 export const LineChart = (props: propTypes) => {
@@ -177,7 +178,7 @@ export const LineChart = (props: propTypes) => {
 
   const maxValue = props.maxValue || maxItem;
 
-  const horizSections = [{value: 0}];
+  const horizSections = [{value: '0'}];
   const stepHeight = props.stepHeight || containerHeight / noOfSections;
   const stepValue = props.stepValue || maxValue / noOfSections;
   const initialSpacing =
@@ -287,7 +288,11 @@ export const LineChart = (props: propTypes) => {
     if (props.showFractionalValues || props.roundToDigits) {
       value = parseFloat(value.toFixed(props.roundToDigits || 1));
     }
-    horizSections.push({value});
+    horizSections.push({
+      value:
+        data[i].yAxisLabelText ??
+        (data2 ? data2[i].yAxisLabelText : value.toString()),
+    });
   }
 
   useEffect(() => {
@@ -612,7 +617,7 @@ export const LineChart = (props: propTypes) => {
                       width: yAxisLabelWidth,
                     },
                   ]}>
-                  {!hideYAxisText && (
+                  {!hideYAxisText ? (
                     <Text
                       numberOfLines={1}
                       ellipsizeMode={'clip'}
@@ -634,7 +639,7 @@ export const LineChart = (props: propTypes) => {
                         ? ''
                         : '0'}
                     </Text>
-                  )}
+                  ) : null}
                 </View>
                 <View
                   style={[