45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
ScatterChart,
|
|
Scatter,
|
|
Tooltip,
|
|
CartesianGrid,
|
|
XAxis,
|
|
YAxis,
|
|
ZAxis,
|
|
Legend,
|
|
ResponsiveContainer,
|
|
} from 'recharts';
|
|
|
|
interface Props {
|
|
dataFirst: any;
|
|
dataSecond: any;
|
|
}
|
|
function ScatterChartComponent(props: Props) {
|
|
const { dataFirst, dataSecond } = props;
|
|
return (
|
|
<div className="rounded border shadow">
|
|
<div className="text-lg p-3 border-b bg-gray-lightest">Scatter Chart</div>
|
|
<div className="">
|
|
<ResponsiveContainer height={500} width="100%">
|
|
<ScatterChart
|
|
width={730}
|
|
height={250}
|
|
margin={{ top: 20, right: 20, bottom: 10, left: 10 }}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="x" name="stature" unit="cm" />
|
|
<YAxis dataKey="y" name="weight" unit="kg" />
|
|
<ZAxis dataKey="z" range={[64, 144]} name="score" unit="km" />
|
|
<Tooltip cursor={{ strokeDasharray: '3 3' }} />
|
|
<Legend />
|
|
<Scatter name="A school" data={dataFirst} fill="#8884d8" />
|
|
<Scatter name="B school" data={dataSecond} fill="#82ca9d" />
|
|
</ScatterChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ScatterChartComponent;
|