Flame Chart
A time-ordered stack visualization that shows exactly which functions are running at every moment — the go-to tool for performance profiling in browsers and runtime engines.
// 01 — The chart
What it looks like
A flame chart showing a 200 ms JavaScript execution. Time runs left-to-right; stack depth grows upward. The widest bars consumed the most time.
// 02 — Definition
What is a flame chart?
A flame chart is a visualization of profiled code execution. The horizontal axis represents time, while the vertical axis shows the call stack depth. Each rectangle is a function call: its width is proportional to how long that function was on the stack, and it sits on top of the function that called it.
Unlike a traditional flame graph (which aggregates identical stacks), a flame chart preserves temporal order. You can see exactly when each function started and stopped, making it ideal for profiling frame-by-frame performance in browsers, game engines, and runtime environments.
The name “flame chart” comes from the spiky, flame-like silhouette formed by varying call-stack depths. The tallest peaks represent the deepest call chains; the widest bars represent the longest-running functions.
Key distinction: A flame chart is time-ordered (x-axis = real time). A flame graph is stack-merged and alphabetically sorted. Both look similar, but they answer different questions: “when did this happen?” vs. “where is time spent overall?”
// 03 — Anatomy
Parts of a flame chart
// 04 — Usage
When to use it — and when not to
- Profiling JavaScript, Python, or any runtime to find slow function calls
- You need to see the exact chronological sequence of function invocations
- Diagnosing frame drops or jank in browser rendering pipelines
- Identifying long tasks that block the main thread in web applications
- Correlating CPU usage with specific code paths over a time window
- Debugging recursive functions to see how deep the call stack grows over time
- You need a high-level summary of total time per function — use a flame graph (merged) instead
- The data is not call-stack based (e.g., network traces) — use a Gantt chart or waterfall
- The recording is very long (minutes) — the chart compresses to unreadable widths; sample first
- You want to show organizational hierarchy — use an org chart or tree diagram
- Your audience doesn’t understand call stacks — flame charts require technical literacy
- You need to compare two profiles side-by-side — a differential flame graph is better
// 05 — Reading guide
How to read a flame chart
Flame charts look intimidating but follow a few simple rules.
Time flows left-to-right
The horizontal axis is wall-clock time. Events on the left happened earlier than events on the right.
Find the widest bars first
Width equals duration. The widest bars represent the functions that consumed the most time — your bottlenecks.
Read stacks bottom-up
The bottom bar is the entry point (e.g., main()). Each bar above it was called by the bar below. The topmost bar is the leaf function actually executing.
Look for tall, narrow spikes
Tall stacks that are very narrow indicate deep but fast call chains. Tall and wide spikes are deep and slow — investigate those first.
Zoom into regions of interest
Most profiler UIs let you click and drag to zoom. Focus on the 16 ms budget frames (60 fps) or on specific time ranges where jank occurred.
// 06 — Pitfalls
Common mistakes
Confusing flame charts with flame graphs
Fix: Remember: flame charts are time-ordered; flame graphs are stack-merged. They answer different questions.
Recording too long a window
Fix: Profile only the problematic time range (1–3 seconds). Long recordings compress frames to a few pixels.
Ignoring idle time
Fix: White gaps between frames are idle periods. Large gaps mean the CPU was waiting — possibly for network I/O.
Focusing only on stack depth
Fix: Depth shows complexity, but width shows cost. A shallow, wide bar is often a bigger problem than a tall, narrow spike.
Not filtering noise
Fix: Profilers capture internal engine functions. Filter to user-land code first to see your own bottlenecks.
// 07 — In the wild
Real-world examples
Chrome DevTools Performance panel
The most widely used flame chart. Records JavaScript execution, layout, paint, and compositing events.
Firefox Profiler
Firefox’s built-in profiler generates time-ordered flame charts for both JS and native code paths.
Android Studio CPU Profiler
Shows Java/Kotlin method traces as flame charts for debugging mobile app performance.
Unity Profiler
Game developers use flame charts to identify per-frame CPU spikes in game loops.
Datadog APM / Jaeger
Distributed tracing tools render service call trees as flame-chart-style span waterfalls.
// 08 — At a glance
Quick reference
| Also known as | Timeline flame chart, call-stack timeline |
| Category | Hierarchy |
| Typical data | CPU profiler samples, function call stacks with timestamps |
| X-axis | Wall-clock time (chronological) |
| Y-axis | Call stack depth (caller at bottom, callee on top) |
| Width encodes | Duration of the function call |
| Common tools | Chrome DevTools, Firefox Profiler, Speedscope, perf |
// 09 — Variations
Variations
Inverted flame chart (icicle)
Flips the y-axis so the root is at the top and callees grow downward. Used in some profiler UIs.
Multi-lane flame chart
Shows multiple threads or processes as parallel horizontal lanes, each with its own flame chart.
Annotated flame chart
Overlays markers for events (GC pauses, layout shifts, user interactions) on the time axis.
Differential flame chart
Colors frames by performance delta — red for slower, blue for faster — comparing two recordings.
// 10 — FAQs
Frequently asked questions
What is a flame chart?+
A flame chart is a visualization of profiled code execution. The horizontal axis represents time, while the vertical axis shows the call stack depth. Each rectangle is a function call: its width is proportional to how long that function was on the stack, and it sits on top of the function that called it.
When should you use a flame chart?+
Use a flame chart when profiling JavaScript, Python, or any runtime to find slow function calls. It also works well when you need to see the exact chronological sequence of function invocations, and when diagnosing frame drops or jank in browser rendering pipelines.
When should you avoid a flame chart?+
Avoid a flame chart when you need a high-level summary of total time per function — use a flame graph (merged) instead. It is also a poor fit when the data is not call-stack based (e.g., network traces) — use a Gantt chart or waterfall, or when the recording is very long (minutes) — the chart compresses to unreadable widths; sample first.
Is a flame chart suitable for dashboards?+
Yes — a flame chart can work well in dashboards as long as the panel is large enough for readers to perceive the encoded values, has a clear title, and includes the legend or axis labels needed to interpret it.
What category of chart is a flame chart?+
Flame Chart belongs to the Hierarchy family of charts. Charts in that family are designed to answer the same kind of question, so they often work as alternatives when one doesn't quite fit your data.
How do you read a flame chart?+
Start with the axis labels and legend, then look at the overall shape before zooming into individual marks. Compare prominent features against the rest of the data, and verify any conclusion against the underlying numbers when precision matters.