import React, {
useState,
useEffect
} from 'react';
import ReactDOM from 'react-dom';
import {
Line
} from '@ant-design/plots';
const DemoLine = () => {
const data = [{
year: '1991',
value: 3,
},
{
year: '1992',
value: 4,
},
{
year: '1993',
value: 3.5,
},
{
year: '1994',
value: 5,
},
{
year: '1995',
value: 4.9,
},
{
year: '1996',
value: 6,
},
{
year: '1997',
value: 7,
},
{
year: '1998',
value: 9,
},
{
year: '1999',
value: 13,
},
];
const config = {
data,
xField: 'year',
yField: 'value',
label: {},
point: {
size: 1,
shape: '',
style: {
fill: 'white',
stroke: '#5B8FF9',
lineWidth: 2,
},
},
lineStyle: {
lineWidth: 0,
},
tooltip: {
showMarkers: false,
},
state: {
active: {
style: {
shadowBlur: 4,
stroke: '#000',
fill: 'red',
},
},
},
interactions: [{
type: 'marker-active',
}, ],
};
return <Line {
...config
}
/>;
};
ReactDOM.render( < DemoLine / > , document.getElementById('container'));
Comments