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

Multiple datasets in Line Chart with `withScrollableDot` value is shown only for one line #730

Open Rendfold opened 2 months ago

Rendfold commented 2 months ago

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
        />
image
Rendfold commented 2 months ago

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