react-native-chart-kit
react-native-chart-kit copied to clipboard
Is there any way to make line transparent for a particular data?
I want to make a line color transparent whenever the data is 0. Is there any way to do that?
<LineChart
height={220}
withDots={false}
yAxisInterval={1}
xLabelsOffset={2}
withShadow={false}
width={widthPixel(323)}
withVerticalLines={false}
style={styles.chartStyle}
withHorizontalLabels={false}
withVerticalLabels={true}
data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
// labels: graphData?.xAxis ? graphData?.xAxis : [],
datasets: [{ data: [13, 14, 15, 16, 0, 11, 10] }]
}}
chartConfig={{
fillShadowGradient: "red",
decimalPlaces: 2,
backgroundColor: colors.white,
backgroundGradientTo: colors.white,
backgroundGradientFrom: colors.white,
color: (opacity = 2) => `brown`,
labelColor: () => colors.greyText,
style: { fillShadowGradient: colors.accentBlue },
propsForLabels: { fontFamily: fontFamily.appTextBold, fontSize: fontPixel(14), dx: widthPixel(5) }
}}
getDotColor={(dataPoint, dataPointIndex) => 'orange'}
/>
Add the rgba color with opacity to your dataset
datasets: [{
data: [13, 14, 15, 16, 0, 11, 10],
color: () => 'rgba(0,0,255,0.3)',
}]