diff --git a/docs/LineChart/LineChartProps.md b/docs/LineChart/LineChartProps.md index afbf597..f57968f 100644 --- a/docs/LineChart/LineChartProps.md +++ b/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 | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted line chart | undefined | +| strokeDashArray1 | Array | Array of 2 numbers denoting the dashWidth and dashGap of line1. Used to render dashed/dotted line chart | undefined OR strokeDashArray | +| strokeDashArray2 | Array | Array of 2 numbers denoting the dashWidth and dashGap of line2. Used to render dashed/dotted line chart | undefined OR strokeDashArray | +| strokeDashArray3 | Array | Array of 2 numbers denoting the dashWidth and dashGap of line3. Used to render dashed/dotted line chart | undefined OR strokeDashArray | +| strokeDashArray4 | Array | Array of 2 numbers denoting the dashWidth and dashGap of line4. Used to render dashed/dotted line chart | undefined OR strokeDashArray | +| strokeDashArray5 | Array | 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 | diff --git a/package.json b/package.json index 466ae9a..dd1a450 100644 --- a/package.json +++ b/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": [ diff --git a/src/LineChart/index.tsx b/src/LineChart/index.tsx index 34011f3..10c5a0c 100644 --- a/src/LineChart/index.tsx +++ b/src/LineChart/index.tsx @@ -49,6 +49,12 @@ type propTypes = { thickness3?: number; thickness4?: number; thickness5?: number; + strokeDashArray?: Array; + strokeDashArray1?: Array; + strokeDashArray2?: Array; + strokeDashArray3?: Array; + strokeDashArray4?: Array; + strokeDashArray5?: Array; 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 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 = @@ -1937,6 +1950,7 @@ export const LineChart = (props: propTypes) => { endFillColor: string, startOpacity: number, endOpacity: number, + strokeDashArray: Array | undefined | null, ) => { return ( { // backgroundColor: 'rgba(200,150,150,0.6)' }}> - + {strokeDashArray && + strokeDashArray.length === 2 && + typeof strokeDashArray[0] === 'number' && + typeof strokeDashArray[1] === 'number' ? ( + + ) : ( + + )} {/*********************** For Area Chart ************/} @@ -2080,6 +2107,7 @@ export const LineChart = (props: propTypes) => { endFillColor: string, startOpacity: number, endOpacity: number, + strokeDashArray: Array | undefined | null, ) => { // console.log('animatedWidth is-------->', animatedWidth); return ( @@ -2093,12 +2121,25 @@ export const LineChart = (props: propTypes) => { // backgroundColor: 'wheat', }}> - + {strokeDashArray && + strokeDashArray.length === 2 && + typeof strokeDashArray[0] === 'number' && + typeof strokeDashArray[1] === 'number' ? ( + + ) : ( + + )} {/*********************** 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) => {