Home Charts Render Modes
TerraFluent.Chart.Reporting
Render Modes
The render mode decides what ships in the SVG. Static is pure markup for PDF and email clients, Animated adds SMIL, and Interactive is the only mode that emits JavaScript.
Read the reference documentation →
Static Mode (PDF / Email)
SvgMode.Static — no CSS hover rules, no embedded JS.
Annual Report — Revenue Summary — Static SVG — safe for PDF and email
Annual Report — Revenue Summary — Static SVG — safe for PDF and email — Series: Revenue, Target. Categories: Q1, Q2, Q3, Q4. Values range from 300 to 480.
Annual Report — Revenue Summary
Static SVG — safe for PDF and email
0
100
200
300
400
Revenue ($k)
Q1
Q2
Q3
Q4
Revenue
Target
terrafluent.dev
terrafluent.dev
Interactive Mode (Browser)
SvgMode.Interactive — CSS hover tooltips + embedded JS.
Interactive Sales Dashboard — Hover over data points · Click to highlight
Interactive Sales Dashboard — Hover over data points · Click to highlight — Series: Online Sales, In-Store Sales, Total. Categories: Jan to Jun. Values range from 140 to 505.
Interactive Sales Dashboard
Hover over data points · Click to highlight
0
100
200
300
400
500
USD (thousands)
Jan
Feb
Mar
Apr
May
Jun
Month
Online Sales: 180
Online Sales: 210
Online Sales: 190
Online Sales: 260
Online Sales: 310
Online Sales: 280
In-Store Sales: 140
In-Store Sales: 160
In-Store Sales: 175
In-Store Sales: 200
In-Store Sales: 195
In-Store Sales: 220
Total: 320
Total: 370
Total: 365
Total: 460
Total: 505
Total: 500
Online Sales
In-Store Sales
Total
terrafluent.dev
terrafluent.dev
Animated Column (SMIL)
Bars grow from baseline on load via SMIL.
Quarterly Revenue — Grow Animation — Bars animate from baseline on load (SMIL <animate>)
Quarterly Revenue — Grow Animation — Bars animate from baseline on load (SMIL <animate>) — Series: 2024, 2025. Categories: Q1, Q2, Q3, Q4. Values range from 310 to 540.
Quarterly Revenue — Grow Animation
Bars animate from baseline on load (SMIL <animate>)
0
100
200
300
400
500
Revenue ($k)
Q1
Q2
Q3
Q4
Quarter
2024: 310
2024: 390
2024: 420
2024: 510
2025: 340
2025: 430
2025: 460
2025: 540
2024
2025
terrafluent.dev
terrafluent.dev
Fixed Width Chart
Width(600) — pins the SVG to exactly 600 px wide.
Fixed Width — 600 px — Width(600) pins the SVG to exactly 600 px wide.
Fixed Width — 600 px — Width(600) pins the SVG to exactly 600 px wide. — Series: Sales. Categories: Jan to Jun. Values range from 320 to 520.
Fixed Width — 600 px
Width(600) pins the SVG to exactly 600 px wide.
0
100
200
300
400
500
Units Sold
Jan
Feb
Mar
Apr
May
Jun
Month
Sales: 320
Sales: 410
Sales: 390
Sales: 480
Sales: 520
Sales: 445
Sales
terrafluent.dev
terrafluent.dev
Responsive Width Chart
ResponsiveWidth() — SVG fills its container.
Responsive Width — 100 % — ResponsiveWidth() sets width="100%" so the SVG fills its container.
Responsive Width — 100 % — ResponsiveWidth() sets width="100%" so the SVG fills its container. — Series: Actuals, Target. Categories: Q1, Q2, Q3, Q4. Values range from 210 to 390.
Responsive Width — 100 %
ResponsiveWidth() sets width="100%" so the SVG fills its container.
0
100
200
300
Revenue ($k)
Q1
Q2
Q3
Q4
Quarter
Actuals: 210
Actuals: 280
Actuals: 310
Actuals: 390
Target: 250
Target: 270
Target: 320
Target: 380
Actuals
Target
terrafluent.dev
terrafluent.dev
RenderToDataUri()
Embeds the chart as a Base64 data: URI inside an HTML img tag.
