VictoryVoronoiContainer is not fast response data in android device

[rocky288]

Bugs and Questions

Checklist

• [x] I have read through the FAQ and Guides before asking a question

• [x] I am using the latest version of Victory

• [x] I've searched open issues to make sure I'm not opening a duplicate issue

The Problem

we used victory bar in victory chart for co2 data. Getting label data on mouse hovering on bar using VictoryVoronoiContainer. for ios device it's work perfectly but for android device it's take some delay to display.

https://user-images.githubusercontent.com/98940119/152298803-f5ea8cd5-3120-4b13-a6a8-0e582c0e1aad.mov

Description

Please describe the feature you're requesting in detail.

https://user-images.githubusercontent.com/98940119/152299753-adb1f15f-795f-4984-80e0-93d6fbba4e20.mov

[talon-himself]

@rocky288 I am actually trying to pull off something similar to what you have going on here with your label and graph. Any chance you could post a code snippet?

[rocky288]

Here it is a code of VictoryGraph.js for android platform <Svg> <VictoryChart minDomain={{ x: 0 }} domain={{ y: [0, MaxYlabel] }} containerComponent={ <VictoryVoronoiContainer disable={flag} voronoiDimension="x" labels={({ datum }) => { getSelectedValue({ datum }) }} />} maxDomain={{ x: MaxXlabel }} height={wp('115%')} width={wp(${MaxXlabel * 3}%)} theme={VictoryTheme.material} padding={{ top: 7, bottom: 35, right: 25 }} //animate > <Defs> <LinearGradient id="gradientStroke" x1={'0%'} y1={'0%'} x2={'0%'} y2={'100%'}> <Stop offset="100%" stopColor="#C7FFC2" /> <Stop offset="46.48%" stopColor="#A5B3FF" /> <Stop offset="0.23%" stopColor="#FFDBDB" /> </LinearGradient> </Defs> <VictoryAxis dependentAxis style={{ grid: { stroke: '#f2f2f2', strokeWidth: 1, strokeDasharray: "0, 0" }, axis: { stroke: 'transparent', }, ticks: { stroke: 'transparent', }, }} standalone={false} /> <VictoryAxis tickFormat={(t) => { let dateString = currentSelectedDate + ' ' + t + ':00' var HH = moment(dateString).format('HH'); var mm = moment(dateString).format('mm'); if (mm === '00') { if (HH === '00') return '12' else return HH } else { return '' } } } standalone={false} style={{ grid: { strokeWidth: 1, strokeDasharray: "0, 0", stroke: ({ tick }) => (tick - 1) % 4 == 0 ? "#f2f2f2" : "" }, axis: { stroke: '#f2f2f2', strokeWidth: 1 }, ticks: { stroke: 'transparent', }, tickLabels: { fontWeight: '700', fontSize: '10', fill: 'black' } }} /> <VictoryBar barWidth={3} style={{ data: { fill: 'url(#gradientStroke)', opacity: ({ datum }) => datum.key === selectedBarTime ? 0.5 : 1 } }} data={GraphData} x="key" y="time" //labels={({ datum }) => getSelectedValue({ datum })} labelComponent={<VictoryTooltip renderInPortal={false} />} fixLabelOverlap={false} events={[ { target: 'data', eventHandlers: { onPressIn: () => { return [ { target: 'data', mutation: props => { setScrollViewFlag(false) //setFlag(false) flag = false return { style: { fill: 'url(#gradientStroke)', opacity: 0.5 } }; } } ]; }, } } ]} /> </VictoryChart> </Svg>

Json of GraphData [{"key": "05:30", "time": 900}, {"key": "05:45", "time": 893}, {"key": "06:00", "time": 891}, {"key": "06:15", "time": 870}, {"key": "06:30", "time": 867}, {"key": "06:45", "time": 852}, {"key": "07:00", "time": 854}, {"key": "07:15", "time": 850}, {"key": "07:30", "time": 850}, {"key": "07:45", "time": 850}, {"key": "08:00", "time": 843}, {"key": "08:15", "time": 852}, {"key": "08:30", "time": 850}, {"key": "08:45", "time": 847}, {"key": "09:00", "time": 840}, {"key": "09:15", "time": 837}, {"key": "09:30", "time": 829}, {"key": "09:45", "time": 828}, {"key": "10:00", "time": 840}, {"key": "10:15", "time": 834}, {"key": "10:30", "time": 835}, {"key": "10:45", "time": 831}, {"key": "11:00", "time": 829}, {"key": "11:15", "time": 831}, {"key": "11:30", "time": 834}, {"key": "11:45", "time": 830}, {"key": "12:00", "time": 837}, {"key": "12:15", "time": 933}, {"key": "12:30", "time": 979}, {"key": "12:45", "time": 929}, {"key": "13:00", "time": 864}, {"key": "13:15", "time": 809}, {"key": "13:30", "time": 750}, {"key": "13:45", "time": 765}, {"key": "14:00", "time": 782}, {"key": "14:15", "time": 738}, {"key": "14:30", "time": 712}, {"key": "14:45", "time": 708}, {"key": "15:00", "time": 691}, {"key": "15:15", "time": 692}, {"key": "15:30", "time": 694}, {"key": "15:45", "time": 724}, {"key": "16:00", "time": 752}, {"key": "16:15", "time": 748}, {"key": "16:30", "time": 738}, {"key": "16:45", "time": 717}, {"key": "17:00", "time": 690}, {"key": "17:15", "time": 676}, {"key": "17:30", "time": 660}, {"key": "17:45", "time": 648}, {"key": "18:00", "time": 634}, {"key": "18:15", "time": 621}, {"key": "18:30", "time": 620}]

Display Data on Tooltips by getting from getSelectedValue({ datum })

[JJ810]

does anyone have any updates on this? I am facing the same performance issue!

[lvntyldz]

I'm facing the same issue. iOS is fast enough but Android not. Did anyone have an update?

[github-actions[bot]]

This issue is stale because it has been open for 90 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[github-actions[bot]]

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.