Design (LLD) a Bar Graph Library - Machine Coding

Bar Graph Library - Part 1

1. 2-D Graph with (x, y axis)

2. Uniform Range (like value will be in multiple or will have same difference)

3. Each Bar Can have Two Colors (both can be anything but same for all bars)

4. Values can be Added dynamic (it can be real time also)

Features

1. Generate 2D Graph

2. Create Bar with specific color

3. Render the 2d graph using the given bars values

Rough Solution (LLD-Machine Coding)

// Axis class using Builder Pattern
class Axis {
    private int base;
    private int range;

    private Axis(Builder builder) {
        this.base = builder.base;
        this.range = builder.range;
    }

    public static class Builder {
        private int base;
        private int range;

        public Builder setBase(int base) {
            this.base = base;
            return this;
        }

        public Builder setRange(int range) {
            this.range = range;
            return this;
        }

        public Axis build() {
            return new Axis(this);
        }
    }
}

// 2D Graph using Composite Pattern
interface GraphComponent {
    void render();
}

class Bar extends Element implements GraphComponent {
    private int width;
    private int height;

    public Bar(String color, int width, int height) {
        super(color);
        this.width = width;
        this.height = height;
    }

    @Override
    public void render() {
        System.out.println("Drawing bar with width " + width + " and height " + height + " in color " + getColor());
    }
}

// BarGraph with Composite Pattern and Strategy Pattern for rendering
class BarGraph implements GraphComponent {
    private List<GraphComponent> bars = new ArrayList<>();

    public void addBar(GraphComponent bar) {
        bars.add(bar);
    }

    @Override
    public void render() {
        for (GraphComponent bar : bars) {
            bar.render();
        }
    }
}

// Element class
abstract class Element {
    private String color;

    public Element(String color) {
        this.color = color;
    }

    public String getColor() {
        return color;
    }
}

// Renderer interface using Strategy Pattern
interface Renderer {
    void renderGraph(BarGraph graph);
}

// Concrete renderer using Strategy Pattern
class SimpleRenderer implements Renderer {
    @Override
    public void renderGraph(BarGraph graph) {
        System.out.println("Rendering Bar Graph in Simple mode.");
        graph.render();
    }
}

// Factory Method for creating bars
class BarFactory {
    public static Bar createBar(String color, int width, int height) {
        return new Bar(color, width, height);
    }
}

// Main class to demonstrate usage
public class Main {
    public static void main(String[] args) {
        // Using Builder to create axes
        Axis xAxis = new Axis.Builder().setBase(0).setRange(10).build();
        Axis yAxis = new Axis.Builder().setBase(0).setRange(100).build();

        // Using Factory Method to create bars
        Bar bar1 = BarFactory.createBar("red", 5, 50);
        Bar bar2 = BarFactory.createBar("blue", 4, 70);

        // Using Composite Pattern to add bars to graph
        BarGraph barGraph = new BarGraph();
        barGraph.addBar(bar1);
        barGraph.addBar(bar2);

        // Using Strategy Pattern to render graph
        Renderer renderer = new SimpleRenderer();
        renderer.renderGraph(barGraph);
    }
}

🔴 Key Issues in above Design

1️⃣ Axis Is Under-Modeled (LLD Issue)

Problem

class Axis {
    private int base;
    private int range;
}

LLD Issues

• Axis lacks:

  • tick interval (uniform range requirement)

  • min/max validation

  • scaling logic (value → pixel mapping)

• range is ambiguous (end? size? max?)

Impact

• Renderer must guess how to map values

• Hard to support zooming or rescaling later

Interview Red Flag

Axis is a value object, but business rules are missing.

Solution