Added adjustToWidth prop in Line and Area Charts, added xAxisLabelTexts and xAxisLabelTextStyle props to Bar, Line and Area charts

docs/BarChart/BarChartProps.md

@@ -154,6 +154,8 @@ The properties of this line chart can be controlled using the `lineConfig` prop
 | yAxisIndicesColor      | ColorValue          | Color of the pointers on the X axis                                                | black                  |
 | yAxisIndicesColor      | Boolean             | To hide axes, rules, labels altogether                                             | false                  |
 | yAxisLabelTexts        | Array<string>       | Array of label texts to be displayed along y axis                                  | null                   |
+| xAxisLabelTexts        | Array<string>       | Array of label texts to be displayed below x axis                                  | null                   |
+| xAxisLabelTextStyle    | object              | Style of label texts to be displayed below x axis                                  | null                   |
 | rotateLabel            | Boolean             | To rotate the X axis labels (by 60deg)                                             | false                  |
 | hideOrigin             | Boolean             | To hide the y Axis label at origin (i.e. 0)                                        | false                  |
 | labelWidth             | number              | Width of the Label text appearing below the bar (under the X axis)                 | barWidth               |

docs/LineChart/LineChartProps.md

@@ -16,6 +16,7 @@
 | stepValue                     | number         | Value of 1 step/section in the Y axis                                                              | 20                  |
 | stepHeight                    | number         | Height of 1 step/section in the Y axis                                                             | 20                  |
 | spacing                       | number         | Distance between 2 consecutive bars in the Bar chart                                               | 20                  |
+| adjustToWidth                 | Boolean        | When set to true, it auto computes the spacing value to fit the Line chart in the available width  | false               |
 | backgroundColor               | ColorValue     | Background color of the Bar chart                                                                  | \_                  |
 | disableScroll                 | Boolean        | To disable horizontal scroll                                                                       | false               |
 | showScrollIndicator           | Boolean        | To show horizontal scroll indicator                                                                | false               |
