I want to put in Ylabels these variables [80,90,100] but the graph starts from the min variable i put in the array I found a way to do it in line chart but it does not work on BarChart
const data = {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri"],
datasets: [
{
data: [89,85,96,97,94,91,88]
}
]
};
const graphScreen=()=>{
const screenWidth = Dimensions.get("window").width;
return(
<View >
<BarChart
style={{
marginVertical: 8,
borderRadius: 16
}}
chartConfig={{
backgroundColor: "#e26a00",
backgroundGradientFrom: "#fb8c00",
backgroundGradientTo: "#ffa726",
decimalPlaces: 0, // optional, defaults to 2dp
color: (opacity = 3) => `rgba(200, 255, 255, ${opacity})`,
labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
style: {
borderRadius: 30
},
data: data.datasets,
propsForDots: {
r: "6",
strokeWidth: "2",
stroke: "#ffa726"
}
}}
segments={3}
width={screenWidth}
height={220}
formatYLabel={() => yLabelIterator.next().value}
verticalLabelRotation={0}
/>
</View>
graphSo in the picture i want in the left side to be these variables!
From looking at the source code for the BarChart it seems the formatYLabel function should be declared as a property inside
chartConfig
instead of being set as a prop, as is the case with the LineChart.Another problem you need to be aware of is that this library derives the minimum and maximum y-axis value based on the data array you pass in. The problem with this is that even though you might set your labels to be
[80, 90, 100]
, the values won't necessarily correspond.Said in another way: If your minimum value label is a different value from the minimum value in your data array the labels won't match up entirely.
Even though taking the minimum value from the data array is the default, there is a
fromZero
prop you can set totrue
which makes the y-axis start value0
.We can take advantage of this by doing something like this:
I've also changed the amount of segments from
3
to2
. The segments are the spaces between the labels, so if you want 3 labels you want 2 segments.Result:
So the idea of subtracting
minValue - 1
from each datapoint is to say: What is the difference between my minimum value label80
and0
(The start value whenfromZero
is set totrue
). Then subtract another1
since0
itself is also part of the range. This gives us a value that signifies how much each value in the data array should be corrected in order to display the bars on the correct height according to the labels we've passed.This approach assumes your max value label will be more than the max value in the data array.