Data Visualisation - lesson 7 | HackIndia Skills

Data Visualisation - lesson 7 | HackIndia Skills | HackIndia

Example

React chart example

This example uses Recharts in a React app. It builds a bar chart for one clear question: Which feature gets the most user clicks?

Install Recharts first, then add the component to the page where your dashboard is shown.

npm install recharts

// FeatureClicksChart.jsx
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  Label
} from "recharts";

const data = [
  { feature: "UPI Pay", clicks: 86 },
  { feature: "Order Track", clicks: 64 },
  { feature: "Support", clicks: 28 },
  { feature: "Coupons", clicks: 42 }
];

export default function FeatureClicksChart() {
  return (
    <section aria-labelledby="feature-clicks-title">
      <h2 id="feature-clicks-title">Which feature gets the most clicks?</h2>
      <p>Clicks recorded in the demo dataset for this project.</p>

      <ResponsiveContainer width="100%" height={300}>
        <BarChart data={data} margin={{ top: 20, right: 20, bottom: 40, left: 40 }}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="feature">
            <Label value="Feature" offset={-25} position="insideBottom" />
          </XAxis>
          <YAxis domain={[0, "dataMax"]}>
            <Label value="Clicks" angle={-90} position="insideLeft" />
          </YAxis>
          <Tooltip />
          <Bar dataKey="clicks" fill="#2563eb" name="Clicks" />
        </BarChart>
      </ResponsiveContainer>
    </section>
  );
}

Tip

Ask AI carefully

AI can help you write the chart component faster. Give it your data shape, chart type, framework, and the exact question the chart must answer.

Check what it returns. Make sure the axis does not hide zero for bar charts, labels are present, colours have contrast, and the chart uses your real fields.

Prompt you can use:

I am building a React dashboard chart using Recharts.
Question: Which feature gets the most clicks?
Data fields: feature as string, clicks as number.
Make a responsive bar chart with a title, axis labels, tooltip, and accessible section label.
Do not use fake fields. Keep the y-axis honest for a bar chart.

Build the chart in code

One chart, shipped

Use real project data

Prepare your data

React chart example

Ask AI carefully

Common build mistake

Do this now

Quick check