Data Visualisation - lesson 3 | HackIndia Skills

Key point

The honest axis rule

Your axis should make the size of change feel like the real size of change.

If the chart uses bars, start the value axis at zero. If the chart uses lines, you may zoom in, but you must make the range obvious.

Why axes matter

A dashboard chart is often read in 5 seconds. A bad axis can make a small change look huge, or hide a real problem.

For your HackIndia project, the chart should help someone decide something. Do not make your app look better by stretching the scale.

Your to-do

Choose the scale

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.

Use a linear scale for normal counts, money, marks, bookings, users, and most hackathon metrics.
Use a time scale when the x-axis is dates, weeks, or months.
Use a log scale only when values differ by a lot, such as 10, 100, 1,000, and you clearly label it.
Avoid mixing two y-axes unless you have a strong reason and explain both axes.
Keep units visible, such as ₹, ms, %, users, or submissions.

0 of 5 done

Common mistake

Common axis tricks

Do not cut the y-axis on a bar chart. A bar encodes value by length, so cutting the bottom changes the visual meaning.

Do not reverse an axis unless there is a known reason, like rank 1 at the top in a table. Most readers expect up and right to mean more.

Example

Small change, fair view

Your app has weekly active users: 92, 96, 101, 105. A y-axis from 90 to 106 makes growth look steep. That may be okay for a line chart if the axis labels are clear, but not for a bar chart.

Here is a safe Chart.js bar chart setup. The y-axis starts at zero and labels the unit.

const chartConfig = {
  type: 'bar',
  data: {
    labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
    datasets: [{
      label: 'Active users',
      data: [92, 96, 101, 105],
      backgroundColor: '#2563eb'
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true,
        title: {
          display: true,
          text: 'Active users'
        }
      },
      x: {
        title: {
          display: true,
          text: 'Week'
        }
      }
    }
  }
};

Tip

Ask AI to audit

Paste your chart config or screenshot into ChatGPT, Gemini, or Claude and ask for an axis honesty check.

Check the answer yourself. AI may miss the chart type, unit, or whether a zoomed axis is explained.

Prompt:
Review this dashboard chart for honest axes and scales.
Tell me if the y-axis should start at zero, whether the units are clear, and whether the scale could mislead a recruiter or hackathon judge.

Your to-do

Axis checklist

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.

Check if the chart type uses length, like bars or columns.
Start length-based charts at zero.
Show the axis range clearly if you zoom a line chart.
Label every axis with the unit, not just the metric name.
Use tick marks that are easy to read on a phone screen.

0 of 5 done

Your to-do

Do this now

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.

Open the chart you plan to use in your HackIndia dashboard.
Write the project question it answers in one sentence.
Check if the y-axis starts at zero when using bars or columns.
Add the unit to each axis label, such as ₹, %, ms, or users.
Save one before-after screenshot if you fix a misleading scale.

0 of 5 done

Use honest axes and scales

The honest axis rule

Why axes matter

Choose the scale

Common axis tricks

Small change, fair view

Ask AI to audit

Axis checklist

Do this now

Quick check