Chart API Reference

This page documents every public class, interface, and enum in the PowerPortalsPro charting library.

Components

The Blazor components that render charts.

FluentUIChart

A theme-aware wrapper around the base Chart component. Reads colors from the active Fluent UI design tokens, auto-fills dataset colors from a Fluent-derived palette, and re-themes the chart when the user toggles between light and dark mode.

DataverseChart

A convenience component that wraps FluentUIChart and owns the data-loading lifecycle. Accepts a DataverseChartDataSource, handles loading state, error display, and provides an optional refresh button.

Chart Types & Enums

Enumerations for chart type selection and date bucketing.

ChartType

The set of chart types supported by the underlying Chart.js library: Bar, Line, Pie, Doughnut, PolarArea, Radar, Bubble, and Scatter.

ChartDateGrouping

Date bucketing intervals for grouping datetime columns in aggregate queries. Includes simple values (Day, Month, Year) and combined values (MonthAndYear, QuarterAndYear, etc.) that produce formatted labels like "Jan 2024".

Data Model

The classes and interfaces that represent chart data, data points, theming, and click event payloads.

ChartData

Bundles the fully-shaped data needed to render a chart: a list of category labels (X axis) and one or more datasets. Returned by data source LoadAsync methods.

ChartDataset

Represents a single dataset (series) in a chart. Contains data points, a legend label, and optional color overrides for background and border.

DataPoint

Default implementation of IDataPoint. Subclass to attach caller-defined context (record id, region, etc.) that will be available to click handlers.

DataverseDataPoint

An IDataPoint implementation that retains the underlying Dataverse TableRecord it was projected from. Click handlers can pattern-match on this type to access the row's id, table name, and column values.

ChartTheme

Theme and formatting overrides applied to a chart instance — text color, gridline color, Y-axis value formatting (prefix/suffix), chart title, stacked mode, and legend position.

ChartClickEventArgs

Payload describing a click on a single chart element (bar, slice, point, etc.). Contains the dataset index, data index, label, value, dataset label, and the original IDataPoint instance for pattern matching.

Data Sources

Data source classes that load chart data from Dataverse via FetchXML queries.

DataverseChartDataSource

Base data source class that accepts raw FetchXML and column mappings. Executes the query via IPowerPortalsProService, handles RelatedRecordValue unwrapping for aggregate results, and shapes rows into single- or multi-series ChartData.

AggregateDataverseChartDataSource

A subclass that builds an aggregate FetchXML query from simple properties (TableName, GroupByColumn, AggregateColumn, Aggregate) instead of requiring raw FetchXML. Supports date bucketing, multi-series, view-based filtering, inline filter fragments, and linked entity joins.

ViewDataverseChartDataSource

A subclass that resolves its FetchXML from a Dataverse saved view (saved query). The caller still sets LabelColumn and ValueColumn to indicate which columns map to labels and values.

ChartLinkedEntity

Describes a linked entity (join) used by AggregateDataverseChartDataSource to place a groupby or series attribute on a related table. Supports unlimited nesting via the LinkedEntity property for multi-hop joins (e.g. opportunity → account → business unit).

Sharing one datasource between a grid and a chart

A ViewDataSource can drive a MainGrid and one (or more) DataverseChart components in lockstep. One server round-trip returns the row page and the chart aggregation atomically, so there's no race where the chart shows numbers for an old filter while the grid is on a new one. Search, sort, page, and view changes on either consumer flow through the same datasource.

Construct the datasource in OnInitialized (so the injected IGridService is available) and pass it to both views via DataSource. The grid renders the row page; the chart renders AggregationResults[AggregationIndex]. Multiple aggregations are supported — each entry powers a separate chart pointing at the same datasource.

<DataverseChart DataSource="_ds" Type="ChartType.Pie" />
<MainGrid       DataSource="_ds" TableName="opportunity" />

@code {
    private ViewDataSource? _ds;

    protected override void OnInitialized()
    {
        _ds = new ViewDataSource(_gridService, new ViewDataSourceOptions
        {
            ViewId = _openOpportunitiesViewId,
            Aggregations = new[]
            {
                new ChartAggregation
                {
                    GroupBy = new ChartGrouping { Column = "opportunityratingcode" },
                    AggregateColumn = "opportunityid",
                    Aggregate = AggregateType.Count,
                },
            },
        });
    }

    public async ValueTask DisposeAsync()
    {
        if (_ds is not null) await _ds.DisposeAsync();
    }
}

Clicking a chart slice sets the datasource's Highlight, which dims non-matching rows in the paired grid (and non-matching slices in the chart) without re-fetching. Click the same slice again to clear. For drill-through navigation or a hard filter, set CrossFilterMode="ChartCrossFilterMode.None" and handle OnElementClick yourself.