📈 Function Plotter

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

Graph multiple mathematical functions on a single interactive chart. Enter expressions like sin(x), x^2, or ln(x) with custom ranges and colors. Built with Math.js for expression parsing and Chart.js for smooth rendering. Zoom, pan, and toggle functions on and off for detailed comparison. Ideal for students, teachers, and data visualization.

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