indiespirit / react-native-chart-kit

📊React Native Chart Kit: Line Chart, Bezier Line Chart, Progress Ring, Bar chart, Pie chart, Contribution graph (heatmap)
https://expo.io/@indiespirit/react-native-chart-kit
MIT License
2.8k stars 653 forks source link

Is there any way to make line transparent for a particular data? #711

Open CuriousProgramer opened 8 months ago

CuriousProgramer commented 8 months ago

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'}
 />
tobiyas09 commented 8 months ago

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)',
}]