Graphing Calculator

A free, fast, and fully client-side online graphing calculator. Plot multiple functions, drag sliders to explore parameters, find roots and intersections automatically, and export your graph as a PNG — all in a single dependency-free HTML file.

🔗 Live demo: https://heretool.com/graphing-calculator

Features

• Multiple equation types — plot explicit functions (y = ...), vertical lines (x = ...), and implicit equations (y = ... compared against any expression) side by side.
• Up to 8 simultaneous functions, each with its own color swatch you can click to cycle through a curated palette.
• Custom parameters & sliders — any letter used in an equation other than x/y (e.g. a, b) automatically becomes a live slider (range −10 to 10) so you can explore how a function changes in real time.
• Automatic analysis — roots, y-intercepts, and intersections between curves are detected via bisection and marked directly on the graph, with a chip panel listing their coordinates.
• Interactive canvas — pan by dragging, zoom with the scroll wheel or pinch-to-zoom on touch devices, and hover to see coordinates and nearby points of interest.
• Built-in expression shortcuts — quick-insert buttons for sin, cos, tan, powers, π, parentheses, and basic operators.
• Export & share — download the current graph as a PNG, or copy a shareable link.
• Zero dependencies — no build step, no external libraries, no server required. It's a single index.html file that runs entirely in the browser.
• Responsive — works on desktop, tablet, and mobile, with touch gestures for pan/zoom.

Supported syntax

The built-in parser understands:

• Standard operators: + - * / ^
• Parentheses and implicit multiplication (e.g. 2x, a(x+1), 2sin(x))
• Functions: sqrt, abs, ln, log (base 10), sin, cos, tan, exp, asin, acos, atan
• Constants: pi, e
• Equation forms:
  • y = f(x) — explicit function
  • x = f(y-independent expression) — vertical line
  • Any other left = right — plotted implicitly (e.g. x^2 + y^2 = 25)
  • No = sign at all — treated as y = expression

Any other single-letter identifier (e.g. a, b, k) is treated as an adjustable parameter and gets its own slider.

Getting started

No build tools or package manager are required.

git clone https://github.com/heretool/graphing-calculator.git
cd graphing-calculator

Then either:

• Open index.html directly in your browser, or
• Serve it locally (recommended, avoids some browser file:// restrictions):

python3 -m http.server 8000
# then visit http://localhost:8000

Project structure

graphing-calculator/
├── index.html      # The entire application: markup, styles, and logic
├── LICENSE
├── CONTRIBUTING.md
└── README.md

Everything — the equation parser, the canvas renderer, and the UI — lives in index.html for simplicity and easy embedding. Contributions to split this into modules are welcome (see below).

Tech stack

• Vanilla JavaScript (no frameworks)
• HTML5 Canvas for rendering
• Hand-written recursive-descent parser for equation strings
• Plain CSS, no preprocessors

Contributing

Contributions, bug reports, and feature requests are welcome! Please see CONTRIBUTING.md for guidelines.

Ideas for future improvements:

• Additional functions (sinh, cosh, min, max, mod, factorial, etc.)
• Derivative/tangent-line visualization
• Persisting graphs via URL query parameters
• Dark mode
• Unit tests for the parser and evaluator

License

This project is licensed under the MIT License.

Credits

Built and maintained by the team at heretool.com. Try the live version here: https://heretool.com/graphing-calculator.