diff --git a/docs/BarChart/BarChartProps.md b/docs/BarChart/BarChartProps.md
index 9f67ff4..f03119a 100644
--- a/docs/BarChart/BarChartProps.md
+++ b/docs/BarChart/BarChartProps.md
@@ -30,6 +30,7 @@
| scrollAnimation | Boolean | When set to true, scroll animation is visible when the chart automatically scrolls to the rightmost bar | true |
| initialSpacing | number | distance of the first bar from the Y axis | 40 |
| renderTooltip | Function | tooltip component appearing above the bar when it is pressed, takes item and index as parameters | null |
+| leftShiftForLastIndexTooltip | number | The distance by which the tooltip component of the last bar should shift towards left | 0 |
---
@@ -211,7 +212,8 @@ type referenceConfigType = {
| barBorderRadius | number | Border radius of the bar | 0 |
| barMarginBottom | number | margin at the bottom of the bar (above X axis) | 0 |
| barBackgroundPattern | Component | A svg component containing the background pattern for bars | \_ |
-| patternId | String | ID of the pattern component | \_ |
+| patternId | String | ID of the pattern component | \_ |
+| minHeight | number | Minimum height of the Bars | 0 |
---
diff --git a/package.json b/package.json
index 5a288ff..318052d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-native-gifted-charts",
- "version": "1.2.36",
+ "version": "1.2.37",
"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/Animated2DWithGradient.tsx b/src/BarChart/Animated2DWithGradient.tsx
index 87ae9cc..0865c16 100644
--- a/src/BarChart/Animated2DWithGradient.tsx
+++ b/src/BarChart/Animated2DWithGradient.tsx
@@ -17,6 +17,7 @@ if (Platform.OS === 'android') {
type propTypes = {
item: itemType;
height: number;
+ minHeight: number;
opacity?: number;
animationDuration: number;
roundedTop: Boolean;
@@ -119,8 +120,11 @@ const Animated2DWithGradient = (props: propTypes) => {
width: '100%',
height:
(noAnimation
- ? (Math.abs(item.value) * (containerHeight || 200)) /
- (maxValue || 200)
+ ? Math.max(
+ props.minHeight,
+ (Math.abs(item.value) * (containerHeight || 200)) /
+ (maxValue || 200),
+ )
: height) - (barMarginBottom || 0),
}}>
{
width: '100%',
height:
(noAnimation
- ? (Math.abs(item.value) * (containerHeight || 200)) /
- (maxValue || 200)
+ ? Math.max(
+ props.minHeight,
+ (Math.abs(item.value) * (containerHeight || 200)) /
+ (maxValue || 200),
+ )
: height) - (barMarginBottom || 0),
}}>
{noGradient ? (
diff --git a/src/BarChart/RenderBars.tsx b/src/BarChart/RenderBars.tsx
index 955f6ea..65f707a 100644
--- a/src/BarChart/RenderBars.tsx
+++ b/src/BarChart/RenderBars.tsx
@@ -11,6 +11,7 @@ type Props = {
style?: any;
width?: number;
height?: number;
+ minHeight?: number;
color?: ColorValue;
showGradient?: Boolean;
gradientColor?: any;
@@ -63,6 +64,7 @@ type Props = {
onPress?: Function;
xAxisTextNumberOfLines: number;
renderTooltip: Function;
+ leftShiftForLastIndexTooltip: number;
initialSpacing: number;
selectedIndex: number;
setSelectedIndex: Function;
@@ -100,6 +102,7 @@ const RenderBars = (props: Props) => {
index,
containerHeight,
maxValue,
+ minHeight,
spacing,
propSpacing,
side,
@@ -117,6 +120,7 @@ const RenderBars = (props: Props) => {
labelTextStyle,
xAxisTextNumberOfLines,
renderTooltip,
+ leftShiftForLastIndexTooltip,
initialSpacing,
selectedIndex,
setSelectedIndex,
@@ -324,12 +328,14 @@ const RenderBars = (props: Props) => {
);
};
- const barHeight =
+ const barHeight = Math.max(
+ minHeight,
(item.value >= 0 && (!isThreeD || isAnimated) && item.topLabelComponent
? (item.topLabelComponentHeight || 30) +
(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)
: (Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)) -
- barMarginBottom;
+ barMarginBottom,
+ );
let leftSpacing = initialSpacing;
for (let i = 0; i < index; i++) {
@@ -424,11 +430,12 @@ const RenderBars = (props: Props) => {
topLabelComponent={item.topLabelComponent}
opacity={opacity || 1}
animationDuration={animationDuration || 800}
- height={
+ height={Math.max(
+ minHeight,
(Math.abs(item.value) * (containerHeight || 200)) /
(maxValue || 200) -
- barMarginBottom
- }
+ barMarginBottom,
+ )}
intactTopLabel={props.intactTopLabel}
horizontal={props.horizontal}
/>
@@ -457,11 +464,12 @@ const RenderBars = (props: Props) => {
opacity={opacity || 1}
horizontal={props.horizontal}
intactTopLabel={props.intactTopLabel}
- height={
+ height={Math.max(
+ minHeight,
(Math.abs(item.value) * (containerHeight || 200)) /
(maxValue || 200) -
- barMarginBottom
- }
+ barMarginBottom,
+ )}
value={item.value}
/>
)
@@ -480,10 +488,12 @@ const RenderBars = (props: Props) => {
frontColor={props.frontColor || 'black'}
containerHeight={containerHeight}
maxValue={maxValue}
- height={
+ height={Math.max(
+ minHeight,
(Math.abs(item.value) * (containerHeight || 200)) /
- (maxValue || 200)
- }
+ (maxValue || 200),
+ )}
+ minHeight={minHeight}
barMarginBottom={barMarginBottom}
cappedBars={props.cappedBars}
capThickness={props.capThickness}
@@ -511,10 +521,12 @@ const RenderBars = (props: Props) => {
frontColor={props.frontColor || 'black'}
containerHeight={containerHeight}
maxValue={maxValue}
- height={
+ height={Math.max(
+ minHeight,
(Math.abs(item.value) * (containerHeight || 200)) /
- (maxValue || 200)
- }
+ (maxValue || 200),
+ )}
+ minHeight={minHeight}
barMarginBottom={barMarginBottom}
cappedBars={props.cappedBars}
capThickness={props.capThickness}
@@ -540,10 +552,12 @@ const RenderBars = (props: Props) => {
frontColor={props.frontColor || 'black'}
containerHeight={containerHeight}
maxValue={maxValue}
- height={
+ height={Math.max(
+ minHeight,
(Math.abs(item.value) * (containerHeight || 200)) /
- (maxValue || 200)
- }
+ (maxValue || 200),
+ )}
+ minHeight={minHeight}
barMarginBottom={barMarginBottom}
cappedBars={props.cappedBars}
capThickness={props.capThickness}
@@ -563,7 +577,10 @@ const RenderBars = (props: Props) => {
style={{
position: 'absolute',
bottom: barHeight + 60,
- left: leftSpacing,
+ left:
+ index === data.length - 1
+ ? leftSpacing - leftShiftForLastIndexTooltip
+ : leftSpacing,
zIndex: 1000,
}}>
{renderTooltip(item, index)}
diff --git a/src/BarChart/RenderStackBars.tsx b/src/BarChart/RenderStackBars.tsx
index 3ceb199..9115a5d 100644
--- a/src/BarChart/RenderStackBars.tsx
+++ b/src/BarChart/RenderStackBars.tsx
@@ -24,6 +24,7 @@ type Props = {
propSpacing?: number;
data?: any;
barWidth?: number;
+ onPress?: Function;
rotateLabel?: Boolean;
showXAxisIndices: Boolean;
@@ -38,6 +39,7 @@ type Props = {
patternId?: String;
xAxisTextNumberOfLines: number;
renderTooltip: Function;
+ leftShiftForLastIndexTooltip: number;
initialSpacing: number;
selectedIndex: number;
setSelectedIndex: Function;
@@ -85,11 +87,13 @@ const RenderStackBars = (props: Props) => {
labelTextStyle,
xAxisTextNumberOfLines,
renderTooltip,
+ leftShiftForLastIndexTooltip,
initialSpacing,
selectedIndex,
setSelectedIndex,
activeOpacity,
stackData,
+ data,
} = props;
let leftSpacing = initialSpacing;
for (let i = 0; i < index; i++) {
@@ -144,7 +148,7 @@ const RenderStackBars = (props: Props) => {
0,
);
- const static2DSimple = (item: itemType) => {
+ const static2DSimple = (item: itemType, index: number) => {
const cotainsNegative = item.stacks.some(item => item.value < 0);
return (
<>
@@ -155,6 +159,8 @@ const RenderStackBars = (props: Props) => {
setSelectedIndex(index);
if (item.onPress) {
item.onPress();
+ } else if (props.onPress) {
+ props.onPress(item, index);
}
}}
style={[
@@ -186,7 +192,8 @@ const RenderStackBars = (props: Props) => {
(Math.abs(stackItem.value) * (containerHeight || 200)) /
(maxValue || 200) -
(stackItem.marginBottom || 0),
- backgroundColor: stackItem.color || item.color || props.color || 'black',
+ backgroundColor:
+ stackItem.color || item.color || props.color || 'black',
borderRadius:
stackItem.borderRadius || props.barBorderRadius || 0,
},
@@ -312,7 +319,7 @@ const RenderStackBars = (props: Props) => {
}}
/>
)}
- {static2DSimple(item)}
+ {static2DSimple(item, index)}
{renderLabel(label || '', labelTextStyle)}
{renderTooltip && selectedIndex === index && (
@@ -320,7 +327,10 @@ const RenderStackBars = (props: Props) => {
style={{
position: 'absolute',
bottom: totalHeight + 60,
- left: leftSpacing,
+ left:
+ index === data.length - 1
+ ? leftSpacing - leftShiftForLastIndexTooltip
+ : leftSpacing,
zIndex: 1000,
}}>
{renderTooltip(item, index)}
diff --git a/src/BarChart/index.tsx b/src/BarChart/index.tsx
index cf96f75..5184704 100644
--- a/src/BarChart/index.tsx
+++ b/src/BarChart/index.tsx
@@ -24,6 +24,7 @@ import Svg, {Circle, Path, Rect, Text as CanvasText} from 'react-native-svg';
type PropTypes = {
width?: number;
height?: number;
+ minHeight?: number;
noOfSections?: number;
noOfSectionsBelowXAxis?: number;
maxValue?: number;
@@ -143,6 +144,7 @@ type PropTypes = {
barMarginBottom?: number;
onPress?: Function;
renderTooltip?: Function;
+ leftShiftForLastIndexTooltip?: number;
};
type lineConfigType = {
initialSpacing?: number;
@@ -1506,6 +1508,7 @@ export const BarChart = (props: PropTypes) => {
stackData={props.stackData}
item={item}
index={index}
+ data={data}
containerHeight={containerHeight}
maxValue={maxValue}
spacing={item.spacing === 0 ? 0 : item.spacing || spacing}
@@ -1536,8 +1539,12 @@ export const BarChart = (props: PropTypes) => {
labelTextStyle={
item.labelTextStyle || props.xAxisLabelTextStyle
}
+ onPress={props.onPress}
xAxisTextNumberOfLines={xAxisTextNumberOfLines}
renderTooltip={props.renderTooltip}
+ leftShiftForLastIndexTooltip={
+ props.leftShiftForLastIndexTooltip || 0
+ }
initialSpacing={initialSpacing}
selectedIndex={selectedIndex}
setSelectedIndex={setSelectedIndex}
@@ -1556,6 +1563,7 @@ export const BarChart = (props: PropTypes) => {
propSpacing={spacing}
side={side}
data={data}
+ minHeight={props.minHeight || 0}
barWidth={props.barWidth}
sideWidth={props.sideWidth}
labelWidth={labelWidth}
@@ -1602,6 +1610,9 @@ export const BarChart = (props: PropTypes) => {
onPress={props.onPress}
xAxisTextNumberOfLines={xAxisTextNumberOfLines}
renderTooltip={props.renderTooltip}
+ leftShiftForLastIndexTooltip={
+ props.leftShiftForLastIndexTooltip || 0
+ }
initialSpacing={initialSpacing}
selectedIndex={selectedIndex}
setSelectedIndex={setSelectedIndex}
diff --git a/src/Components/AnimatedBar/index.tsx b/src/Components/AnimatedBar/index.tsx
index 7609936..1b46a03 100644
--- a/src/Components/AnimatedBar/index.tsx
+++ b/src/Components/AnimatedBar/index.tsx
@@ -145,7 +145,7 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
{