Bar Chart
Render a bar chart by setting Type="bar" on the FluentUIChart component. Pass a list of category labels and one or more ChartDataset objects to define the bars. FluentUIChart is a theme-aware wrapper around the underlying Chart component, which is built on top of Chart.js.
Static Data Example
A bar chart with three uncolored datasets — colors are filled in from the active Fluent palette. Click any bar to see the click event payload, and toggle the site theme between Light and Dark to see the chart re-theme in place.
Theme Awareness
Chart.js renders to an HTML <canvas>, so CSS cannot reach into bars, axis labels, or gridlines — they are rasterized pixels. FluentUIChart works around this by reading the resolved CSS custom properties at render time and pushing the values into the Chart.js options as color, scale.ticks.color, and scale.grid.color. It subscribes to ThemeService.ThemeChanged and reapplies the palette whenever the theme changes.
Automatic Dataset Colors
Datasets that leave BackgroundColor or BorderColor null are auto-filled from a Fluent-derived series palette starting with the current accent color. Datasets that supply explicit colors are passed through unchanged.
Element Click Handling
Subscribe to OnElementClick to be notified when the user clicks on a bar (or any rendered element). The callback receives a ChartClickEventArgs with the dataset index, data index, label, value, dataset label, and the original IDataPoint instance. Subclass DataPoint to attach caller-defined context (record id, region, category, etc.) and pattern-match against your subclass in the click handler to recover it. Clicks on the chart background are ignored.
Chart Title
Set Title to display a heading above the chart. The title is rendered by Chart.js inside the canvas and uses the current theme's text color.
Stacked Charts
Set Stacked="true" to stack datasets on top of each other rather than side-by-side. This is useful for bar and line charts with multiple series where the total across all series is meaningful (e.g. total revenue = won + lost).
Legend Position
Set LegendPosition to control where the legend appears: "top" (default), "bottom", "left", "right", or "hidden" to hide it entirely.
AggregateDataverseChartDataSource
Use AggregateDataverseChartDataSource to feed a chart from Dataverse without writing raw FetchXML. Set TableName, GroupByColumn, AggregateColumn, and Aggregate. Optionally add a SeriesColumn for multi-series, a GroupByDateGrouping for date bucketing, a ViewId to merge a saved view's filter conditions, or a FilterXml fragment for inline conditions.
Dataverse Example
Estimated opportunity revenue by year, split by status (Won vs Lost) and stacked — loaded from Dataverse via AggregateDataverseChartDataSource. Click a bar to see the year, status, and revenue.
View-Based Filtering
Pass ViewIds and DefaultViewId on DataverseChart to display a view selector dropdown above the chart. When the user switches views, the selected view's filter conditions are merged into the aggregate query and the chart reloads. The ViewId on the source is not set directly — DataverseChart manages it. The view determines which records are included; the aggregate config determines how they're grouped and summarized.
View-Filtered Example
Estimated revenue by month with a view selector dropdown. Switch between views to see the chart reload with different filter criteria.
Linked Entity Grouping
Set GroupByLinkedEntity (or SeriesLinkedEntity) to group or split by a column on a related table. The builder creates a <link-entity> join and places the groupby attribute inside it. Supports unlimited nesting via ChartLinkedEntity.LinkedEntity for multi-hop joins.
The above configuration generates the following FetchXML:
Linked Entity Example
Total estimated opportunity revenue grouped by the parent account's industry — the industrycode column lives on the account table, joined via customerid.
See Also
Chart API Reference — complete documentation for all chart classes, enums, and data sources.