react-native-chart-kit
react-native-chart-kit copied to clipboard
StackedBarChart show not correct
I use StackedBarChart but got incorrect data on chart.
I customized my formatYLabel for yAxis. but when I use it , my chart show incorrect.
<StackedBarChart
formatYLabel={() => yLabelIterator.next().value}
style={[style, { paddingRight: 0 }]}
data={{
labels: ["Test1", "Test2"],
legend: ["L1", "L2", "L3"],
data: [
[0, 3, 0],
[1, 0, 3],
],
barColors: ["#dfe4ea", "#ced6e0", "#a4b0be"]
}}
chartConfig={chartConfig}
width={screenWidth * 0.9}
// height={screenHeight}
height={256}
yLabelsOffset={32}
yAxisLabel={t('')}
yAxisSuffix={t('')}
yAxisInterval={1}
xLabelsOffset={-4}
decimalPlaces={1}
segments={6}
blurOpacity={0.3}
hideLegend={true}
decorator={() => {
return tooltipPos.visible ? (
<View>
<Svg>
<Rect
x={tooltipPos.x - 15}
y={tooltipPos.y + 10}
width="40"
height="30"
fill="black"
/>
<TextSVG
x={tooltipPos.x + 5}
y={tooltipPos.y + 30}
fill="white"
fontSize="16"
fontWeight="bold"
textAnchor="middle">
{tooltipPos.value}
</TextSVG>
</Svg>
</View>
) : null
}}
onDataPointClick={data => {
let isSamePoint = tooltipPos.x === data.x && tooltipPos.y === data.y
isSamePoint
? setTooltipPos(previousState => {
return {
...previousState,
value: data.value,
visible: !previousState.visible
}
})
: setTooltipPos({
x: data.x,
value: data.value,
y: data.y,
visible: true
})
}}
/>
@iita71737 how are you hiding the bar value labels?
@iita71737 how are you hiding the bar value labels?
You mean the value on the bar top ? or Y-Axis Label? or X-Axis Label?
@iita71737 how are you hiding the bar value labels?
You mean the value on the bar top ? or Y-Axis Label? or X-Axis Label?
The bar values. Hopefully this SS will help.there are two when using StackedBarChart
@iita71737 how are you hiding the bar value labels?
You mean the value on the bar top ? or Y-Axis Label? or X-Axis Label?
The bar values. Hopefully this SS will help.there are two when using StackedBarChart
<BarChart
chartConfig={{
showBarTops={false}
showValuesOnTopOfBars={true}
}
/>
@iita71737 how are you hiding the bar value labels?
You mean the value on the bar top ? or Y-Axis Label? or X-Axis Label?
The bar values. Hopefully this SS will help.there are two when using StackedBarChart
<BarChart chartConfig={{ showBarTops={false} showValuesOnTopOfBars={true} } />
Huh I'll try it later but I could've sworn those two props didn't exist in StackBarChart component