How to make scrollable dot and use two values inside the graph

[gabrielew]

I am using this code below

Can I use gain value in X hour?

<LineChart
  data={{
    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
    datasets: [{
      data: [40, 100, 160, 220, 160],
    }],
  }}
  width={Dimensions.get('window').width - 48}
  height={220}
  yAxisInterval={1}
  chartConfig={{
    linejoinType: 'round',
    scrollableDotFill: '#fff',
    scrollableDotRadius: 6,
    scrollableDotStrokeColor: '#FF5500',
    scrollableDotStrokeWidth: 3,
    scrollableInfoViewStyle: {
      justifyContent: 'center',
      alignContent: 'center',
      backgroundColor: '#121212',
      borderRadius: 2,
    },
    scrollableInfoTextStyle: {
      color: '#C4C4C4',
      marginHorizontal: 4,
      flex: 1,
      textAlign: 'center',
    },
    scrollableInfoSize: {width: 65, height: 30},
    scrollableInfoOffset: 15,
    backgroundColor: 'rgba(40, 27, 90, 1)',
    backgroundGradientFrom: 'rgba(40, 27, 90, 1)',
    backgroundGradientTo: 'rgba(40, 27, 90, 1)',
    decimalPlaces: 0, // optional, defaults to 2dp
    color: (opacity = 1) => 'red',
    labelColor: (opacity = 1) => 'red',
    style: {
      borderRadius: 16,
    },
    propsForDots: {
      r: '6',
      strokeWidth: '2',
      fill: 'rgba(244, 161, 100, 1)',
      stroke: 'white',
    },
  }}
  bezier
  style={{borderRadius: 8}}
/>