diff --git a/docs/BarChart/BarChartProps.md b/docs/BarChart/BarChartProps.md index 2f65bfcb..66491e16 100644 --- a/docs/BarChart/BarChartProps.md +++ b/docs/BarChart/BarChartProps.md @@ -336,7 +336,7 @@ The properties of this line chart can be controlled using the `lineConfig` prop | xAxisTextNumberOfLines | number | Number of lines for x axis label text | 1 | | xAxisLabelsHeight | number | Height of X axis labels container | xAxisTextNumberOfLines \* 18 | | xAxisLabelsVerticalShift | number | prop to adjust the vertical position of X axis labels (move X axis labels up or down) | 0 | -| labelsExtraHeight | number | used to display large rotated labels on X-axis (use this only when using the **rotateLabel** prop) | 0 | +| labelsExtraHeight | number | used to display large rotated labels on X-axis (useful when using the **rotateLabel** prop) | 0 | | secondaryYAxis | secondaryYAxisType | displays and controls the properties of the secondary Y axis on the right side | null | | secondaryData | Array of items | the secondary data that will be rendered along the secondary Y axis | undefined | | secondaryXAxis | XAxisConfig | properties of the secondary X-axis (appearing at the top of the chart) | values of the primary X-axis | diff --git a/docs/LineChart/LineChartProps.md b/docs/LineChart/LineChartProps.md index 48573323..1a2f2860 100644 --- a/docs/LineChart/LineChartProps.md +++ b/docs/LineChart/LineChartProps.md @@ -710,6 +710,8 @@ type Pointer = { strokeDashArray?: Array; barTouchable?: boolean; //default : false (only applicable to bar charts having pointerConfig) pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto'; // default: "none + dynamicLegendComponent?: Function; // default null + dynamicLegendContainerStyle?: Style object; // default null }; ``` @@ -744,6 +746,16 @@ When the chart is released, it returns the index -1.
When using pointers with dataSet, you can set pointer colors on each data line using the pointerColorsForDataSet which is an array of color values. +#### dynamicLegendComponent + +`dynamicLegendComponent` is a property inside the **pointerConfig** prop, very similar to `pointerLabelComponent`, the only difference is that it is stationary whereas _pointerLabelComponent_ moves as the pointer moves. You can set the position of the `dynamicLegendComponent` using the **`dynamicLegendContainerStyle`** property in the _pointerConfig_

+You are supposed to assign a callback function to `dynamicLegendComponent`. The callback function receives 2 parameters- +1. Array of currently selected items (in case you are rendering a single line, the array will have a single item) +2. Index of the selected item. +
+ +**Note:** The legend component appears only as long as the pointer remains remains on the screen. To make the dynamic legend remain persistently on the screen, you can set the `persistPointer` property to true. The `initialPointerIndex` property can also be useful. + ### onFocus and strip related props Line or Area charts can be made interactive by allowing users to press on the chart and highlight that particular data point. For example- diff --git a/release-notes/release-notes.md b/release-notes/release-notes.md index 11a104d8..a2a74085 100644 --- a/release-notes/release-notes.md +++ b/release-notes/release-notes.md @@ -1,3 +1,30 @@ +# 🎉 1.4.40 + +## ✨ Features added- + +Added the properties `dynamicLegendComponent` and `dynamicLegendContainerStyle` inside the **_pointerConfig_** object.
+
+ +**dynamicLegendComponent** is a property inside the **pointerConfig** prop, very similar to `pointerLabelComponent`, the only difference is that it is stationary whereas _pointerLabelComponent_ moves as the pointer moves. You can set the position of the _dynamicLegendComponent_ using the **`dynamicLegendContainerStyle`** property inside _pointerConfig_

+You are supposed to assign a callback function to **dynamicLegendComponent**. The callback function receives 2 parameters- + 1. Array of currently selected items (in case you are rendering a single line, the array will have a single item) + 2. Index of the selected item. +
+ +**Note:** The legend component appears only as long as the pointer remains remains on the screen. To make the dynamic legend remain persistently on the screen, you can set the `persistPointer` property to true. The `initialPointerIndex` property can also be useful. + +## 🐛 Bug fixes + +1. Fixed the issue- `autoShiftLabels` not working properly. See https://gifted-charts.web.app/barchart/#xAxisShift + +2. Fixed the issue- "Bar alignment issue when using the `labelsExtraHeight` prop." See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/839 + +--- + +--- + +--- + # 🎉 1.4.39 ## 🐛 Bug fixes diff --git a/src/BarChart/RenderBars.tsx b/src/BarChart/RenderBars.tsx index 1f28fc8f..385dcd06 100644 --- a/src/BarChart/RenderBars.tsx +++ b/src/BarChart/RenderBars.tsx @@ -127,9 +127,13 @@ const RenderBars = (props: RenderBarsPropsType) => { ? -40 : -6 - xAxisTextNumberOfLines * 18 - - xAxisLabelsVerticalShift) - + (value < 0 + ? -xAxisLabelsVerticalShift + : xAxisLabelsVerticalShift)) - barMarginBottom - - labelsDistanceFromXaxis, + (value < 0 && !autoShiftLabels + ? -labelsDistanceFromXaxis + : labelsDistanceFromXaxis), }, rotateLabel ? horizontal @@ -150,7 +154,7 @@ const RenderBars = (props: RenderBarsPropsType) => { { translateY: autoShiftLabels ? 0 - : 16.5 * xAxisTextNumberOfLines + 14, + : 16.5 * xAxisTextNumberOfLines + 12, }, ], } diff --git a/src/BarChart/index.tsx b/src/BarChart/index.tsx index 1cddda4b..06f54fe8 100644 --- a/src/BarChart/index.tsx +++ b/src/BarChart/index.tsx @@ -182,7 +182,7 @@ export const BarChart = (props: BarChartPropsType) => { const contentContainerStyle: ViewStyle = { position: 'absolute', height: containerHeightIncludingBelowXAxis, - bottom: 60, + bottom: 60 + labelsExtraHeight, paddingLeft: initialSpacing, width: totalWidth, flexDirection: 'row', @@ -297,7 +297,7 @@ export const BarChart = (props: BarChartPropsType) => { position: 'absolute', height: extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight, - bottom: xAxisLabelsVerticalShift + labelsExtraHeight, + bottom: xAxisLabelsVerticalShift, width: totalWidth, }}> {renderStripAndLabel(null)} @@ -311,7 +311,7 @@ export const BarChart = (props: BarChartPropsType) => { position: 'absolute', height: extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight, - bottom: xAxisLabelsVerticalShift + labelsExtraHeight, + bottom: xAxisLabelsVerticalShift, width: totalWidth, zIndex: 20, }}> diff --git a/src/LineChart/index.tsx b/src/LineChart/index.tsx index 6711ea67..aaa554b5 100644 --- a/src/LineChart/index.tsx +++ b/src/LineChart/index.tsx @@ -2287,6 +2287,26 @@ export const LineChart = (props: LineChartPropsType) => { ); })} + {pointerConfig?.dynamicLegendComponent && pointerX > 0 ? ( + + {pointerConfig.dynamicLegendComponent( + dataSet + ? pointerItemsForSet + : [ + pointerItem, + pointerItem2, + pointerItem3, + pointerItem4, + pointerItem5, + ].filter(item => !!item), + pointerIndex, + )} + + ) : null} ); };