Render a line chart by setting Type="ChartType.Line". Line charts are ideal for showing trends over time — the same AggregateDataverseChartDataSource and DataverseChart convenience component work with any chart type.
Average opportunity estimated value by year, split by rating (Hot / Warm / Cold). Click a point to see its details.
Set SeriesDateGrouping to split the same date column into multiple series by a different time interval. For example, GroupByDateGrouping = ChartDateGrouping.Month with SeriesDateGrouping = ChartDateGrouping.Year produces one line per year with months on the X-axis.
import {
AggregateDataverseChartDataSource,
AggregateType,
ChartDateGrouping,
ChartType,
} from '@powerportalspro/react-charts';
import { DataverseChart } from '@powerportalspro/react-fluent';
import { useMemo } from 'react';
export function MyChart() {
const source = useMemo(
() =>
new AggregateDataverseChartDataSource({
tableName: 'opportunity',
groupByColumn: 'actualclosedate',
groupByDateGrouping: ChartDateGrouping.Month,
seriesDateGrouping: ChartDateGrouping.Year,
aggregateColumn: 'estimatedvalue',
aggregate: AggregateType.Sum,
}),
[],
);
return (
<DataverseChart
dataSource={source}
type={ChartType.Line}
title="Revenue by Month (Year over Year)"
yAxisPrefix="$"
/>
);
}<DataverseChart Source="_source"
Type="ChartType.Line"
Title="Revenue by Month (Year over Year)"
YAxisPrefix="$" />
@code {
private readonly AggregateDataverseChartDataSource _source = new()
{
TableName = "opportunity",
GroupByColumn = "actualclosedate",
GroupByDateGrouping = ChartDateGrouping.Month,
SeriesDateGrouping = ChartDateGrouping.Year,
AggregateColumn = "estimatedvalue",
Aggregate = AggregateType.Sum,
};
}Total estimated revenue by month, with each year as a separate line. Compare seasonal patterns across years.
See Also
Chart API Reference — complete documentation for all chart classes, enums, and data sources.