react-native-chart-kit icon indicating copy to clipboard operation
react-native-chart-kit copied to clipboard

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

Open farhan960 opened this issue 2 years ago • 1 comments

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'}
 />

farhan960 avatar Oct 21 '23 10:10 farhan960

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

tobiyas09 avatar Oct 24 '23 13:10 tobiyas09