react-native-chart-kit
react-native-chart-kit copied to clipboard
Multiple datasets in Line Chart with `withScrollableDot` value is shown only for one line
Basically title has a description of an issue. Using 6.12.0
version. The code and result is below for demonstration.
<LineChart
data={{
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
datasets: [
{
data: [
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
],
color: () => theme.colors.borderPrimary,
},
{
data: [
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
],
color: () => theme.colors.iconSecondary,
strokeWidth: 3,
},
],
}}
width={Dimensions.get('window').width - 32}
height={220}
yAxisInterval={1}
chartConfig={{
backgroundColor: theme.colors.bgBody,
backgroundGradientFrom: theme.colors.bgBody,
backgroundGradientTo: theme.colors.bgBody,
decimalPlaces: 2, // optional, defaults to 2dp
color: (opacity = 1) => `rgba(0, 255, 0, ${opacity})`,
labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
strokeWidth: 2,
useShadowColorFromDataset: true,
fillShadowGradientFromOffset: 0,
fillShadowGradientToOffset: 0.7,
fillShadowGradientFromOpacity: 0.4,
fillShadowGradientToOpacity: 0,
scrollableDotFill: '#fff',
scrollableDotRadius: 6,
scrollableDotStrokeColor: '#FF5500',
scrollableDotStrokeWidth: 3,
scrollableInfoViewStyle: {
justifyContent: 'center',
alignContent: 'center',
borderRadius: 2,
},
scrollableInfoTextStyle: {
color: '#fff',
backgroundColor: '#000',
textAlign: 'center',
},
scrollableInfoSize: { width: 30, height: 30 },
scrollableInfoOffset: -10,
}}
withShadow
withInnerLines={false}
withDots={false}
bezier
withScrollableDot
/>
I added a PR that may solve this issues, but I may be missing something. https://github.com/indiespirit/react-native-chart-kit/pull/731