Data Visualisation - lesson 6 | HackIndia Skills

Data Visualisation - lesson 6 | HackIndia Skills | HackIndia

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'
      }
    }
  }
};

Cut clutter and avoid traps

One job only

What counts as clutter

Avoid these traps

Clean the chart

Use the squint test

Cleaner chart config

Check AI suggestions

Do this now

Quick check