📈 Function Plotter

Graph multiple math functions with custom ranges. Built with Math.js + Chart.js.

Function 1

Presets:

⚙️ Range Settings

📌 Embed This Tool

Add this free function plotter to your website.

Click to copy

📋 When to Use the Function Graph Plotter

Math students visualize functions like sin(x), x², and ln(x) to understand curves before exams. Engineers and data analysts prototype equation behavior without launching heavy software — plot multiple functions on the same graph to compare trends. Teachers use it to demonstrate transformations (shift, scale) interactively. The preset chips give you instant examples; type any math.js-compatible expression to explore custom equations. Since all computation runs in your browser, no data ever leaves your device.

⚙️ How the Function Graph Plotter Works

Each function expression is parsed and compiled by math.js (v12.2) — a full-featured symbolic math library supporting trigonometry (sin, cos, tan), logarithms (log, ln), powers (^), roots (sqrt), absolute value (abs), and constants (π, e). The compiled expression is evaluated at up to 2,000 evenly-spaced x-values across your chosen range (default −10 to 10). Each (x, y) coordinate becomes a data point in a Chart.js line graph. NaN and infinite values are automatically skipped (shown as gaps in the curve) to handle undefined points cleanly — for example, 1/x shows a gap at x=0. Multiple functions share the same canvas with distinct colors; hover anywhere to see exact (x, y) coordinates with 4-decimal precision.

How to Use the Function Plotter

  1. Type a function — enter any math expression using x as the variable, e.g., sin(x), x^2 + 3*x - 2, or 1/x. Click a preset chip for quick examples.
  2. Add more functions — click "➕ Add Function" to plot multiple curves on the same graph. Each gets its own color.
  3. Set the x-axis range — adjust X Min, X Max, and the number of data points for finer resolution on complex curves.
  4. Hover to inspect — move your mouse over the graph to see exact (x, y) coordinates at any point on the curve.

Frequently Asked Questions

What math functions can I use?

The plotter uses the math.js library, which supports: sin(), cos(), tan(), log(), ln(), sqrt(), abs(), pow(), exp(), pi, e, and all basic arithmetic (+, -, *, /, ^). Use parentheses for grouping: sin(x) / (x + 1).

Why does my function show gaps?

Gaps appear where the function is undefined — e.g., 1/x at x=0, or sqrt(x) for negative x. The plotter automatically skips NaN and infinite values to create clean curves.

Can I change colors of individual functions?

Yes — each function card has a color picker. Click it to assign any color. Colors update instantly on the graph.

How do I zoom or pan the plot?

Use the X Min and X Max fields to zoom horizontally. The y-axis auto-scales to fit all visible data. For more points and smoother curves on rapidly-changing functions, increase the Points value.

Related Tools