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'));
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter