react-native-gifted-charts 1.0.9 → 1.0.12

package/README.md

@@ -1,6 +1,6 @@
 # react-native-gifted-charts [![Rate on Openbase](https://badges.openbase.com/js/rating/react-native-gifted-charts.svg)](https://openbase.com/js/react-native-gifted-charts?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge)
 
-The most complete library for Bar, Line, Area, Pie, and Donut charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.
+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.
 
 ### Yet another chart library? Why?
 
@@ -22,7 +22,7 @@ The most complete library for Bar, Line, Area, Pie, and Donut charts in React Na
 <img src='/demos/animatedDataLine.gif' alt='' width=300/>
 <img src='/demos/pielabbelled.svg' alt='' height=280 width=270/>
 <img src='/demos/movingBars.gif' alt='' width=300/>
-<img src='/demos/lineLabelled.png' alt='' height=370 width=360/>
+<img src='/demos/stacks.png' alt='' height=360 width=320/>
 ![alt text](/demos/lineArea.png)
 <img src='/demos/cappedCombined.png' alt='' height=280 width=280/>
 <img src='/demos/line.gif' alt='' height=300 width=290/>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.0.9",
-  "description": "The most complete library for Bar, Line, Area, Pie and Donut charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
+  "version": "1.0.12",
+  "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"

package/src/BarChart/index.tsx

