Question
No way to add padding to inner container in react-native-chart-kit
I'm using a custom render on the dots to print the abbreviated value above the dot instead of using a y axis legend. However, the top-most value gets cut off by the upper boundary of the chart's container. I tried adding padding top to both the chart component itself, as well as the chart props. Adding paddingTop
to the chart component props does add padding but it's only to the outer container. Adding any styles to the style prop in the chartConfig
prop seems to have no effect.
const chartConfig: ChartConfig = {
backgroundGradientFrom: colors.purpBgGradLeft,
backgroundGradientTo: colors.purpBgGradRight,
color: (opacity = 1) => `rgba(${colors.chartLineRGB}, ${opacity})`,
labelColor: (opacity = 1) => `rgba(${colors.chartLineRGB}, ${opacity})`,
propsForDots: {
r: '5',
strokeWidth: '1',
stroke: `rgba(${colors.chartLineRGB}, 1)`,
},
};
<View
style={{ backgroundColor: colors.purpBgGradLeft }}
onLayout={handleLayout}>
<LineChart
data={chartData}
width={chartContainerWidth + CHART_WIDTH_OFFSET}
height={CHART_HEIGHT}
chartConfig={chartConfig}
style={{ marginLeft: MARGIN_OFFSET }}
renderDotContent={({ x, y, index, indexData }) => (
<Svg key={index}>
<SvgText
x={x}
y={y - DOT_TEXT_OFFSET}
fill={colors.textLight}
fontSize={DOT_TEXT_SIZE}
textAnchor="middle">
{formatStat(indexData, 0)}
</SvgText>
</Svg>
)}
withHorizontalLabels={false}
/>
</View>
Any help would be greatly appreciated! I created an Expo Snack for your convenience!
https://snack.expo.dev/@devlylabs/chart-example-with-dot-labels
Thanks in advance for any help!