2024

Bar Chart Maker

Harendra

21 May 2025 — 2 min read

Charts are an effective way to present data visually, and among them, bar charts are perhaps the most commonly used for comparison. In this article, we will walk through how to create a simple Bar Chart Maker using plain HTML, JavaScript, and a lightweight charting library called Chart.js.

This utility will allow users to enter their data directly in the browser, and instantly see a bar chart generated based on that input. No backend. No databases. Just a clean, browser-only solution.

🛠️ Tools We Will Use

We will keep things simple and beginner-friendly. The following components will be used:

HTML – For the structure and layout.
CSS – For basic styling.
JavaScript – To handle user input and render the chart.
Chart.js – A flexible JavaScript library for charts.

🧾 Features of Our Bar Chart Maker

Users can input labels (like months or item names).
Users can input values (like sales, counts, or any numeric data).
A bar chart is rendered dynamically based on the above input.
The chart can be regenerated with new data at any time.

📄 Complete Code

Here is the complete HTML file which you can save with a .html extension and open in any modern browser:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bar Chart Maker</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background-color: #f9f9f9;
    }
    input, button {
      margin: 5px 0;
      padding: 8px;
      width: 100%;
      box-sizing: border-box;
    }
    canvas {
      margin-top: 20px;
    }
  </style>
</head>
<body>

  <h2>Bar Chart Maker</h2>

  <label for="labelsInput">Labels (comma-separated):</label>
  <input type="text" id="labelsInput" placeholder="e.g. January, February, March">

  <label for="valuesInput">Values (comma-separated):</label>
  <input type="text" id="valuesInput" placeholder="e.g. 10, 20, 15">

  <button onclick="updateChart()">Generate Chart</button>

  <canvas id="barChart" width="600" height="400"></canvas>

  <script>
    let chartInstance;

    function updateChart() {
      const labels = document.getElementById("labelsInput").value.split(",").map(s => s.trim());
      const values = document.getElementById("valuesInput").value.split(",").map(Number);

      if (labels.length !== values.length || values.some(isNaN)) {
        alert("Please ensure that the number of labels matches the number of values, and that all values are valid numbers.");
        return;
      }

      const ctx = document.getElementById("barChart").getContext("2d");

      if (chartInstance) {
        chartInstance.destroy();
      }

      chartInstance = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: labels,
          datasets: [{
            label: 'Your Data',
            data: values,
            backgroundColor: 'rgba(54, 162, 235, 0.6)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
          }]
        },
        options: {
          responsive: true,
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    }
  </script>

</body>
</html>

🧪 Sample Input

Try pasting the following to quickly see it in action:

Labels: Q1, Q2, Q3, Q4
Values: 150, 200, 180, 220

Click Generate Chart, and the bars should appear right away!

📌 Final Thoughts

This bar chart maker is a great example of how much can be accomplished with just client-side JavaScript and a little creativity. If you wish to extend it, you could add features such as: