How do I create a vertical line chart in React with TypeScript?

Creating a vertical line chart in React with TypeScript typically involves using a charting library. One popular choice is `Recharts`. Here’s how you can achieve this:

1. Set up your React Project with TypeScript:

- If you haven't already, create a React project with TypeScript using:

npx create-react-app my-chart-app --template typescript

2. Install Recharts:

- Navigate to your project directory and install `Recharts`:

npm install recharts

3. Create a Chart Component:

- Create a new file, for example, `VerticalLineChart.tsx` inside your `src` folder, and add the following code:

import React from 'react';
import {
 LineChart,
 Line,
 XAxis,
 YAxis,
 CartesianGrid,
 Tooltip,
 Legend,
} from 'recharts';

interface DataPoint {
 name: string;
 value: number;
}

interface VerticalLineChartProps {
 data: DataPoint[];
}

const VerticalLineChart: React.FC<VerticalLineChartProps> = ({ data }) => {
 return (
  <LineChart width={500} height={300} data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
   <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
   <Legend />
  <Line type="monotone" dataKey="value" stroke="#8884d8" activeDot={{ r: 8 }} />
  </LineChart>
 );
};

export default VerticalLineChart;


4. Use the Component:

- Now, in any of your React components, import and use `VerticalLineChart`, passing your data like this, for example in `App.tsx`:

import React from 'react';
import VerticalLineChart from './VerticalLineChart';

const data = [
 { name: 'A', value: 10 },
 { name: 'B', value: 20 },
 { name: 'C', value: 15 },
 { name: 'D', value: 25 },
 { name: 'E', value: 18 },
];

function App() {
 return (
  <div className="App"><VerticalLineChart data={data} /></div>
 );
}

export default App;


5. Explanation:

- `LineChart`: This is the main component from Recharts which wraps our chart.

- `XAxis` and `YAxis`: These define the X and Y axes of the chart. `dataKey` specifies the key to use from our data for labels.

- `Line`: Represents the line on the graph, and `dataKey` indicates which data should be used for plotting the line.

- `CartesianGrid`, `Tooltip`, and `Legend`: These are added for better visual presentation and interaction.

- `DataPoint` and `VerticalLineChartProps` are TypeScript interfaces to ensure type safety.

- The use of `React.FC` infers the types of the component’s props.

6. Customizations:

- You can customize the look and feel of the chart by modifying properties of `LineChart`, `Line`, `XAxis`, `YAxis`, etc. Check the Recharts documentation for more options.

By following these steps, you will have a vertical line chart in your React app using TypeScript. Remember to tailor data and chart appearance based on your requirements. This example provides a basic setup, and Recharts has more options if you require more advanced charts.

Learn more about this