React line chart zooming to child data

javaid254 — Mon, 16 Mar 2020 20:52:40 +0000

In a react chart line, I want to select and drag chart area and when there is child records(3 level in the sample data below), chart should zoom.
Any idea, help is appreciated -- I am beginner in React.

when chart is loaded, days (Mar 01, Mar 02...) will be drawn, zooming will open hour/minute for Mar 02 as this day has child data

data = [

{name: 'Mar 01',
sale: 30,
},
{name: 'Mar 02',
sale: 48,
childData: [
{name: '01:00', -- first hour
sale: 9,
childData: [
{name: '01:01', -- first minute
sale: 5
},
{name: '01:02', -- second minute
sale: 1,
},
{name: '01:03', -- third minute
sale: 2
},
{name: '01:04', -- fourth minute
sale: 0,
},
{name: '01:05', -- fifth minute
sale: 1
},
],
name: '02:00', -- second hour
sale: 10,
},
{name: '03:00', -- third hour
sale: 6,
},

{name: '04:00', -- forth hour
sale: 8,
},

{name: '05:00', -- fifth hour
sale: 15,
},

],
},
{name: 'Mar 03',
sale: 50,
},
{name: 'Mar 04',
sale: 70,
},
];

DEV Community: javaid254

React line chart zooming to child data