Charts

The PowerPortalsPro charting module provides interactive, theme-aware charts built on Chart.js. Charts automatically adapt to the active Fluent UI theme (light/dark mode, accent colors), load data directly from Dataverse via aggregate FetchXML queries, and support click events that let users drill into the underlying data.

Chart Types

Each chart type is rendered by the FluentUIChart component (or the DataverseChart convenience wrapper) with the Type parameter set to the desired ChartType enum value.

  • Bar Chart — vertical bars for comparing categories. Supports stacked mode and multi-series.
  • Line Chart — connected points for trends over time. Supports year-over-year comparisons.
  • Pie Chart — proportional slices of a single measure across categories.
  • Doughnut Chart — same as pie with a hollow center for a cleaner look.
  • Radar Chart — multi-dimensional comparison on a radial grid.
  • Polar Area Chart — like pie, but each segment's radius is proportional to its value.
  • Funnel Chart — visualize progressive reduction through stages, narrowing from top to bottom.

Key Features

All chart types share a common set of capabilities:

  • Theme-aware — reads Fluent UI design tokens for text, gridlines, and accent colors; re-themes automatically when the user toggles light/dark mode.
  • Dataverse data sources — load chart data from Dataverse with a single LoadAsync call. No manual FetchXML needed for common scenarios.
  • Aggregate queries — Sum, Count, CountColumn, Avg, Min, Max via AggregateDataverseChartDataSource.
  • Click interactivity — OnElementClick fires a ChartClickEventArgs with dataset index, data index, label, value, and the original IDataPoint for pattern matching.
  • Date bucketing — Day, Week, Month, Quarter, Year, and combined groupings like MonthAndYear or QuarterAndYear.
  • Year-over-year — SeriesDateGrouping splits the same date column into multiple series by a different time interval.
  • Linked entity grouping — group or split by a column on a related table via GroupByLinkedEntity / SeriesLinkedEntity with unlimited nesting.
  • View-based filtering — pass ViewIds and DefaultViewId on DataverseChart to show a dropdown that lets users switch between saved Dataverse views. The selected view's filter conditions are merged into the aggregate query automatically.
  • Stacked charts — Stacked="true" stacks datasets on top of each other.
  • Title & legend — Title for a heading above the chart; LegendPosition for top/bottom/left/right/hidden.
  • Value formatting — YAxisPrefix/YAxisSuffix and XAxisPrefix/XAxisSuffix for currency, percentages, and custom labels.
  • Export as image — download the chart as a PNG with one click.
  • Refresh button — reload data from Dataverse without leaving the page.
  • Themed border — optional rounded border using Fluent design tokens via ShowBorder.

Data Sources

Three data source classes cover the spectrum from full control to zero-configuration:

  • DataverseChartDataSource — accepts raw FetchXML with explicit column mappings. Maximum flexibility for complex queries.
  • AggregateDataverseChartDataSource — set properties like TableName, GroupByColumn, AggregateColumn, and Aggregate. The data source builds the FetchXML automatically.
  • ViewDataverseChartDataSource — resolves FetchXML from a saved Dataverse view. Set LabelColumn and ValueColumn to indicate which columns map to labels and values.

Getting Started

The fastest way to add a chart is the DataverseChart convenience component with an AggregateDataverseChartDataSource. See the Bar Chart demo for a complete walkthrough, or the API Reference for documentation on every class and property.