React: Make a simple line chart with Ant Design

Last updated on November 4, 2020 Saul Goodman Loading... Post a comment

This article shows you how to draw a simple line chart in React with the help of the Ant Design Chart library.

1. Installing

npm install @ant-design/charts

2. Implementing the line chart

import React from 'react';
import { Line } from '@ant-design/charts';

const App = () => {
  // Generating some dummy data
  const myData = [
    { x: 0, y: 0 },
    { x: 1, y: 2 },
    { x: 2, y: 4 },
    { x: 3, y: 11 },
    { x: 4, y: 9 },
    { x: 5, y: 14 },
    { x: 6, y: 19 },
    { x: 7, y: 17 },
    { x: 8, y: 22 },
    { x: 9, y: 24 },
    { x: 10, y: 23 },
    { x: 11, y: 27 },
    { x: 12, y: 32 },
    { x: 13, y: 30 },
    { x: 14, y: 35 },
    { x: 15, y: 37 },
    { x: 16, y: 40 },
  ];

  return (
    <>
      <Line
        data={myData}
        height={500}
        xField="x"
        yField="y"
        point={{ size: 5, shape: 'diamon' }}
        color='blue'
      />
    </>
  );
};

export default App;

Simple as that ๐Ÿ™‚

Related Articles

guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x