TerraFluent
Get started
TerraFluent.Chart.Reporting

Labels, Legends and Tooltips

Labels, legends and tooltips carry the chart’s text, which is also the part search engines and screen readers can read. All of it is real SVG text, not a bitmap.

Read the reference documentation →

Data Labels

ShowDataLabels — values rendered on bars and line points.

Budget vs Actual — with Data Labels — ShowDataLabels on column series Budget vs Actual — with Data Labels — ShowDataLabels on column series — Series: Budget, Actual. Categories: Eng to HR. Values range from 108 to 500. Budget vs Actual — with Data Labels ShowDataLabels on column series 0 100 200 300 400 500 USD ($k) Eng Mktg Sales Ops HR 500 200 350 280 120 470 230 310 295 108 Budget: 500 Budget: 200 Budget: 350 Budget: 280 Budget: 120 Actual: 470 Actual: 230 Actual: 310 Actual: 295 Actual: 108 Budget Actual terrafluent.dev terrafluent.dev

Data Label Showcase

DataLabel: FontSize · Format — three distinct styles on one chart.

Data Label Feature Showcase — Per-series: FontSize · Format Data Label Feature Showcase — Per-series: FontSize · Format — Series: Revenue, Expenses, Profit. Categories: Q1, Q2, Q3, Q4. Values range from 130 to 510. Data Label Feature Showcase Per-series: FontSize · Format 0 100 200 300 400 500 Value ($k) Q1 Q2 Q3 Q4 Quarter $310k $420k $385k $510k $180k $210k $195k $240k +130k +210k +190k +270k Revenue: 310 Revenue: 420 Revenue: 385 Revenue: 510 Expenses: 180 Expenses: 210 Expenses: 195 Expenses: 240 Profit: 130 Profit: 210 Profit: 190 Profit: 270 Revenue Expenses Profit terrafluent.dev terrafluent.dev

Legend — Vertical Right

LegendBuilder: Vertical() · AlignRight() · SymbolRadius.

Revenue vs Cost vs Profit — Legend: Vertical · AlignRight · circular swatches Revenue vs Cost vs Profit — Legend: Vertical · AlignRight · circular swatches — Series: Revenue, Cost, Profit. Categories: Q1, Q2, Q3, Q4. Values range from 110 to 480. Revenue vs Cost vs Profit Legend: Vertical · AlignRight · circular swatches 0 100 200 300 400 USD ($k) Q1 Q2 Q3 Q4 Quarter Revenue: 320 Revenue: 410 Revenue: 390 Revenue: 480 Cost: 210 Cost: 260 Cost: 245 Cost: 290 Profit: 110 Profit: 150 Profit: 145 Profit: 190 Revenue Cost Profit terrafluent.dev terrafluent.dev

Legend — Top Center

LegendBuilder: AtTop() · AlignCenter() · Horizontal() · Padding.

Monthly Traffic by Channel — Legend: AtTop · AlignCenter · Horizontal · Padding Monthly Traffic by Channel — Legend: AtTop · AlignCenter · Horizontal · Padding — Series: Organic, Direct, Referral. Categories: Jan to Dec. Values range from 400 to 2.3k. Monthly Traffic by Channel Legend: AtTop · AlignCenter · Horizontal · Padding Organic Direct Referral 0 500 1k 1.5k 2k Sessions Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Month Organic: 1.2k Organic: 1.4k Organic: 1.5k Organic: 1.7k Organic: 1.9k Organic: 2.1k Organic: 2.3k Organic: 2.2k Organic: 2k Organic: 1.8k Organic: 1.6k Organic: 1.4k Direct: 800 Direct: 850 Direct: 900 Direct: 950 Direct: 1k Direct: 1.1k Direct: 1.2k Direct: 1.2k Direct: 1.1k Direct: 950 Direct: 850 Direct: 750 Referral: 400 Referral: 420 Referral: 440 Referral: 480 Referral: 520 Referral: 560 Referral: 600 Referral: 580 Referral: 540 Referral: 500 Referral: 460 Referral: 420 terrafluent.dev terrafluent.dev

Legend — Bottom Left

LegendBuilder: AtBottom() · AlignLeft() · SymbolSize · Offset.

