react-native-gifted-charts 1.0.21 → 1.2.2

package/README.md

@@ -29,18 +29,15 @@ The most complete library for Bar, Line, Area, Pie, Donut and Stacked Bar charts
 
 ---
 
+## Version 1.2.x 🎉
+Version 1.2.0 onwards we are dependent only on `react-native-svg` and `react-native-linear-gradient`. Earlier, Pie and Donut charts were rendered using `react-native-canvas`, but now they are also rendered using <b>svg</b>. We are no longer using `react-native-canvas` neither `react-native-webview`!
+
 ## Installation
 
 ```sh
 npm install react-native-gifted-charts react-native-linear-gradient react-native-svg
 ```
 
-For Pie chart and Donut chart, these additional packages should be installed-
-
-```sh
-npm i react-native-canvas react-native-webview
-```
-
 For iOS-
 
 ```sh

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.0.21",
+  "version": "1.2.2",
   "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": [
@@ -29,10 +29,8 @@
     "@types/react": "^17.0.5",
     "@types/react-dom": "^17.0.3",
     "@types/react-native": "^0.64.5",
-    "react-native-canvas": "^0.1.37",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-svg": "^12.1.0",
-    "react-native-webview": "^11.4.4",
     "typescript": "^4.2.4"
   },
   "devDependencies": {
@@ -42,7 +40,6 @@
     "babel-jest": "^27.0.6",
     "eslint": "^7.31.0",
     "jest": "^27.0.6",
-    "@types/react-native-canvas": "^0.1.7",
     "metro-react-native-babel-preset": "^0.66.2",
     "react-test-renderer": "17.0.1"
   },
@@ -64,4 +61,4 @@
   "jest": {
     "preset": "react-native"
   }
-}
+}

package/src/BarChart/index.tsx

@@ -653,7 +653,7 @@ export const BarChart = (props: PropTypes) => {
                 styles.horizBar,
                 {
                   width: horizontal
-                    ? props.width || totalWidth
+                    ? props.width || Math.min(300, totalWidth)
                     : props.width || totalWidth + 11,
                 },
                 yAxisSide === 'right' && {transform: [{rotateY: '180deg'}]},
@@ -668,7 +668,13 @@ export const BarChart = (props: PropTypes) => {
                   },
                   horizontal &&
                     !yAxisAtTop && {
-                      transform: [{translateX: totalWidth + yAxisThickness}],
+                      transform: [
+                        {
+                          translateX:
+                            (props.width || Math.min(300, totalWidth)) +
+                            yAxisThickness,
+                        },
+                      ],
                     },
                   {
                     height:
@@ -676,7 +682,8 @@ export const BarChart = (props: PropTypes) => {
                     width: yAxisLabelWidth,
                   },
                   yAxisLabelContainerStyle,
-                ]}/>
+                ]}
+              />
               <View
                 style={[
                   index === noOfSections
@@ -697,7 +704,7 @@ export const BarChart = (props: PropTypes) => {
                       thickness: rulesThickness,
                       color: rulesColor,
                       width: horizontal
-                        ? props.width || totalWidth
+                        ? props.width || Math.min(300, totalWidth)
                         : (props.width || totalWidth) + 11,
                       dashWidth: dashWidth,
                       dashGap: dashGap,
@@ -744,6 +751,17 @@ export const BarChart = (props: PropTypes) => {
                         {rotateY: '180deg'},
                       ],
                     },
+                    horizontal &&
+                      !yAxisAtTop && {
+                        transform: [
+                          {
+                            translateX:
+                              (props.width || Math.min(300, totalWidth)) +
+                              yAxisThickness +
+                              yAxisLabelWidth,
+                          },
+                        ],
+                      },
                     yAxisLabelContainerStyle,
                   ]}>
                   <Text
@@ -796,7 +814,8 @@ export const BarChart = (props: PropTypes) => {
                     width: yAxisLabelWidth,
                   },
                   index === 0 && {marginTop: -stepHeight / 2},
-                ]}/>
+                ]}
+              />
               <View
                 style={[styles.leftPart, {backgroundColor: backgroundColor}]}>
                 {hideRules ? null : (
@@ -1291,8 +1310,8 @@ export const BarChart = (props: PropTypes) => {
             labelsExtraHeight,
         },
         yAxisSide === 'right' && {marginLeft: yAxisLabelWidth + yAxisThickness},
-        props.width && {width: props.width},
-        horizontal && {transform: [{rotate: '90deg'}, {translateY: -15}]},
+        props.width && !horizontal && {width: props.width},
+        horizontal && {transform: [{rotate: '90deg'}, {translateY: 15}]},
       ]}>
       {props.hideAxesAndRules !== true && renderHorizSections()}
       <ScrollView
@@ -1310,7 +1329,7 @@ export const BarChart = (props: PropTypes) => {
             bottom: stepHeight * -0.5 - 60 + xAxisThickness,
           },
           props.width && {width: props.width - 11},
-          horizontal && {width: totalWidth},
+          horizontal && {width: props.width || Math.min(300, totalWidth)},
         ]}
         scrollEnabled={!disableScroll}
         contentContainerStyle={[