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

Creating a vertical scale bar chart in React with TypeScript involves several steps. Here's a breakdown:

1. Set Up Your React Project with TypeScript:

- If you haven't already, use Create React App with the TypeScript template. Run: npx create-react-app my-chart --template typescript

2. Define Your Data:

- Prepare your data in the structure you want. For example:

interface BarChartData {
  label: string;
  value: number;
}

const chartData: BarChartData[] = [
  { label: "A", value: 20 },
  { label: "B", value: 50 },
  { label: "C", value: 30 },
  { label: "D", value: 80 },
];

3. Create a Bar Chart Component:

- Implement a component that renders the chart. Calculate bar heights dynamically based on the data.

import React from 'react';

interface BarChartData {
  label: string;
  value: number;
}

interface BarChartProps {
  data: BarChartData[];
}

const BarChart: React.FC<BarChartProps> = ({ data }) => {
  const maxValue = Math.max(...data.map((item) => item.value));

  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', height: '300px', borderBottom: '1px solid #ccc' }}>
      {data.map((item, index) => {
        const barHeight = (item.value / maxValue) 100;
        return (
          <div
            key={index}
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              margin: '0 10px'
            }}
          >
            <div
              style={{
                width: '40px',
                height: `${barHeight}%`,
                backgroundColor: 'lightblue',
                marginBottom: '5px'
              }}
            />
            <span>{item.label}</span>
          </div>
        );
      })}
    </div>
  );
};

export default BarChart;

4. Use the Chart Component:

- Import and use the component in your main application or any component.

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

interface BarChartData {
  label: string;
  value: number;
}

const chartData: BarChartData[] = [
  { label: "A", value: 20 },
  { label: "B", value: 50 },
  { label: "C", value: 30 },
  { label: "D", value: 80 },
];

const App: React.FC = () => {
  return (
    <div className="App">
      <BarChart data={chartData} />
    </div>
  );
};

export default App;


5. Enhancements (Optional):

- Add tooltips, animations, or more complex styling using CSS to enhance the chart.

- Use a charting library like Recharts or Chart.js for more complex and performant solutions.

This provides a basic vertical scale bar chart in React using TypeScript. You can further customize and enhance this as per your requirements.

Learn more about this