Skip to main content

LineChart

Result
Loading...
Live Editor
const seriesData = [
  {
    name: 'DataSet 1',
    data: [
      { id: '1', name: 'Value name 1', x: 2018, y: 3934 },
      { id: '2', name: 'Value name 1', x: 2020, y: 52503 },
      { id: '3', name: 'Value name 1', x: 2022, y: 57177 },
      { id: '4', name: 'Value name 1', x: 2025, y: 69658 },
      { id: '5', name: 'Value name 1', x: 2030, y: 97031 },
      { id: '6', name: 'Value name 1', x: 2040, y: 119931 },
      { id: '7', name: 'Value name 1', x: 2050, y: 137133 },
      { id: '8', name: 'Value name 1', x: 2058, y: 154175 },
    ],
  },

  {
    name: 'DataSet 2',
    data: [
      { id: '9', name: 'Value name 2', x: 2018, y: 24916 },
      { id: '10', name: 'Value name 2', x: 2020, y: 24064 },
      { id: '11', name: 'Value name 2', x: 2022, y: 29742 },
      { id: '12', name: 'Value name 2', x: 2025, y: 29851 },
      { id: '13', name: 'Value name 2', x: 2030, y: 32490 },
      { id: '14', name: 'Value name 2', x: 2040, y: 30282 },
      { id: '15', name: 'Value name 2', x: 2050, y: 38121 },
      { id: '16', name: 'Value name 2', x: 2058, y: 40434 },
    ],
  },
];

render(<LineChart id="demo-component" data={seriesData} />);

Props