How do I add a point to the graph?

Click anywhere on the coordinate plane to place a point at that location. The (x, y) values are rounded to one decimal place. You can also type exact values into the X and Y fields in the 'Add Point' panel and click Add (or press Enter).

How do I find the difference between two points?

After placing at least two points, use the A and B buttons in the points list to assign them to slots A and B, or use the dropdown selectors in the 'Point Comparison' panel. The graph will immediately draw a dashed line between them and show ΔX (in pink) and ΔY (in green) as helper legs. The panel shows ΔX, ΔY, Euclidean distance, slope, angle, and midpoint.

ΔX is the horizontal difference between two points: B.x minus A.x. ΔY is the vertical difference: B.y minus A.y. A positive ΔX means B is to the right of A; a negative ΔX means it is to the left. Together ΔX and ΔY form the two legs of a right triangle whose hypotenuse is the straight-line distance between the points.

What does the Distance value mean?

Distance is the Euclidean (straight-line) distance between the two selected points, calculated as √(ΔX² + ΔY²). It represents the length of the hypotenuse of the right triangle formed by the two points.

How do I zoom in or out?

Scroll the mouse wheel over the graph to zoom in (scroll up) or out (scroll down). You can also use the + and − buttons in the toolbar above the graph. The Reset button returns the view to the default ±10 range.

Math · Coordinates

XY Coordinate Graph

Click the graph to place points, or type (x, y) values manually. Select any two points to instantly see ΔX, ΔY, distance, slope, and midpoint — drawn live on the plane.

Click to add a point · Click an existing point to select it · Scroll to zoom

Add Point

or click anywhere on the graph

Points

No points yet.
Click the graph or add manually above.

Point Comparison

Select two different points above to see their differences.

Everything You Need on a Coordinate Plane

A clean, interactive graph for plotting points, visualising differences, and doing quick maths — no apps, no login.

🖱️

Click to Place Points

Click anywhere on the grid to drop a point at that location. Coordinates are rounded to one decimal or snapped to integers when Snap mode is on.

⌨️

Exact Manual Entry

Need precise coordinates? Type any x and y value — including negatives and decimals — into the Add Point fields and press Enter or click Add.

📐

Point Difference Panel

Assign any two points as A and B. Instantly see ΔX, ΔY, Euclidean distance, slope, angle in degrees, and the midpoint — all updated live as you change selections.

📏

Visual Delta Lines

When two points are selected, the graph draws a dashed line A → B plus a pink horizontal ΔX leg and a green vertical ΔY leg, making the right triangle visible.

🔍

Zoom In and Out

Scroll the mouse wheel or use the + / − toolbar buttons to zoom. The grid, labels, and all points scale automatically. Reset returns to the default ±10 view.

🔒

No Data Leaves Your Browser

All plotting and calculation happens on your device. Nothing is uploaded. Works offline once loaded.

How to Use

Place your first point

Click anywhere on the coordinate plane. A coloured dot appears labelled P1. The coordinates are shown next to it. Alternatively, type exact values into the X / Y fields and click Add.

Add a second point

Click again elsewhere on the graph or manually enter another coordinate pair. The second point is automatically assigned to slot B in the comparison panel.

Read the differences

The graph immediately draws the dashed line and the ΔX / ΔY legs. In the Point Comparison panel on the right, you'll see ΔX, ΔY, distance, slope, angle, and the midpoint between A and B.

Change the comparison

Click the A or B buttons beside any point in the list, or use the dropdowns in the comparison panel, to reassign which two points are being compared. The graph updates instantly.

The Maths Behind Each Value

ΔX — Horizontal Difference

ΔX = B.x − A.x

Positive if B is to the right of A, negative if B is to the left. This is the horizontal leg of the right triangle between the two points.

ΔY — Vertical Difference

ΔY = B.y − A.y

Positive if B is above A, negative if B is below. This is the vertical leg of the right triangle.

Distance — Euclidean

d = √(ΔX² + ΔY²)

The straight-line distance between two points. Derived from the Pythagorean theorem applied to the right triangle formed by ΔX and ΔY.

Slope — Rise over Run

m = ΔY / ΔX

How many units the line rises for every one unit it moves right. Undefined when ΔX = 0 (vertical line). A slope of 1 means a 45° angle.

Angle — Direction

θ = atan2(ΔY, ΔX) × 180/π

The direction from A to B measured in degrees from the positive x-axis. Ranges from −180° to +180°.

Midpoint

M = ((A.x+B.x)/2, (A.y+B.y)/2)

The exact centre point on the line segment from A to B. Useful for finding bisectors and centrepoints.

Frequently Asked Questions

Type negative values into the X or Y field in the Add Point panel. You can also click directly on the negative quadrants of the graph — the bottom half is negative Y and the left half is negative X. Zoom out first if you need to reach values beyond ±10.

Yes — add as many points as you like. Each gets a unique label (P1, P2, …) and colour. The comparison panel always works with just two at a time (A and B), but you can switch which points are compared using the A/B buttons or the dropdowns at any time.

When Snap is on, clicking the graph rounds the coordinate to the nearest integer (whole number). This is useful when you need to work with clean whole-number points. When Snap is off, coordinates are rounded to one decimal place.

Slope is ΔY ÷ ΔX. When ΔX = 0 the two points share the same x-value — they form a perfectly vertical line, and dividing by zero is undefined in mathematics. In that case the slope is displayed as "undef."

Scroll the mouse wheel over the graph: scroll up to zoom in (smaller range, more detail), scroll down to zoom out (larger range, see bigger coordinates). The + and − buttons in the toolbar do the same thing. The label next to the buttons shows the current ± range. Click Reset to return to ±10.

Related Tools

📋

About This Tool

XY Graph Plotter plots mathematical functions, parametric curves, and point datasets on a Cartesian plane with adjustable axis ranges, zoom, pan, and multi-function overlay support.

🛠

How to Use

Type a function in the input box (e.g. sin(x), x^2 - 3).
Press Enter or click Plot to draw the curve.
Add multiple functions using the + button.
Scroll to zoom; drag to pan.
Click a point on the curve to see its exact coordinates.

⚙️

Logic & Algorithm

Function strings are parsed and evaluated using a safe math expression evaluator (no eval()). The function is sampled at evenly-spaced X intervals across the visible range, producing (x, y) pairs. Discontinuities (division by zero, NaN) break the polyline into segments. Rendering is done on a <canvas> using lineTo() path drawing scaled by the current viewport transform.