0

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

Abdul Rehman
  • 37
  • 5

1 Answers1

0

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

Naveen Nizam
  • 193
  • 8
  • hey! thank for answer but can you please give more information so I can implement because I'm not able understand how it'll work in my code – Abdul Rehman May 30 '23 at 07:38
  • 1
    https://codesandbox.io/s/friendly-naveen-nizam-victory-urglof I hope it will work for you – Naveen Nizam May 30 '23 at 08:18
  • hey Naveen! can you please look into this https://stackoverflow.com/questions/76371677/how-to-add-a-vertical-line-on-victory-native-when-hover-on-linechart-with-toolti – Abdul Rehman May 31 '23 at 09:09