diff --git a/src/BarChart.tsx b/src/BarChart.tsx index 9af3a8b7..8a21bbe5 100644 --- a/src/BarChart.tsx +++ b/src/BarChart.tsx @@ -46,7 +46,7 @@ export interface BarChartProps extends AbstractChartProps { showValuesOnTopOfBars?: boolean; withCustomBarColorFromData?: boolean; flatColor?: boolean; - + } type BarChartState = {}; @@ -161,8 +161,8 @@ class BarChart extends AbstractChart { {flatColor ? ( ) : ( - - )} + + )} ); })} @@ -185,7 +185,7 @@ class BarChart extends AbstractChart { const baseHeight = this.calcBaseHeight(data, height); const renderLabel = (value: number) => { - if(this.props.chartConfig.formatTopBarValue) { + if (this.props.chartConfig.formatTopBarValue) { return this.props.chartConfig.formatTopBarValue(value) } else { @@ -195,6 +195,7 @@ class BarChart extends AbstractChart { return data.map((x, i) => { const barHeight = this.calcHeight(x, data, height); const barWidth = 32 * this.getBarPercentage(); + const propsForTopOfBarLabel = { fontSize: 12, ...this.props.chartConfig.propsForTopLabel } || { fontSize: 12 } return ( { 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" + style={propsForTopOfBarLabel} > {renderLabel(data[i])} diff --git a/src/HelperTypes.ts b/src/HelperTypes.ts index 0d5dde32..0af197fe 100644 --- a/src/HelperTypes.ts +++ b/src/HelperTypes.ts @@ -104,6 +104,7 @@ export interface ChartConfig { */ barPercentage?: number; barRadius?: number; + propsForTopLabels?: TextProps; /** * Override styles of the background lines, refer to react-native-svg's Line documentation */