diff --git a/src/AbstractChart.tsx b/src/AbstractChart.tsx
index b9c45967..612ffdfb 100644
--- a/src/AbstractChart.tsx
+++ b/src/AbstractChart.tsx
@@ -30,10 +30,13 @@ export interface AbstractChartConfig extends ChartConfig {
stackedBar?: boolean;
verticalLabelRotation?: number;
formatXLabel?: (xLabel: string) => string;
+ verticalLabelsHeightPercentage?: number;
}
export type AbstractChartState = {};
+export const DEFAULT_X_LABELS_HEIGHT_PERCENTAGE = 0.75;
+
class AbstractChart<
IProps extends AbstractChartProps,
IState extends AbstractChartState
@@ -128,8 +131,15 @@ class AbstractChart<
}
renderHorizontalLines = config => {
- const { count, width, height, paddingTop, paddingRight } = config;
- const basePosition = height - height / 4;
+ const {
+ count,
+ width,
+ height,
+ paddingTop,
+ paddingRight,
+ verticalLabelsHeightPercentage = DEFAULT_X_LABELS_HEIGHT_PERCENTAGE
+ } = config;
+ const basePosition = height * verticalLabelsHeightPercentage;
return [...new Array(count + 1)].map((_, i) => {
const y = (basePosition / count) * i + paddingTop;
@@ -147,14 +157,20 @@ class AbstractChart<
};
renderHorizontalLine = config => {
- const { width, height, paddingTop, paddingRight } = config;
+ const {
+ width,
+ height,
+ paddingTop,
+ paddingRight,
+ verticalLabelsHeightPercentage = DEFAULT_X_LABELS_HEIGHT_PERCENTAGE
+ } = config;
return (
);
@@ -171,7 +187,8 @@ class AbstractChart<
paddingRight,
horizontalLabelRotation = 0,
decimalPlaces = 2,
- formatYLabel = (yLabel: string) => yLabel
+ formatYLabel = (yLabel: string) => yLabel,
+ verticalLabelsHeightPercentage = DEFAULT_X_LABELS_HEIGHT_PERCENTAGE
} = config;
const {
@@ -195,12 +212,14 @@ class AbstractChart<
)}${yAxisSuffix}`;
}
- const basePosition = height - height / 4;
+ const basePosition = height * verticalLabelsHeightPercentage;
const x = paddingRight - yLabelsOffset;
const y =
count === 1 && this.props.fromZero
? paddingTop + 4
- : (height * 3) / 4 - (basePosition / count) * i + paddingTop;
+ : height * verticalLabelsHeightPercentage -
+ (basePosition / count) * i +
+ paddingTop;
return (
xLabel
+ formatXLabel = xLabel => xLabel,
+ verticalLabelsHeightPercentage = DEFAULT_X_LABELS_HEIGHT_PERCENTAGE
}: Pick<
AbstractChartConfig,
| "labels"
@@ -239,6 +259,7 @@ class AbstractChart<
| "stackedBar"
| "verticalLabelRotation"
| "formatXLabel"
+ | "verticalLabelsHeightPercentage"
>) => {
const {
xAxisLabel = "",
@@ -264,7 +285,11 @@ class AbstractChart<
horizontalOffset) *
fac;
- const y = (height * 3) / 4 + paddingTop + fontSize * 2 + xLabelsOffset;
+ const y =
+ height * verticalLabelsHeightPercentage +
+ paddingTop +
+ fontSize * 2 +
+ xLabelsOffset;
return (
,
"data"
> & { data: number[] }) => {
@@ -312,7 +343,7 @@ class AbstractChart<
((width - paddingRight) / (data.length / yAxisInterval)) * i +
paddingRight
)}
- y2={height - height / 4 + paddingTop}
+ y2={height * verticalLabelsHeightPercentage + paddingTop}
{...this.getPropsForBackgroundLines()}
/>
);
@@ -323,14 +354,18 @@ class AbstractChart<
renderVerticalLine = ({
height,
paddingTop,
- paddingRight
- }: Pick) => (
+ paddingRight,
+ verticalLabelsHeightPercentage = DEFAULT_X_LABELS_HEIGHT_PERCENTAGE
+ }: Pick<
+ AbstractChartConfig,
+ "height" | "paddingRight" | "paddingTop" | "verticalLabelsHeightPercentage"
+ >) => (
);
diff --git a/src/StackedBarChart.tsx b/src/StackedBarChart.tsx
index 8aaee0e3..01382418 100644
--- a/src/StackedBarChart.tsx
+++ b/src/StackedBarChart.tsx
@@ -4,7 +4,8 @@ import { G, Rect, Svg, Text } from "react-native-svg";
import AbstractChart, {
AbstractChartConfig,
- AbstractChartProps
+ AbstractChartProps,
+ DEFAULT_X_LABELS_HEIGHT_PERCENTAGE
} from "./AbstractChart";
export interface StackedBarChartData {
@@ -49,6 +50,12 @@ export interface StackedBarChartProps extends AbstractChartProps {
percentile?: boolean;
+ /**
+ * Percentage of the chart height, dedicated to vertical labels
+ * (space below chart)
+ */
+ verticalLabelsHeightPercentage?: number;
+
formatYLabel?: (yLabel: string) => string;
}
@@ -77,10 +84,16 @@ class StackedBarChart extends AbstractChart<
paddingRight,
border,
colors,
- stackedBar = false
+ stackedBar = false,
+ verticalLabelsHeightPercentage
}: Pick<
Omit,
- "width" | "height" | "paddingRight" | "paddingTop" | "stackedBar"
+ | "width"
+ | "height"
+ | "paddingRight"
+ | "paddingTop"
+ | "stackedBar"
+ | "verticalLabelsHeightPercentage"
> & {
border: number;
colors: string[];
@@ -97,7 +110,7 @@ class StackedBarChart extends AbstractChart<
fac = 0.7;
}
const sum = this.props.percentile ? x.reduce((a, b) => a + b, 0) : border;
- const barsAreaHeight = (height / 4) * 3;
+ const barsAreaHeight = height * verticalLabelsHeightPercentage;
for (let z = 0; z < x.length; z++) {
h = barsAreaHeight * (x[z] / sum);
const y = barsAreaHeight - h + st;
@@ -187,6 +200,7 @@ class StackedBarChart extends AbstractChart<
segments = 4,
decimalPlaces,
percentile = false,
+ verticalLabelsHeightPercentage = DEFAULT_X_LABELS_HEIGHT_PERCENTAGE,
formatYLabel = (yLabel: string) => {
return yLabel;
},
@@ -236,7 +250,8 @@ class StackedBarChart extends AbstractChart<
{this.renderHorizontalLines({
...config,
count: segments,
- paddingTop
+ paddingTop,
+ verticalLabelsHeightPercentage
})}
@@ -248,6 +263,7 @@ class StackedBarChart extends AbstractChart<
paddingTop,
paddingRight,
decimalPlaces,
+ verticalLabelsHeightPercentage,
formatYLabel
})
: null}
@@ -260,7 +276,8 @@ class StackedBarChart extends AbstractChart<
paddingRight: paddingRight + 28,
stackedBar,
paddingTop,
- horizontalOffset: barWidth
+ horizontalOffset: barWidth,
+ verticalLabelsHeightPercentage
})
: null}
@@ -272,7 +289,8 @@ class StackedBarChart extends AbstractChart<
colors: this.props.data.barColors,
paddingTop,
paddingRight: paddingRight + 20,
- stackedBar
+ stackedBar,
+ verticalLabelsHeightPercentage
})}
{showLegend &&