Render a Bar chart using SVG

To render a bar chart in React using SVG, you can create a reusable component that takes data as input and generates the SVG elements accordingly. Here’s an example code snippet that demonstrates how to do this:

import React from 'react';

const BarChart = ({ data, width, height, barColor }) => {
  const barWidth = width / data.length;
  const maxValue = Math.max(...data);
  const scaleFactor = height / maxValue;

  return (
    <svg width={width} height={height}>
      {data.map((value, index) => (
        <rect
          key={index}
          x={index * barWidth}
          y={height - value * scaleFactor}
          width={barWidth}
          height={value * scaleFactor}
          fill={barColor}
        />
      ))}
    </svg>
  );
};

export default BarChart;

In this code, the BarChart component receives the following props:

• data: An array of numeric values representing the height of each bar.
• width: The width of the chart in pixels.
• height: The height of the chart in pixels.
• barColor: The color of the bars.

The component calculates the necessary dimensions for each bar based on the provided props. It then maps over the data array, creating an SVG rect element for each value. The x and y attributes determine the position of each bar, and the width and height attributes define the dimensions. The fill attribute sets the color of the bars using the barColor prop.

You can use the BarChart component in your application like this:

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

const App = () => {
  const data = [10, 20, 15, 30, 25, 35];
  
  return (
    <div>
      <h1>Bar Chart Example</h1>
      <BarChart data={data} width={400} height={300} barColor="steelblue" />
    </div>
  );
};

export default App;

In this example, we pass an array of numbers (data), along with the desired width, height, and bar color to the BarChart component. Adjust these values to match your specific requirements.