Allowed dotted/dashed lines in Line and Area charts

docs/LineChart/LineChartProps.md

@@ -173,6 +173,12 @@ type referenceConfigType = {
 | thickness3 | number     | Thickness of the lines joining the third set of data points  | thickness (from props) |
 | thickness4 | number     | Thickness of the lines joining the fourth set of data points  | thickness (from props) |
 | thickness5 | number     | Thickness of the lines joining the fifth set of data points  | thickness (from props) |
+| strokeDashArray | Array<number> | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted line chart | undefined |
+| strokeDashArray1 | Array<number> | Array of 2 numbers denoting the dashWidth and dashGap of line1. Used to render dashed/dotted line chart | undefined OR strokeDashArray |
+| strokeDashArray2 | Array<number> | Array of 2 numbers denoting the dashWidth and dashGap of line2. Used to render dashed/dotted line chart | undefined OR strokeDashArray |
+| strokeDashArray3 | Array<number> | Array of 2 numbers denoting the dashWidth and dashGap of line3. Used to render dashed/dotted line chart | undefined OR strokeDashArray |
+| strokeDashArray4 | Array<number> | Array of 2 numbers denoting the dashWidth and dashGap of line4. Used to render dashed/dotted line chart | undefined OR strokeDashArray |
+| strokeDashArray5 | Array<number> | Array of 2 numbers denoting the dashWidth and dashGap of line5. Used to render dashed/dotted line chart | undefined OR strokeDashArray |
 | startIndex | number     | Start index for data line (used to display data lines having breaks) | 0              |
 | startIndex1 | number     | Start index for data line 1 (used to display data lines having breaks) | 0              |
 | startIndex2 | number     | Start index for data line 2 (used to display data lines having breaks) | 0              |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "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/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;
@@ -1116,11 +1122,18 @@ export const LineChart = (props: propTypes) => {
   const stepValue = props.stepValue || maxValue / noOfSections;
   const noOfSectionsBelowXAxis =
     props.noOfSectionsBelowXAxis || -minValue / stepValue;
-  const thickness1 = props.thickness1;
+  const thickness1 = props.thickness1 === 0 ? 0 : props.thickness || 1;
-  const thickness2 = props.thickness2;
+  const thickness2 = props.thickness2 === 0 ? 0 : props.thickness || 1;
-  const thickness3 = props.thickness3;
+  const thickness3 = props.thickness3 === 0 ? 0 : props.thickness || 1;
-  const thickness4 = props.thickness4;
+  const thickness4 = props.thickness4 === 0 ? 0 : props.thickness || 1;
-  const thickness5 = props.thickness5;
+  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 =
@@ -1937,6 +1950,7 @@ export const LineChart = (props: propTypes) => {
     endFillColor: string,
     startOpacity: number,
     endOpacity: number,
+    strokeDashArray: Array<number> | undefined | null,
   ) => {
     return (
       <View
@@ -1949,12 +1963,25 @@ export const LineChart = (props: propTypes) => {
           // backgroundColor: 'rgba(200,150,150,0.6)'
         }}>
         <Svg>
-          <Path
+          {strokeDashArray &&
-            d={points}
+          strokeDashArray.length === 2 &&
-            fill="none"
+          typeof strokeDashArray[0] === 'number' &&
-            stroke={color}
+          typeof strokeDashArray[1] === 'number' ? (
-            strokeWidth={currentLineThickness || thickness}
+            <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        ************/}
 
@@ -2080,6 +2107,7 @@ export const LineChart = (props: propTypes) => {
     endFillColor: string,
     startOpacity: number,
     endOpacity: number,
+    strokeDashArray: Array<number> | undefined | null,
   ) => {
     // console.log('animatedWidth is-------->', animatedWidth);
     return (
@@ -2093,12 +2121,25 @@ export const LineChart = (props: propTypes) => {
           // backgroundColor: 'wheat',
         }}>
         <Svg>
-          <Path
+          {strokeDashArray &&
-            d={points}
+          strokeDashArray.length === 2 &&
-            fill="none"
+          typeof strokeDashArray[0] === 'number' &&
-            stroke={color}
+          typeof strokeDashArray[1] === 'number' ? (
-            strokeWidth={currentLineThickness || thickness}
+            <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        ************/}
 
@@ -2308,6 +2349,7 @@ export const LineChart = (props: propTypes) => {
               endFillColor1,
               startOpacity1,
               endOpacity1,
+              strokeDashArray1,
             )
           : renderLine(
               points,
@@ -2318,6 +2360,7 @@ export const LineChart = (props: propTypes) => {
               endFillColor1,
               startOpacity1,
               endOpacity1,
+              strokeDashArray1,
             )}
         {points2
           ? isAnimated
@@ -2331,6 +2374,7 @@ export const LineChart = (props: propTypes) => {
                 endFillColor2,
                 startOpacity2,
                 endOpacity2,
+                strokeDashArray2,
               )
             : renderLine(
                 points2,
@@ -2341,6 +2385,7 @@ export const LineChart = (props: propTypes) => {
                 endFillColor2,
                 startOpacity2,
                 endOpacity2,
+                strokeDashArray2,
               )
           : null}
         {points3
@@ -2355,6 +2400,7 @@ export const LineChart = (props: propTypes) => {
                 endFillColor3,
                 startOpacity3,
                 endOpacity3,
+                strokeDashArray3,
               )
             : renderLine(
                 points3,
@@ -2365,6 +2411,7 @@ export const LineChart = (props: propTypes) => {
                 endFillColor3,
                 startOpacity3,
                 endOpacity3,
+                strokeDashArray3,
               )
           : null}
         {points4
@@ -2379,6 +2426,7 @@ export const LineChart = (props: propTypes) => {
                 endFillColor4,
                 startOpacity4,
                 endOpacity4,
+                strokeDashArray4,
               )
             : renderLine(
                 points4,
@@ -2389,6 +2437,7 @@ export const LineChart = (props: propTypes) => {
                 endFillColor4,
                 startOpacity4,
                 endOpacity4,
+                strokeDashArray4,
               )
           : null}
         {points5
@@ -2403,6 +2452,7 @@ export const LineChart = (props: propTypes) => {
                 endFillColor5,
                 startOpacity5,
                 endOpacity5,
+                strokeDashArray5,
               )
             : renderLine(
                 points5,
@@ -2413,6 +2463,7 @@ export const LineChart = (props: propTypes) => {
                 endFillColor5,
                 startOpacity5,
                 endOpacity5,
+                strokeDashArray5,
               )
           : null}
         {data.map((item: itemType, index: number) => {