Search code examples
react-nativevictory-chartsvictory-native

How to get particular Line data In VictoryLine chart. (React Native)


I want when I clicked on particular part of line so I'll get the data of particular line.

example I have list of dat ['JAN', 'FEB', 'MAR'],

so I want to get the data of FEB when I clicked on Feb line point

here is my code

<VictoryChart
            domainPadding={22}
            padding={{top: 10, bottom: 120, left: -10, right: 90}}>
            <VictoryAxis
              tickFormat={['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN']}
              style={{
                axis: {
                  stroke: 'none',
                },
                tickLabels: {textAnchor: 'middle', fontSize: 10},
              }}
            />
            <Defs>
              <LinearGradient
                id="gradient"
                x1="0%"
                y1="0%"
                x2="0%"
                y2="100%">
                <Stop offset="0%" stopColor="#b3ebe45e" />
                <Stop offset="100%" stopColor="white" />
              </LinearGradient>
            </Defs>
            <VictoryArea
              data={[
                {x: 'JAN', y: 500},
                {x: 'FEB', y: 150},
                {x: 'MAR', y: 612},
                {x: 'APR', y: 245},
                {x: 'MAY', y: 456},
                {x: 'JUN', y: 56},
              ]}
              interpolation={'natural'}
              style={{
                data: {fill: 'url(#gradient)'},
              }}
              animate
            />

            <VictoryLine
              data={[
                {x: 'JAN', y: 500},
                {x: 'FEB', y: 150},
                {x: 'MAR', y: 612},
                {x: 'APR', y: 245},
                {x: 'MAY', y: 456},
                {x: 'JUN', y: 56},
              ]}
              interpolation={'natural'}
              style={{
                data: {stroke: Color.primary},
              }}
              animate
            />
          </VictoryChart>

I passed event prop but able to get result


Solution

  • VictoryLine uses VictoryClipContainer as its default groupComponent VictoryClipContainer renders a tag with a clipPath def. This allows continuous data components to transition smoothly when new data points enter and exit. Supplying a completely custom group component to VictoryLine may result in broken animations.

    default: < VictoryClipContainer />