@@ -142,6 +143,8 @@ When you are using the `dataPointLabelComponent`, make sure to provide the `data
 | yAxisIndicesColor      | ColorValue          | Color of the pointers on the X axis                                                | black                  |
 | yAxisIndicesColor      | Boolean             | To hide axes, rules, labels altogether                                             | false                  |
 | yAxisLabelTexts        | Array<string>       | Array of label texts to be displayed along y axis                                  | null                   |
+| xAxisLabelTexts        | Array<string>       | Array of label texts to be displayed below x axis                                  | null                   |
+| xAxisLabelTextStyle    | object              | Style of label texts to be displayed below x axis                                  | null                   |
 | rotateLabel            | Boolean             | To rotate the X axis labels (by 60deg)                                             | false                  |
 | hideOrigin             | Boolean             | To hide the y Axis label at origin (i.e. 0)                                        | false                  |
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut and Stacked Bar charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "src/index.tsx",
   "files": [

src/BarChart/RenderBars.tsx

@@ -25,6 +25,7 @@ type Props = {
 
   item: itemType;
   index: number;
+  label: String;
   containerHeight?: number;
   maxValue: number;
   spacing?: number;
@@ -108,6 +109,8 @@ const RenderBars = (props: Props) => {
     opacity,
     animationDuration,
     autoShiftLabels,
+    label,
+    labelTextStyle,
   } = props;
 
   const barMarginBottom =
@@ -527,8 +530,8 @@ const RenderBars = (props: Props) => {
         />
       )}
       {isAnimated
-        ? renderAnimatedLabel(item.label || '', item.labelTextStyle, item.value)
+        ? renderAnimatedLabel(label, labelTextStyle, item.value)
-        : renderLabel(item.label || '', item.labelTextStyle, item.value)}
+        : renderLabel(label, labelTextStyle, item.value)}
     </TouchableOpacity>
   );
 };

src/BarChart/RenderStackBars.tsx

@@ -11,6 +11,7 @@ type Props = {
   topLabelComponent?: Component;
   topLabelContainerStyle?: Style;
   opacity?: number;
+  label: String;
   labelTextStyle?: any;
   disablePress?: boolean;
 
@@ -66,6 +67,8 @@ const RenderStackBars = (props: Props) => {
     spacing,
     rotateLabel,
     xAxisThickness,
+    label,
+    labelTextStyle,
   } = props;
   const disablePress = props.disablePress || false;
   const renderLabel = (label: String, labelTextStyle: any) => {
@@ -246,7 +249,7 @@ const RenderStackBars = (props: Props) => {
         />
       )}
       {static2DSimple(item)}
-      {renderLabel(item.label || '', item.labelTextStyle)}
+      {renderLabel(label || '', labelTextStyle)}
     </View>
   );
 };

src/BarChart/index.tsx

@@ -119,6 +119,8 @@ type PropTypes = {
   hideOrigin?: Boolean;
   labelWidth?: number;
   yAxisLabelTexts?: Array<string>;
+  xAxisLabelTexts?: Array<string>;
+  xAxisLabelTextStyle?: any;
   yAxisLabelPrefix?: String;
   yAxisLabelSuffix?: String;
   autoShiftLabels?: Boolean;
@@ -1385,6 +1387,15 @@ export const BarChart = (props: PropTypes) => {
                     barBorderRadius={props.barBorderRadius}
                     barBackgroundPattern={props.barBackgroundPattern}
                     patternId={props.patternId}
+                    label={
+                      item.label ||
+                      (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
+                        ? props.xAxisLabelTexts[index]
+                        : '')
+                    }
+                    labelTextStyle={
+                      item.labelTextStyle || props.xAxisLabelTextStyle
+                    }
                   />
                 );
               })
@@ -1436,6 +1447,15 @@ export const BarChart = (props: PropTypes) => {
                   barBackgroundPattern={props.barBackgroundPattern}
                   patternId={props.patternId}
                   barMarginBottom={props.barMarginBottom}
+                  label={
+                    item.label ||
+                    (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
+                      ? props.xAxisLabelTexts[index]
+                      : '')
+                  }
+                  labelTextStyle={
+                    item.labelTextStyle || props.xAxisLabelTextStyle
+                  }
                 />
               ))}
         </Fragment>

src/LineChart/index.tsx

@@ -247,6 +247,8 @@ type propTypes = {
   textShiftX?: number;
   textShiftY?: number;
   yAxisLabelTexts?: Array<string>;
+  xAxisLabelTexts?: Array<string>;
+  xAxisLabelTextStyle?: any;
   width?: number;
   yAxisLabelPrefix?: String;
   yAxisLabelSuffix?: String;
@@ -254,6 +256,7 @@ type propTypes = {
   scrollAnimation?: Boolean;
   noOfSectionsBelowXAxis?: number;
   labelsExtraHeight?: number;
+  adjustToWidth?: Boolean;
 };
 type referenceConfigType = {
   thickness: number;
@@ -422,7 +425,15 @@ export const LineChart = (props: propTypes) => {
     props.initialSpacing === 0 ? 0 : props.initialSpacing || 40;
   const thickness = props.thickness || 2;
 
-  const spacing = props.spacing === 0 ? 0 : props.spacing || 60;
+  const adjustToWidth = props.adjustToWidth || false;
+
+  const spacing =
+    props.spacing === 0
+      ? 0
+      : props.spacing ||
+        (adjustToWidth
+          ? ((props.width || 200) - initialSpacing) / data.length
+          : 60);
 
   const xAxisThickness = props.xAxisThickness || 1;
   const dataPointsHeight1 =
@@ -2941,14 +2952,20 @@ export const LineChart = (props: propTypes) => {
               {isAnimated
                 ? renderAnimatedLabel(
                     index,
-                    item.label,
+                    item.label ||
-                    item.labelTextStyle,
+                      (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
+                        ? props.xAxisLabelTexts[index]
+                        : ''),
+                    item.labelTextStyle || props.xAxisLabelTextStyle,
                     item.labelComponent,
                   )
                 : renderLabel(
                     index,
-                    item.label,
+                    item.label ||
-                    item.labelTextStyle,
+                      (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
+                        ? props.xAxisLabelTexts[index]
+                        : ''),
+                    item.labelTextStyle || props.xAxisLabelTextStyle,
                     item.labelComponent,
                   )}
               {/* {renderLabel(index, item.label, item.labelTextStyle)} */}