Data Visualisation - lesson 7 | HackIndia Skills

Key point

One chart, shipped

Your chart is only part of your project when it runs inside your demo or app. A PNG in your README is useful, but it does not prove your dashboard works.

For this lesson, build one honest chart in code from a small data file or API response. Keep it simple and visible.

Use real project data

Pick data your project already creates or can reasonably store. For a food delivery project, it could be orders per day. For a college event app, it could be registrations by department.

Do not invent numbers just to make the chart look good. If you need sample data for testing, name it clearly as sample data.

Your to-do

Prepare your data

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Choose the project question your chart answers.
Create a small data file with clear field names.
Add units where needed, like rupees, minutes, users, or percent.
Keep only the columns needed for this chart.
Check that the data matches what your labels will say.

0 of 5 done

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.

Common mistake

Common build mistake

Many builders make a good chart in a notebook, then forget to connect it to the submitted app. Recruiters and judges may never see it.

Put the chart on a clear dashboard route or section. Test it on your phone and laptop. If the labels overlap on mobile, shorten names or increase chart height.