Budget vs Actual vs Forecast — Legend: AtBottom · AlignLeft · large symbols · pixel offset Budget vs Actual vs Forecast — Legend: AtBottom · AlignLeft · large symbols · pixel offset — Series: Budget, Actual, Forecast. Categories: Engineering to HR. Values range from 108 to 500. Budget vs Actual vs Forecast Legend: AtBottom · AlignLeft · large symbols · pixel offset 0 100 200 300 400 500 USD ($k) Engineering Marketing Sales Operations HR Department Budget: 500 Budget: 200 Budget: 350 Budget: 280 Budget: 120 Actual: 470 Actual: 230 Actual: 310 Actual: 295 Actual: 108 Forecast: 490 Forecast: 215 Forecast: 330 Forecast: 290 Forecast: 115 Budget Actual Forecast terrafluent.dev terrafluent.dev

Tooltip — Custom Style

TooltipBuilder: FontSize · Padding · Format · TransitionDuration.

Tooltip — Custom Style — TooltipBuilder: FontSize · Padding · Format · TransitionDuration Tooltip — Custom Style — TooltipBuilder: FontSize · Padding · Format · TransitionDuration — Series: Revenue, Expenses, Profit. Categories: Q1, Q2, Q3, Q4. Values range from 110 to 480. Tooltip — Custom Style TooltipBuilder: FontSize · Padding · Format · TransitionDuration 0 100 200 300 400 USD ($k) Q1 Q2 Q3 Q4 Quarter Revenue: $320k Revenue: $410k Revenue: $390k Revenue: $480k Expenses: $210k Expenses: $260k Expenses: $245k Expenses: $290k Profit: $110k Profit: $150k Profit: $145k Profit: $190k Revenue Expenses Profit terrafluent.dev terrafluent.dev

Tooltip — No Arrow

TooltipBuilder: HideArrow() · custom Format template.

Tooltip — No Arrow — HideArrow() · custom Format · fast transition Tooltip — No Arrow — HideArrow() · custom Format · fast transition — Series: Organic, Paid. Categories: Jan to Jun. Values range from 1.8 to 6. Tooltip — No Arrow HideArrow() · custom Format · fast transition 0 1 2 3 4 5 6 Sessions (k) Jan Feb Mar Apr May Jun Month Organic — 4.2k sessions Organic — 4.8k sessions Organic — 5.1k sessions Organic — 5.6k sessions Organic — 6k sessions Organic — 5.7k sessions Paid — 1.8k sessions Paid — 2.1k sessions Paid — 1.9k sessions Paid — 2.4k sessions Paid — 2.8k sessions Paid — 2.6k sessions Organic Paid terrafluent.dev terrafluent.dev

Annotations

Annotations() — labels, lines, rectangles and circles.

Website Traffic — Annotated — Annotations() — SmartLayout is always active Website Traffic — Annotated — Annotations() — SmartLayout is always active — Series: Visitors. Categories: Jan to Aug. Values range from 32 to 110. Website Traffic — Annotated Annotations() — SmartLayout is always active 0 20 40 60 80 100 120 Visitors (k) Jan Feb Mar Apr May Jun Jul Aug Summer surge All-time high Visitors: 32 Visitors: 40 Visitors: 38 Visitors: 55 Visitors: 72 Visitors: 68 Visitors: 95 Visitors: 110 Visitors terrafluent.dev terrafluent.dev

Label Layout Builder

LabelLayout() — rotation, wrap, stagger, font scaling, collision detection.

Label Layout — Collision Detection Demo — LabelLayout: auto-rotate + font scale + stagger Label Layout — Collision Detection Demo — LabelLayout: auto-rotate + font scale + stagger — Series: 2024, Trend. Categories: North America to Australia & NZ. Values range from 130 to 610. Label Layout — Collision Detection Demo LabelLayout: auto-rotate + font scale + stagger 0 100 200 300 400 500 600 Revenue ($M) North America Latin America Western Europe Eastern Europe Middle East & Africa South Asia East Asia Pacific Australia & NZ 2024: 520 2024: 310 2024: 480 2024: 220 2024: 190 2024: 340 2024: 610 2024: 130 Trend: 520 Trend: 310 Trend: 480 Trend: 220 Trend: 190 Trend: 340 Trend: 610 Trend: 130 2024 Trend terrafluent.dev terrafluent.dev

Keep going

All chart types and features The full gallery index — 26 chart types, eight feature groups, and the cookbook. Getting started Install the package and render your first chart in a few lines of C#. API reference Every builder method, series type, enum and theme in one page.

← Back to the full chart gallery