This patch solved the above problems. I optionally added a max height to bars too
diff --git a/node_modules/react-native-chart-kit/dist/AbstractChart.d.ts b/node_modules/react-native-chart-kit/dist/AbstractChart.d.ts
index 337e1ef..1975a5e 100644
--- a/node_modules/react-native-chart-kit/dist/AbstractChart.d.ts
+++ b/node_modules/react-native-chart-kit/dist/AbstractChart.d.ts
@@ -28,6 +28,11 @@ export interface AbstractChartConfig extends ChartConfig {
formatXLabel?: (xLabel: string) => string;
verticalLabelsHeightPercentage?: number;
formatTopBarValue?: (topBarValue: number) => string | number;
+ topLabelFontFamily?: string;
+ topLabelFontSize?: number | string;
+ topLabelColor?: string;
+ maxBarHeightPx?: number;
+ maxBarHeightPercent?: number;
}
export declare type AbstractChartState = {};
export declare const DEFAULT_X_LABELS_HEIGHT_PERCENTAGE = 0.75;
diff --git a/node_modules/react-native-chart-kit/dist/BarChart.d.ts b/node_modules/react-native-chart-kit/dist/BarChart.d.ts
index fe6c012..fae9bbf 100644
--- a/node_modules/react-native-chart-kit/dist/BarChart.d.ts
+++ b/node_modules/react-native-chart-kit/dist/BarChart.d.ts
@@ -30,6 +30,7 @@ export interface BarChartProps extends AbstractChartProps {
showValuesOnTopOfBars?: boolean;
withCustomBarColorFromData?: boolean;
flatColor?: boolean;
+ horizontalOffsetFactor?: number;
}
declare type BarChartState = {};
declare class BarChart extends AbstractChart<BarChartProps, BarChartState> {
diff --git a/node_modules/react-native-chart-kit/dist/BarChart.js b/node_modules/react-native-chart-kit/dist/BarChart.js
index dabc147..4796c0a 100644
--- a/node_modules/react-native-chart-kit/dist/BarChart.js
+++ b/node_modules/react-native-chart-kit/dist/BarChart.js
@@ -38,26 +38,87 @@ var BarChart = /** @class */ (function (_super) {
_this.renderBars = function (_a) {
var data = _a.data, width = _a.width, height = _a.height, paddingTop = _a.paddingTop, paddingRight = _a.paddingRight, barRadius = _a.barRadius, withCustomBarColorFromData = _a.withCustomBarColorFromData;
var baseHeight = _this.calcBaseHeight(data, height);
+
+ // compute optional max bar height from chartConfig
+ var drawableHeight = Math.max(0, height - (paddingTop || 0));
+ var cfg = _this.props && _this.props.chartConfig ? _this.props.chartConfig : {};
+ var maxBarHeightPx = cfg.maxBarHeightPx;
+ var maxBarHeightPercent = cfg.maxBarHeightPercent;
+ var maxBarHeight = undefined;
+ if (typeof maxBarHeightPx === "number" && !isNaN(maxBarHeightPx)) {
+ maxBarHeight = Math.max(0, maxBarHeightPx);
+ }
+ else if (typeof maxBarHeightPercent === "number" && !isNaN(maxBarHeightPercent)) {
+ maxBarHeight = Math.max(0, Math.min(1, maxBarHeightPercent)) * drawableHeight;
+ }
+
return data.map(function (x, i) {
- var barHeight = _this.calcHeight(x, data, height);
+ // original computed height (may be > drawable space)
+ var rawBarHeight = _this.calcHeight(x, data, height);
+ // preserve sign (if negative values support)
+ var sign = rawBarHeight >= 0 ? 1 : -1;
+ var absRaw = Math.abs(rawBarHeight);
+ var clampedAbs = typeof maxBarHeight === "number" ? Math.min(absRaw, maxBarHeight) : absRaw;
+ var barHeight = clampedAbs * sign;
+
var barWidth = 32 * _this.getBarPercentage();
- return (<Rect key={Math.random()} x={paddingRight +
+ var xPos = paddingRight +
(i * (width - paddingRight)) / data.length +
- barWidth / 2} y={((barHeight > 0 ? baseHeight - barHeight : baseHeight) / 4) * 3 +
- paddingTop} rx={barRadius} width={barWidth} height={(Math.abs(barHeight) / 4) * 3} fill={withCustomBarColorFromData
+ barWidth / 2;
+ var yPos = ((barHeight > 0 ? baseHeight - barHeight : baseHeight) / 4) * 3 +
+ paddingTop;
+
+ var rectFill = withCustomBarColorFromData
? "url(#customColor_0_" + i + ")"
- : "url(#fillShadowGradientFrom)"}/>);
+ : "url(#fillShadowGradientFrom)";
+
+ return (<Rect
+ key={"bar-" + i + "-" + (data[i] !== undefined ? String(data[i]) : i)}
+ x={xPos}
+ y={yPos}
+ rx={barRadius}
+ width={barWidth}
+ height={(Math.abs(barHeight) / 4) * 3}
+ fill={rectFill}
+ />);
});
};
_this.renderBarTops = function (_a) {
var data = _a.data, width = _a.width, height = _a.height, paddingTop = _a.paddingTop, paddingRight = _a.paddingRight;
var baseHeight = _this.calcBaseHeight(data, height);
+
+ var drawableHeight = Math.max(0, height - (paddingTop || 0));
+ var cfg = _this.props && _this.props.chartConfig ? _this.props.chartConfig : {};
+ var maxBarHeightPx = cfg.maxBarHeightPx;
+ var maxBarHeightPercent = cfg.maxBarHeightPercent;
+ var maxBarHeight = undefined;
+ if (typeof maxBarHeightPx === "number" && !isNaN(maxBarHeightPx)) {
+ maxBarHeight = Math.max(0, maxBarHeightPx);
+ }
+ else if (typeof maxBarHeightPercent === "number" && !isNaN(maxBarHeightPercent)) {
+ maxBarHeight = Math.max(0, Math.min(1, maxBarHeightPercent)) * drawableHeight;
+ }
+
return data.map(function (x, i) {
- var barHeight = _this.calcHeight(x, data, height);
+ var rawBarHeight = _this.calcHeight(x, data, height);
+ var sign = rawBarHeight >= 0 ? 1 : -1;
+ var absRaw = Math.abs(rawBarHeight);
+ var clampedAbs = typeof maxBarHeight === "number" ? Math.min(absRaw, maxBarHeight) : absRaw;
+ var barHeight = clampedAbs * sign;
+
var barWidth = 32 * _this.getBarPercentage();
- return (<Rect key={Math.random()} x={paddingRight +
+ var xPos = paddingRight +
(i * (width - paddingRight)) / data.length +
- barWidth / 2} y={((baseHeight - barHeight) / 4) * 3 + paddingTop} width={barWidth} height={2} fill={_this.props.chartConfig.color(0.6)}/>);
+ barWidth / 2;
+ var yPos = ((baseHeight - barHeight) / 4) * 3 + paddingTop;
+ return (<Rect
+ key={"bartop-" + i + "-" + (data[i] !== undefined ? String(data[i]) : i)}
+ x={xPos}
+ y={yPos}
+ width={barWidth}
+ height={2}
+ fill={_this.props.chartConfig && _this.props.chartConfig.color ? _this.props.chartConfig.color(0.6) : "#000"}
+ />);
});
};
_this.renderColors = function (_a) {
@@ -79,30 +140,74 @@ var BarChart = /** @class */ (function (_super) {
_this.renderValuesOnTopOfBars = function (_a) {
var data = _a.data, width = _a.width, height = _a.height, paddingTop = _a.paddingTop, paddingRight = _a.paddingRight;
var baseHeight = _this.calcBaseHeight(data, height);
- var renderLabel = function (value) {
- if (_this.props.chartConfig.formatTopBarValue) {
- return _this.props.chartConfig.formatTopBarValue(value);
+
+ var cfg = _this.props && _this.props.chartConfig ? _this.props.chartConfig : {};
+ var renderLabel = function (value, index) {
+ if (cfg.formatTopBarValue) {
+ try {
+ return cfg.formatTopBarValue(value, index);
+ }
+ catch (e) {
+ return value;
+ }
}
else {
return value;
}
};
+
+ // styling fallbacks
+ var topLabelFontFamily = cfg.topLabelFontFamily || undefined;
+ var topLabelFontSize = typeof cfg.topLabelFontSize !== "undefined" ? String(cfg.topLabelFontSize) : "12";
+ var topLabelColor = cfg.topLabelColor || (cfg.color ? cfg.color(0.6) : "#000");
+
+ var drawableHeight = Math.max(0, height - (paddingTop || 0));
+ var maxBarHeightPx = cfg.maxBarHeightPx;
+ var maxBarHeightPercent = cfg.maxBarHeightPercent;
+ var maxBarHeight = undefined;
+ if (typeof maxBarHeightPx === "number" && !isNaN(maxBarHeightPx)) {
+ maxBarHeight = Math.max(0, maxBarHeightPx);
+ }
+ else if (typeof maxBarHeightPercent === "number" && !isNaN(maxBarHeightPercent)) {
+ maxBarHeight = Math.max(0, Math.min(1, maxBarHeightPercent)) * drawableHeight;
+ }
+
return data.map(function (x, i) {
- var barHeight = _this.calcHeight(x, data, height);
+ var rawBarHeight = _this.calcHeight(x, data, height);
+ var sign = rawBarHeight >= 0 ? 1 : -1;
+ var absRaw = Math.abs(rawBarHeight);
+ var clampedAbs = typeof maxBarHeight === "number" ? Math.min(absRaw, maxBarHeight) : absRaw;
+ var barHeight = clampedAbs * sign;
+
var barWidth = 32 * _this.getBarPercentage();
- return (<Text key={Math.random()} x={paddingRight +
+ var textX = paddingRight +
(i * (width - paddingRight)) / data.length +
- barWidth / 1} y={((baseHeight - barHeight) / 4) * 3 + paddingTop - 1} fill={_this.props.chartConfig.color(0.6)} fontSize="12" textAnchor="middle">
- {renderLabel(data[i])}
- </Text>);
+ barWidth / 1;
+ var textY = ((baseHeight - barHeight) / 4) * 3 + paddingTop - 1;
+
+ return (
+ <Text
+ key={"top-value-" + i + "-" + (data[i] !== undefined ? String(data[i]) : i)}
+ x={textX}
+ y={textY}
+ fill={topLabelColor}
+ fontSize={topLabelFontSize}
+ fontFamily={topLabelFontFamily}
+ textAnchor="middle"
+ >
+ {renderLabel(data[i], i)}
+ </Text>
+ );
});
};
+
return _this;
}
BarChart.prototype.render = function () {
var _a;
- var _b = this.props, width = _b.width, height = _b.height, data = _b.data, _c = _b.style, style = _c === void 0 ? {} : _c, _d = _b.withHorizontalLabels, withHorizontalLabels = _d === void 0 ? true : _d, _e = _b.withVerticalLabels, withVerticalLabels = _e === void 0 ? true : _e, _f = _b.verticalLabelRotation, verticalLabelRotation = _f === void 0 ? 0 : _f, _g = _b.horizontalLabelRotation, horizontalLabelRotation = _g === void 0 ? 0 : _g, _h = _b.withInnerLines, withInnerLines = _h === void 0 ? true : _h, _j = _b.showBarTops, showBarTops = _j === void 0 ? true : _j, _k = _b.withCustomBarColorFromData, withCustomBarColorFromData = _k === void 0 ? false : _k, _l = _b.showValuesOnTopOfBars, showValuesOnTopOfBars = _l === void 0 ? false : _l, _m = _b.flatColor, flatColor = _m === void 0 ? false : _m, _o = _b.segments, segments = _o === void 0 ? 4 : _o;
+ var _b = this.props, width = _b.width, height = _b.height, data = _b.data, _c = _b.style, style = _c === void 0 ? {} : _c, _d = _b.withHorizontalLabels, withHorizontalLabels = _d === void 0 ? true : _d, _e = _b.withVerticalLabels, withVerticalLabels = _e === void 0 ? true : _e, _f = _b.verticalLabelRotation, verticalLabelRotation = _f === void 0 ? 0 : _f, _g = _b.horizontalLabelRotation, horizontalLabelRotation = _g === void 0 ? 0 : _g, _h = _b.withInnerLines, withInnerLines = _h === void 0 ? true : _h, _j = _b.showBarTops, showBarTops = _j === void 0 ? true : _j, _k = _b.withCustomBarColorFromData, withCustomBarColorFromData = _k === void 0 ? false : _k, _l = _b.showValuesOnTopOfBars, showValuesOnTopOfBars = _l === void 0 ? false : _l, _m = _b.flatColor, flatColor = _m === void 0 ? false : _m, _o = _b.segments, segments = _o === void 0 ? 4 : _o, _l = _b.horizontalOffsetFactor, horizontalOffsetFactor = _l === void 0 ? 1 : _l;
var _p = style.borderRadius, borderRadius = _p === void 0 ? 0 : _p, _q = style.paddingTop, paddingTop = _q === void 0 ? 16 : _q, _r = style.paddingRight, paddingRight = _r === void 0 ? 64 : _r;
+
var config = {
width: width,
height: height,
@@ -136,7 +241,7 @@ var BarChart = /** @class */ (function (_super) {
</G>
<G>
{withVerticalLabels
- ? this.renderVerticalLabels(__assign(__assign({}, config), { labels: data.labels, paddingRight: paddingRight, paddingTop: paddingTop, horizontalOffset: barWidth * this.getBarPercentage() }))
+ ? this.renderVerticalLabels(__assign(__assign({}, config), { labels: data.labels, paddingRight: paddingRight, paddingTop: paddingTop, horizontalOffset: barWidth * this.getBarPercentage()/horizontalOffsetFactor }))
: null}
</G>
<G>
This patch solved the above problems. I optionally added a max height to bars too