From 42658e11deab462be7b6906e7551b290abd1d866 Mon Sep 17 00:00:00 2001 From: Abhinandan-Kushwaha Date: Sat, 7 May 2022 08:19:10 +0530 Subject: [PATCH] Added yAxisTextNumberOfLines and xAxisTextNumberOfLines to Bar, Line and Area charts --- docs/BarChart/BarChartProps.md | 2 ++ docs/LineChart/LineChartProps.md | 2 ++ package.json | 2 +- src/BarChart/RenderBars.tsx | 6 ++++-- src/BarChart/RenderStackBars.tsx | 4 +++- src/BarChart/index.tsx | 10 ++++++++-- src/LineChart/index.tsx | 12 ++++++++---- 7 files changed, 28 insertions(+), 10 deletions(-) diff --git a/docs/BarChart/BarChartProps.md b/docs/BarChart/BarChartProps.md index 341a5bd..22f3bc7 100644 --- a/docs/BarChart/BarChartProps.md +++ b/docs/BarChart/BarChartProps.md @@ -118,6 +118,7 @@ The properties of this line chart can be controlled using the `lineConfig` prop | yAxisThickness | number | Y axis thickness | 1 | | yAxisLabelWidth | number | Width of the Y axis Label container | 35 | | yAxisTextStyle | object | Style object for the Y axis text style | \_ | +| yAxisTextNumberOfLines | number | Number of lines for y axis label text | 1 | | yAxisLabelContainerStyle | object | Style object for the Y axis label container | \_ | | horizontalRulesStyle | object | Style object for the horizontal rules container | \_ | | showFractionalValues | Boolean | Allow fractional values for the Y axis label | false | @@ -160,6 +161,7 @@ The properties of this line chart can be controlled using the `lineConfig` prop | 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 | +| xAxisTextNumberOfLines | number | Number of lines for x axis label text | 1 | | labelsExtraHeight | number | used to display large labels on X-axis (often rotated to show vertically) | 0 | **Note** If you are setting yAxisSide to 'right', make sure to specify the width of the chart, using the `width` prop diff --git a/docs/LineChart/LineChartProps.md b/docs/LineChart/LineChartProps.md index 3f85833..7c747dd 100644 --- a/docs/LineChart/LineChartProps.md +++ b/docs/LineChart/LineChartProps.md @@ -99,6 +99,7 @@ When you are using the `dataPointLabelComponent`, make sure to provide the `data | yAxisThickness | number | Y axis thickness | 1 | | yAxisLabelWidth | number | Width of the Y axis Label container | 35 | | yAxisTextStyle | object | Style object for the Y axis text style | \_ | +| yAxisTextNumberOfLines | number | Number of lines for y axis label text | 1 | | yAxisLabelContainerStyle | object | Style object for the Y axis label container | \_ | | yAxisOffset | number | Starting value on Y Axis | 0 | | horizontalRulesStyle | object | Style object for the horizontal rules container | \_ | @@ -146,6 +147,7 @@ When you are using the `dataPointLabelComponent`, make sure to provide the `data | yAxisLabelTexts | Array | Array of label texts to be displayed along y axis | null | | xAxisLabelTexts | Array | Array of label texts to be displayed below x axis | null | | xAxisLabelTextStyle | object | Style of label texts to be displayed below x axis | null | +| xAxisTextNumberOfLines | number | Number of lines for x axis label text | 1 | | 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 | diff --git a/package.json b/package.json index 649d6ae..ba0be1c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-gifted-charts", - "version": "1.2.16", + "version": "1.2.17", "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/BarChart/RenderBars.tsx b/src/BarChart/RenderBars.tsx index cf379c5..1a18a77 100644 --- a/src/BarChart/RenderBars.tsx +++ b/src/BarChart/RenderBars.tsx @@ -64,6 +64,7 @@ type Props = { patternId?: String; barMarginBottom?: number; onPress?: Function; + xAxisTextNumberOfLines: number; }; type itemType = { value?: number; @@ -112,6 +113,7 @@ const RenderBars = (props: Props) => { autoShiftLabels, label, labelTextStyle, + xAxisTextNumberOfLines, } = props; const barMarginBottom = @@ -161,7 +163,7 @@ const RenderBars = (props: Props) => { ) : ( + numberOfLines={xAxisTextNumberOfLines}> {label || ''} )} @@ -204,7 +206,7 @@ const RenderBars = (props: Props) => { ) : ( + numberOfLines={xAxisTextNumberOfLines}> {label || ''} )} diff --git a/src/BarChart/RenderStackBars.tsx b/src/BarChart/RenderStackBars.tsx index d1afdf6..ff121f0 100644 --- a/src/BarChart/RenderStackBars.tsx +++ b/src/BarChart/RenderStackBars.tsx @@ -38,6 +38,7 @@ type Props = { xAxisThickness: number; barBackgroundPattern?: Function; patternId?: String; + xAxisTextNumberOfLines: number; }; type itemType = { value?: number; @@ -69,6 +70,7 @@ const RenderStackBars = (props: Props) => { xAxisThickness, label, labelTextStyle, + xAxisTextNumberOfLines, } = props; const disablePress = props.disablePress || false; const renderLabel = (label: String, labelTextStyle: any) => { @@ -92,7 +94,7 @@ const RenderStackBars = (props: Props) => { {item.labelComponent ? ( item.labelComponent() ) : ( - + {label || ''} )} diff --git a/src/BarChart/index.tsx b/src/BarChart/index.tsx index e22c1ae..be78240 100644 --- a/src/BarChart/index.tsx +++ b/src/BarChart/index.tsx @@ -47,6 +47,8 @@ type PropTypes = { yAxisLabelContainerStyle?: any; horizontalRulesStyle?: any; yAxisTextStyle?: any; + yAxisTextNumberOfLines?: number; + xAxisTextNumberOfLines?: number; yAxisLabelWidth?: number; hideYAxisText?: Boolean; yAxisSide?: string; @@ -372,6 +374,8 @@ export const BarChart = (props: PropTypes) => { : props.yAxisThickness || 1; const yAxisColor = props.yAxisColor || 'black'; const yAxisTextStyle = props.yAxisTextStyle; + const yAxisTextNumberOfLines = props.yAxisTextNumberOfLines || 1; + const xAxisTextNumberOfLines = props.xAxisTextNumberOfLines || 1; const yAxisLabelContainerStyle = props.yAxisLabelContainerStyle; const horizontalRulesStyle = props.horizontalRulesStyle; const showFractionalValues = props.showFractionalValues || false; @@ -768,7 +772,7 @@ export const BarChart = (props: PropTypes) => { yAxisLabelContainerStyle, ]}> { yAxisLabelContainerStyle, ]}> { labelTextStyle={ item.labelTextStyle || props.xAxisLabelTextStyle } + xAxisTextNumberOfLines={xAxisTextNumberOfLines} /> ); }) @@ -1460,6 +1465,7 @@ export const BarChart = (props: PropTypes) => { item.labelTextStyle || props.xAxisLabelTextStyle } onPress={props.onPress} + xAxisTextNumberOfLines={xAxisTextNumberOfLines} /> ))} diff --git a/src/LineChart/index.tsx b/src/LineChart/index.tsx index 0f0a173..46457ec 100644 --- a/src/LineChart/index.tsx +++ b/src/LineChart/index.tsx @@ -154,6 +154,8 @@ type propTypes = { yAxisLabelContainerStyle?: any; horizontalRulesStyle?: any; yAxisTextStyle?: any; + yAxisTextNumberOfLines?: number; + xAxisTextNumberOfLines?: number; showFractionalValues?: Boolean; roundToDigits?: number; yAxisLabelWidth?: number; @@ -1386,6 +1388,8 @@ export const LineChart = (props: propTypes) => { props.yAxisThickness === 0 ? 0 : props.yAxisThickness || 1; const yAxisColor = props.yAxisColor || 'black'; const yAxisTextStyle = props.yAxisTextStyle; + const yAxisTextNumberOfLines = props.yAxisTextNumberOfLines || 1; + const xAxisTextNumberOfLines = props.xAxisTextNumberOfLines || 1; const yAxisLabelContainerStyle = props.yAxisLabelContainerStyle; const horizontalRulesStyle = props.horizontalRulesStyle; const showFractionalValues = props.showFractionalValues || false; @@ -1681,7 +1685,7 @@ export const LineChart = (props: propTypes) => { ) : ( + numberOfLines={xAxisTextNumberOfLines}> {label || ''} )} @@ -1719,7 +1723,7 @@ export const LineChart = (props: propTypes) => { ) : ( + numberOfLines={xAxisTextNumberOfLines}> {label || ''} )} @@ -1899,7 +1903,7 @@ export const LineChart = (props: propTypes) => { yAxisLabelContainerStyle, ]}> { yAxisLabelContainerStyle, ]}>