Skip to content

feat(flet-charts): add GaugeChart+ pie/bar/axis/line chart improvements - #7066

Draft
ndonkoHenri wants to merge 4 commits into
mainfrom
feat/charts-gauge-chart
Draft

ndonkoHenri wants to merge 4 commits into
mainfrom
feat/charts-gauge-chart

Conversation

@ndonkoHenri

@ndonkoHenri ndonkoHenri commented Nov 8, 2026 •

Copy link
Copy Markdown
Contributor

Adds GaugeChart, the chart type fl_chart 1.3.0 introduced, and the fl_chart options the other charts were missing. fl_chart goes from ^1.2.0 to ^1.3.0.

GaugeChart

image

Progress gauges, activity rings and speedometers, built from:

Part Classes
Rings, innermost first GaugeProgressRing (filled up to value, optional bgcolor track), GaugeZonesRing of GaugeZone(start, end, color)
Ticks GaugeLineTicks, GaugeCircleTicks, with optional labels
Pointers GaugeNeedlePointer, GaugeCirclePointer
Markers GaugeMarker, a line with an optional label at one value

The chart takes the scale (min_value, max_value), the arc (start_degree_offset, sweep_angle, direction), ring sizing (default_ring_width, rings_space), animation, interactive, and on_event, which sends a GaugeChartEvent with the touched ring, zone, value and angle.

fch.GaugeChart(
    max_value=100,
    rings=[
        fch.GaugeProgressRing(value=65, width=16, stroke_cap=ft.StrokeCap.ROUND),
        fch.GaugeZonesRing(width=6, zones=[
            fch.GaugeZone(0, 60, ft.Colors.GREEN),
            fch.GaugeZone(60, 85, ft.Colors.AMBER),
            fch.GaugeZone(85, 100, ft.Colors.RED),
        ]),
    ],
    ticks=fch.GaugeLineTicks(count=11),
    pointers=[fch.GaugeNeedlePointer(value=65, length=80)],
)

Design choices worth a look:

  • The parts are @ft.value types, not controls. The polymorphic bases carry a _type tag, like ChartPointShape, and the client parses them as maps.
  • Validation. Value types aren't validated on their own, so GaugeChart.before_update validates each part. Python raises a ValueError for inputs fl_chart would reject, such as a ring value outside the scale, sweep_angle over 360, a zone ending before it starts, or labels not matching the tick count. Every rule documents a Raises: entry on each property it compares.
  • Keyword-only. Every part except GaugeZone is keyword-only, so GaugeNeedlePointer(100) can't set length when value was meant.
  • Tick labels are a list of strings, one per tick, since Python can't send fl_chart a label builder.
  • Theme-aware defaults. Paint colors default to the theme's on_surface (a progress ring's to primary) instead of fl_chart's black, which disappears in dark mode. A marker label without a style gets 12-pixel text in the marker's color, since fl_chart skips labels that have no style.

Other charts

  • PieChart: PieChartSection.corner_radius and stacked PieChartSection.segments (PieChartSectionSegment).
  • BarChart: BarChartRod.label (a string or BarChartRodLabel), and label, label_style and gradient on BarChartRodStackItem. A stack item now needs a color or a gradient, so a missing one raises a ValueError instead of breaking the chart.
  • LineChart: LineChartData.gradient_area.
  • Axes: ChartAxis.label_alignment (outside, on the border, or inside the chart).
  • Events: ChartEventType values for secondary-button (right-click) taps and long presses.
  • Docs: RadarDataSet.entries gets the Raises: entry its rule was missing.

On the Dart side, each new enum has a named parser like parseStrokeCap, and resolveFlTouchEventType is a switch expression.

Examples, docs and tests

  • Examples: gauge_chart/speedometer (a slider moves the needle and the progress ring) and gauge_chart/activity_rings (tapping a ring highlights it), both in the gallery.
  • Docs: a GaugeChart page with both examples, type pages for the new classes, and entries in the sidebar, the charts index and the flet-charts README.
  • integration_tests/examples/test_gauge_chart.py: the docs image, a slider drag on the speedometer, and a tap on the outer activity ring. Its three goldens are also the docs images.

Testing

  • dart analyze and ruff are clean, and the flet-charts unit tests pass.
  • The flet-charts integration tests pass on macOS, apart from Matplotlib and Plotly, which I didn't run. Those tests don't run in CI.
  • The crocodocs build resolves every link.

Not in this PR

Summary by Sourcery

Add GaugeChart support and broaden existing chart capabilities through the fl_chart 1.3.0 upgrade.

New Features:

  • Add GaugeChart with configurable rings, ticks, markers, pointers, animation, interaction, and gauge events.
  • Add gallery examples and integration coverage for speedometer and activity-ring gauges.

Bug Fixes:

  • Reject bar chart stack items that lack both a color and a gradient.

Enhancements:

  • Expand pie, bar, line, axis, and chart event APIs with additional fl_chart capabilities, including pie segments, rod labels and gradients, line gradient areas, axis label placement, and secondary-button interactions.
  • Upgrade the charts Flutter dependency to fl_chart 1.3.0 and expose the new chart types and supporting value classes.

Documentation:

  • Document GaugeChart and its supporting types, and add it to the charts documentation and navigation.

Tests:

  • Add integration tests and golden screenshots covering GaugeChart rendering, slider updates, and ring interaction.

Chores:

  • Add GaugeChart to the public flet-charts exports and release changelogs.

GaugeChart draws progress gauges, activity rings and speedometers from
fl_chart 1.3.0's GaugeChartData. Its rings are GaugeProgressRing or
GaugeZonesRing (made of GaugeZone), with GaugeLineTicks or
GaugeCircleTicks, GaugeMarker, and GaugeNeedlePointer or
GaugeCirclePointer. Every part is a control, so Python rejects the
values fl_chart asserts on. Tick labels are a list of strings, one per
tick, and paint colors default to the theme's on_surface. on_event
reports the touched ring, zone, value and angle as GaugeChartEvent.

The other charts get the fl_chart features Flet was missing:
PieChartSection.corner_radius and segments, BarChartRod.label,
label/label_style/gradient on BarChartRodStackItem,
ChartAxis.label_alignment, LineChartData.gradient_area, and
ChartEventType values for secondary-button events.

Docs pages, two examples (speedometer, activity_rings) and the gallery
entry come with it.
The rings, zones, ticks, pointers and markers are plain data, so they
are now @ft.value types instead of controls. The polymorphic bases carry
a _type tag, like ChartPointShape, and the client parses them as maps.
Value types aren't validated on their own, so GaugeChart.before_update
validates each part. Every part except GaugeZone is keyword-only, so
GaugeNeedlePointer(100) no longer sets length instead of value.

GaugeChartEvent.on_value is renamed to is_on_value, since on_ is reserved
for event handlers.

Raises entries now sit on every property a cross-field rule compares,
including RadarDataSet.entries. GaugeTicks.label_style and
BarChartRodLabel.text_style document their default.

On the Dart side, each new enum gets a named parser like
parseStrokeCap, and resolveFlTouchEventType is a switch expression.
The flet-charts changelog entry is split into one item per chart.
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Nov 8, 2026 •

Copy link
Copy Markdown

Deploying flet-website-v2 with  Cloudflare Pages  Cloudflare Pages

Latest commit: a761c0b
Status: ✅  Deploy successful!
Preview URL: https://76c78c27.flet-website-v2.pages.dev
Branch Preview URL: https://feat-charts-gauge-chart.flet-website-v2.pages.dev

View logs

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant