Create Responsive React D3 chart components

Required responsive react d3 line, bar, pie, mixed charts components with reactjs (typescript shouldn't be used)

The components created should accept x, y axis labels and values and should return specified chart with given values

singleChartData ={
chartType:"Pie"/"Line"/"Bar",
chartTitle:"String",
xAxisLabel:"String",
yAxisLabel:"String",
xValues:[ ]//list,
yValues:[ ]//list,
colors:[ ] //single in case of line and multiple for pie and bar (as many as lenght of yValues )
}


multiChartData ={
chartTitle:"String",
xAxisLabel:"String",
yAxisLabel:"String",
{
chartType:"Line"/"Bar",
xValues:[ ]//list,
yValues:[ ]//list,
colors:[ ] //single in case of line and multiple for bar (as many as lenght of yValues )
},
{
chartType:"Line"/"Bar",
xValues:[ ]//list,
yValues:[ ]//list,
colors:[ ] //single in case of line and multiple for bar (as many as lenght of yValues )
}
}

components should be like

<BarChartComponent data={data}/>

<PieChartComponent data={data}/>

<LineChartComponent data={data}/>

<MultiChartComponent data={data}/>

The developer should create these components using react-d3 which should be responsive

Libraries like react-chart.js/re-charts/victoryCharts shouldn't be used, components should be completely developed using the react-d3 library only