This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click here to see the full library
Copy and paste the Formula Graph component from SegmentUI into your Framer file.
Add input fields to your page and give each one a name attribute matching the variables in your formula (e.g., name an input "P" for principal amount).
In the component's properties, enter your formula using JavaScript syntax — variables from your inputs are auto-detected.
Configure the X-Axis settings: set the variable name that represents your x-axis (like "t" for time), define min/max values, and add labels or prefixes/suffixes as needed.
Customize appearance through the Line, Axis Appearance, and Tooltip property panels — adjust colors, fonts, show/hide dots, enable area fill, and style the tooltip.
The component works by reading input values from your page and plugging them into a JavaScript formula you provide. You write the formula using standard JavaScript math (like P * Math.pow(1 + r/100, t)), where variables like P, r, and t match the name attributes of input fields on your page. The X-axis represents one variable (usually time), and the Y-axis shows the calculated result. You can customize everything from line colors and thickness to axis labels, number formatting (with prefixes like $ or suffixes like %), and tooltips that appear on hover.
If you're not comfortable writing JavaScript formulas, you can use an AI like ChatGPT or Claude. Just describe what you want to calculate in plain English, for example: "Give me a JavaScript formula for compound interest where P is the principal, r is the annual interest rate as a percentage, and t is the number of years." The AI will give you the exact formula to paste into the component.
When you purchase this component, you'll receive:
The Component Itself - Full access to the component all future updates
Remix File with Component Setup - A complete Remix file with the component pre-configured and ready to integrate into your project.
Setup Instructions - Clear, step-by-step instructions to help you implement the component quickly and correctly.
Dedicated Support - Direct access to our team for assistance if you encounter any issues during setup or implementation.
For any queries and help setting up the component, contact hello@segmentui.com
If a component does not function as advertised and the issue cannot be resolved, you are eligible for a full refund under our quality guarantee. Refunds will not be provided for any other reasons, including change of mind, accidental purchase, lack of use, or expectations of features not explicitly advertised.
Nabeel
