# Pie charts Published: September 8, 2026 Version: ^2.19.0 Flux donut chart showing $128k in total revenue alongside a four-category, color-matched legend on white Flux charts now support **pies and donuts**. Here’s what a basic pie chart looks like: ```blade ``` Each row in `$data` becomes a slice. Give it a `label` and a numeric `value`, and Flux handles the proportions and colors. ## Tooltips that follow the slice Close-up of the Subscriptions slice with its matching purple tooltip showing 48%, while the surrounding chart and legend are faded To let someone hover a slice and see its name and value, add a tooltip inside your chart: ```blade ``` The same tooltip row works for every slice: `label-field` picks up its name, and the little indicator dot matches its color. ## The little details I wanted it to be easy to keep track of a slice as your data changes, so **colors stay with their slices**. Flux uses each row's `id`, or its label when there's no ID. Sorting your data or removing a row won't shuffle the remaining colors, and you can set a row's `color` yourself if you already have a palette in mind. You can help someone follow a slice while they're hovering, too. Flux marks the hovered slice as active and the others as inactive, leaving the styling up to you. For example, these classes gently dim the other slices: ```blade class="transition-opacity data-inactive:opacity-40" ``` To try these options together, pick the Pie preset in the [interactive chart builder](https://fluxui.dev/charts). You can tweak the chart there, then copy the Blade into your app. [Check out the pie chart docs →](https://fluxui.dev/components/chart#pie-chart)