100 lines
2.7 KiB
TypeScript
100 lines
2.7 KiB
TypeScript
import React from 'react';
|
|
import { ResponsiveLine } from '@nivo/line';
|
|
|
|
function LineChart({ data }: any) {
|
|
return (
|
|
<div>
|
|
<div className="h-[500px]">
|
|
<ResponsiveLine
|
|
data={data}
|
|
margin={{ top: 50, right: 30, bottom: 50, left: 60 }}
|
|
xScale={{ type: 'linear' }}
|
|
yScale={{
|
|
type: 'linear',
|
|
// stacked: true,
|
|
min: 0,
|
|
max: 100,
|
|
}}
|
|
yFormat=" >-.2f"
|
|
curve="monotoneX"
|
|
axisTop={null}
|
|
axisRight={null}
|
|
axisBottom={{
|
|
// tickValues: [0, 20, 40, 60, 80, 100, 120],
|
|
tickSize: 5,
|
|
tickPadding: 5,
|
|
tickRotation: 0,
|
|
// format: '.2f',
|
|
// legend: 'price',
|
|
// legendOffset: 36,
|
|
// legendPosition: 'middle',
|
|
}}
|
|
axisLeft={{
|
|
// tickValues: [0, 500, 1000, 1500, 2000, 2500],
|
|
tickSize: 5,
|
|
tickPadding: 5,
|
|
tickRotation: 0,
|
|
// format: '.2s',
|
|
// legend: 'volume',
|
|
// legendOffset: -40,
|
|
// legendPosition: 'middle',
|
|
}}
|
|
enableGridX={false}
|
|
colors={{ scheme: 'spectral' }}
|
|
lineWidth={1}
|
|
pointSize={0}
|
|
pointColor={{ theme: 'background' }}
|
|
pointBorderWidth={1}
|
|
pointBorderColor={{ from: 'serieColor' }}
|
|
pointLabelYOffset={-12}
|
|
useMesh={true}
|
|
// gridXValues={[0, 20, 40, 60, 80, 100, 120]}
|
|
// gridYValues={[0, 500, 1000, 1500, 2000, 2500]}
|
|
legends={[]}
|
|
/>
|
|
|
|
{/* <ResponsiveLine
|
|
data={data}
|
|
margin={{ top: 50, right: 20, bottom: 50, left: 60 }}
|
|
xScale={{ type: 'point' }}
|
|
yScale={{
|
|
type: 'linear',
|
|
min: 'auto',
|
|
max: 'auto',
|
|
stacked: true,
|
|
reverse: false,
|
|
}}
|
|
yFormat=" >-.2f"
|
|
axisTop={null}
|
|
axisRight={null}
|
|
axisBottom={{
|
|
tickSize: 5,
|
|
tickPadding: 5,
|
|
tickRotation: 0,
|
|
// legend: 'transportation',
|
|
// legendOffset: 36,
|
|
// legendPosition: 'middle',
|
|
}}
|
|
axisLeft={{
|
|
tickSize: 5,
|
|
tickPadding: 5,
|
|
tickRotation: 0,
|
|
// legend: 'count',
|
|
// legendOffset: -40,
|
|
// legendPosition: 'middle',
|
|
}}
|
|
pointSize={1}
|
|
pointColor={{ theme: 'background' }}
|
|
pointBorderWidth={2}
|
|
pointBorderColor={{ from: 'serieColor' }}
|
|
pointLabelYOffset={-12}
|
|
useMesh={true}
|
|
legends={[]}
|
|
/> */}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default LineChart;
|