Data Visualisation - lesson 6 | HackIndia Skills

Key point

One job only

A dashboard chart should answer one project question with the least visual noise possible. If a line, icon, colour, border, or label does not help the reader understand the answer, remove it.

What counts as clutter

Clutter is anything that competes with the data. Common examples are heavy gridlines, thick borders, shadows, gradients, too many colours, repeated labels, and legends that could be direct labels.

A recruiter may spend less than a minute on your demo. A clean chart lets them understand your project result without asking you to explain every design choice.

Common mistake

Avoid these traps

Do not use 3D charts. They make bars, slices, and points harder to compare. Do not use pie charts with many slices. After 4 or 5 categories, comparison becomes slow.

Be careful with dual-axis charts. They can make unrelated trends look connected. If you need two different units, use two small charts with clear titles instead.

Your to-do

Clean the chart

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.

Keep the chart title as the question or answer, not a vague label.
Remove backgrounds, shadows, gradients, and thick borders.
Use light gridlines only when they help compare values.
Show fewer ticks on the axis, but keep enough to read the scale.
Replace a legend with direct labels when there are only a few series.

0 of 5 done

Tip

Use the squint test

Open your chart on your phone. Squint slightly. The main pattern should still be visible.

If the loudest thing is the grid, legend, border, or colours, the chart is not ready. Make the data marks and key labels the clearest parts.

Example

Cleaner chart config

Here is a Chart.js option block that reduces noise. Use it later when you build the chart in code. The point is not this exact library. The point is the choices: no legend when labels are obvious, light gridlines, clear title, and readable ticks.

const chartOptions = {
  responsive: true,
  plugins: {
    title: {
      display: true,
      text: 'Which feature gets the most student signups?'
    },
    legend: {
      display: false
    },
    tooltip: {
      enabled: true
    }
  },
  scales: {
    x: {
      grid: {
        display: false
      },
      ticks: {
        maxRotation: 0,
        autoSkip: false
      }
    },
    y: {
      beginAtZero: true,
      grid: {
        color: '#e5e7eb'
      },
      ticks: {
        precision: 0
      },
      title: {
        display: true,
        text: 'Signups'
      }
    }
  }
};

Check AI suggestions

If you ask ChatGPT, Gemini, or Claude to improve your dashboard chart, ask for a simpler version, not a prettier version. AI tools often suggest extra colours, icons, cards, animations, or 3D styles because they look impressive in text.

Use this prompt: “Simplify this dashboard chart for a recruiter. Remove decoration. Keep the chart honest, labelled, and accessible. Tell me what to delete and why.” Then check that the answer keeps the scale clear and does not hide important data.