@@ -44,6 +44,7 @@ type PropTypes = {
   xAxisColor?: ColorValue;
   yAxisThickness?: number;
   yAxisColor?: ColorValue;
+  yAxisLabelContainerStyle?: any;
   yAxisTextStyle?: any;
   yAxisLabelWidth?: number;
   hideYAxisText?: Boolean;
@@ -360,6 +361,7 @@ export const BarChart = (props: PropTypes) => {
       : props.yAxisThickness || 1;
   const yAxisColor = props.yAxisColor || 'black';
   const yAxisTextStyle = props.yAxisTextStyle;
+  const yAxisLabelContainerStyle = props.yAxisLabelContainerStyle;
   const showFractionalValues = props.showFractionalValues || false;
   const yAxisLabelWidth = props.yAxisLabelWidth || 35;
   const hideYAxisText = props.hideYAxisText || false;
@@ -647,6 +649,7 @@ export const BarChart = (props: PropTypes) => {
                       index === noOfSections ? stepHeight / 2 : stepHeight,
                     width: yAxisLabelWidth,
                   },
+                  yAxisLabelContainerStyle,
                 ]}>
                 {!hideYAxisText ? (
                   <Text

package/src/LineChart/index.tsx

@@ -49,6 +49,12 @@ type propTypes = {
   thickness3?: number;
   thickness4?: number;
   thickness5?: number;
+  strokeDashArray?: Array<number>;
+  strokeDashArray1?: Array<number>;
+  strokeDashArray2?: Array<number>;
+  strokeDashArray3?: Array<number>;
+  strokeDashArray4?: Array<number>;
+  strokeDashArray5?: Array<number>;
   rotateLabel?: Boolean;
   isAnimated?: Boolean;
   animateOnDataChange?: Boolean;
@@ -93,6 +99,7 @@ type propTypes = {
   referenceLine5Position?: number;
 
   showVerticalLines?: Boolean;
+  verticalLinesUptoDataPoint?: Boolean;
   verticalLinesThickness?: number;
   verticalLinesColor?: ColorValue;
   verticalLinesZIndex?: number;
@@ -135,6 +142,7 @@ type propTypes = {
   color5?: string;
   yAxisThickness?: number;
   yAxisColor?: ColorValue;
+  yAxisLabelContainerStyle?: any;
   yAxisTextStyle?: any;
   showFractionalValues?: Boolean;
   roundToDigits?: number;
@@ -291,6 +299,7 @@ type itemType = {
   showStrip?: Boolean;
 
   showVerticalLine?: Boolean;
+  verticalLineUptoDataPoint?: Boolean;
   verticalLineColor?: string;
   verticalLineThickness?: number;
 };
@@ -1114,11 +1123,18 @@ export const LineChart = (props: propTypes) => {
   const stepValue = props.stepValue || maxValue / noOfSections;
   const noOfSectionsBelowXAxis =
     props.noOfSectionsBelowXAxis || -minValue / stepValue;
-  const thickness1 = props.thickness1;
-  const thickness2 = props.thickness2;
-  const thickness3 = props.thickness3;
-  const thickness4 = props.thickness4;
-  const thickness5 = props.thickness5;
+  const thickness1 = props.thickness1 === 0 ? 0 : props.thickness || 1;
+  const thickness2 = props.thickness2 === 0 ? 0 : props.thickness || 1;
+  const thickness3 = props.thickness3 === 0 ? 0 : props.thickness || 1;
+  const thickness4 = props.thickness4 === 0 ? 0 : props.thickness || 1;
+  const thickness5 = props.thickness5 === 0 ? 0 : props.thickness || 1;
+
+  const strokeDashArray1 = props.strokeDashArray1 || props.strokeDashArray;
+  const strokeDashArray2 = props.strokeDashArray2 || props.strokeDashArray;
+  const strokeDashArray3 = props.strokeDashArray3 || props.strokeDashArray;
+  const strokeDashArray4 = props.strokeDashArray4 || props.strokeDashArray;
+  const strokeDashArray5 = props.strokeDashArray5 || props.strokeDashArray;
+
   const rotateLabel = props.rotateLabel || false;
   const isAnimated = props.isAnimated || false;
   const hideDataPoints1 =
@@ -1182,6 +1198,7 @@ export const LineChart = (props: propTypes) => {
 
   const hideRules = props.hideRules || false;
   const showVerticalLines = props.showVerticalLines || false;
+  const verticalLinesUptoDataPoint = props.verticalLinesUptoDataPoint || false;
 
   const showYAxisIndices = props.showYAxisIndices || false;
   const showXAxisIndices = props.showXAxisIndices || false;
@@ -1195,6 +1212,7 @@ export const LineChart = (props: propTypes) => {
   const yAxisThickness = props.yAxisThickness || 1;
   const yAxisColor = props.yAxisColor || 'black';
   const yAxisTextStyle = props.yAxisTextStyle;
+  const yAxisLabelContainerStyle = props.yAxisLabelContainerStyle;
   const showFractionalValues = props.showFractionalValues || false;
   const yAxisLabelWidth = props.yAxisLabelWidth || 35;
   const hideYAxisText = props.hideYAxisText || false;
@@ -1467,6 +1485,7 @@ export const LineChart = (props: propTypes) => {
                         index === noOfSections ? stepHeight / 2 : stepHeight,
                       width: yAxisLabelWidth,
                     },
+                    yAxisLabelContainerStyle,
                   ]}>
                   {!hideYAxisText ? (
                     <Text
@@ -1904,9 +1923,19 @@ export const LineChart = (props: propTypes) => {
               1 +
               spacing * index
             }
-            y={containerHeight - (item.value * containerHeight) / maxValue + 9}
+            y={
+              item.verticalLineUptoDataPoint
+                ? containerHeight -
+                  (item.value * containerHeight) / maxValue +
+                  10
+                : -xAxisThickness
+            }
             width={item.verticalLineThickness || 1}
-            height={(item.value * containerHeight) / maxValue}
+            height={
+              item.verticalLineUptoDataPoint
+                ? (item.value * containerHeight) / maxValue - xAxisThickness
+                : containerHeight + 10 - xAxisThickness
+            }
             fill={item.verticalLineColor || 'lightgray'}
           />
         );
@@ -1924,6 +1953,7 @@ export const LineChart = (props: propTypes) => {
     endFillColor: string,
     startOpacity: number,
     endOpacity: number,
+    strokeDashArray: Array<number> | undefined | null,
   ) => {
     return (
       <View
@@ -1936,12 +1966,25 @@ export const LineChart = (props: propTypes) => {
           // backgroundColor: 'rgba(200,150,150,0.6)'
         }}>
         <Svg>
-          <Path
-            d={points}
-            fill="none"
-            stroke={color}
-            strokeWidth={currentLineThickness || thickness}
-          />
+          {strokeDashArray &&
+          strokeDashArray.length === 2 &&
+          typeof strokeDashArray[0] === 'number' &&
+          typeof strokeDashArray[1] === 'number' ? (
+            <Path
+              d={points}
+              fill="none"
+              stroke={color}
+              strokeWidth={currentLineThickness || thickness}
+              strokeDasharray={strokeDashArray}
+            />
+          ) : (
+            <Path
+              d={points}
+              fill="none"
+              stroke={color}
+              strokeWidth={currentLineThickness || thickness}
+            />
+          )}
 
           {/***********************      For Area Chart        ************/}
 
@@ -2067,6 +2110,7 @@ export const LineChart = (props: propTypes) => {
     endFillColor: string,
     startOpacity: number,
     endOpacity: number,
+    strokeDashArray: Array<number> | undefined | null,
   ) => {
     // console.log('animatedWidth is-------->', animatedWidth);
     return (
@@ -2080,12 +2124,25 @@ export const LineChart = (props: propTypes) => {
           // backgroundColor: 'wheat',
         }}>
         <Svg>
-          <Path
-            d={points}
-            fill="none"
-            stroke={color}
-            strokeWidth={currentLineThickness || thickness}
-          />
+          {strokeDashArray &&
+          strokeDashArray.length === 2 &&
+          typeof strokeDashArray[0] === 'number' &&
+          typeof strokeDashArray[1] === 'number' ? (
+            <Path
+              d={points}
+              fill="none"
+              stroke={color}
+              strokeWidth={currentLineThickness || thickness}
+              strokeDasharray={strokeDashArray}
+            />
+          ) : (
+            <Path
+              d={points}
+              fill="none"
+              stroke={color}
+              strokeWidth={currentLineThickness || thickness}
+            />
+          )}
 
           {/***********************      For Area Chart        ************/}
 
@@ -2250,7 +2307,10 @@ export const LineChart = (props: propTypes) => {
                 style={{
                   position: 'absolute',
                   zIndex: verticalLinesZIndex || -1,
-                  height: containerHeight + 15,
+                  marginBottom: xAxisThickness,
+                  height: verticalLinesUptoDataPoint
+                    ? (item.value * containerHeight) / maxValue - xAxisThickness
+                    : containerHeight + 15 - xAxisThickness,
                   width: verticalLinesThickness,
                   backgroundColor: verticalLinesColor,
                   bottom: 60,
@@ -2292,6 +2352,7 @@ export const LineChart = (props: propTypes) => {
               endFillColor1,
               startOpacity1,
               endOpacity1,
+              strokeDashArray1,
             )
           : renderLine(
               points,
@@ -2302,6 +2363,7 @@ export const LineChart = (props: propTypes) => {
               endFillColor1,
               startOpacity1,
               endOpacity1,
+              strokeDashArray1,
             )}
         {points2
           ? isAnimated
@@ -2315,6 +2377,7 @@ export const LineChart = (props: propTypes) => {
                 endFillColor2,
                 startOpacity2,
                 endOpacity2,
+                strokeDashArray2,
               )
             : renderLine(
                 points2,
@@ -2325,6 +2388,7 @@ export const LineChart = (props: propTypes) => {
                 endFillColor2,
                 startOpacity2,
                 endOpacity2,
+                strokeDashArray2,
               )
           : null}
         {points3
@@ -2339,6 +2403,7 @@ export const LineChart = (props: propTypes) => {
                 endFillColor3,
                 startOpacity3,
                 endOpacity3,
+                strokeDashArray3,
               )
             : renderLine(
                 points3,
@@ -2349,6 +2414,7 @@ export const LineChart = (props: propTypes) => {
                 endFillColor3,
                 startOpacity3,
                 endOpacity3,
+                strokeDashArray3,
               )
           : null}
         {points4
@@ -2363,6 +2429,7 @@ export const LineChart = (props: propTypes) => {
                 endFillColor4,
                 startOpacity4,
                 endOpacity4,
+                strokeDashArray4,
               )
             : renderLine(
                 points4,
@@ -2373,6 +2440,7 @@ export const LineChart = (props: propTypes) => {
                 endFillColor4,
                 startOpacity4,
                 endOpacity4,
+                strokeDashArray4,
               )
           : null}
         {points5
@@ -2387,6 +2455,7 @@ export const LineChart = (props: propTypes) => {
                 endFillColor5,
                 startOpacity5,
                 endOpacity5,
+                strokeDashArray5,
               )
             : renderLine(
                 points5,
@@ -2397,6 +2466,7 @@ export const LineChart = (props: propTypes) => {
                 endFillColor5,
                 startOpacity5,
                 endOpacity5,
+                strokeDashArray5,
               )
           : null}
         {data.map((item: itemType, index: number) => {