Use the official DxChartListEditor from v25.1

CS/OutlookInspired.Blazor.Server/Charts/OpportunityPieChart.razor

@@ -0,0 +1,40 @@
+@using System.Linq.Expressions
+@using DevExpress.ExpressApp.Blazor.Editors
+@using DevExpress.ExpressApp.Blazor.Editors.Models
+@using DevExpress.ExpressApp.Utils
+@using OutlookInspired.Module.BusinessObjects
+@using System.Drawing
+
+<DxPieChartSeries ArgumentField="(Opportunity item) => CaptionHelper.GetDisplayText(item.Stage)"
+                  ValueField="Item => Item.Value"
+                  SummaryMethod="items => items.Sum()">
+    <DxChartSeriesLabel Visible="true" Position="RelativePosition.Outside" ValueFormat="ChartElementFormat.Thousands(1)">
+        <DxChartSeriesLabelConnector Visible="true" />
+    </DxChartSeriesLabel>
+</DxPieChartSeries>
+<DxChartTooltip Enabled="true" Position="RelativePosition.Outside">
+    <div style="margin: 0.75rem">
+        <div class="fw-bold">@context.Point.Argument</div>
+        <div>Sales: @($"${context.Point.Value:#,0.}")</div>
+    </div>
+</DxChartTooltip>
+<DxChartLegend HorizontalAlignment="HorizontalAlignment.Center" VerticalAlignment="VerticalEdge.Bottom" Position="RelativePosition.Outside" Orientation="Orientation.Horizontal" />
+
+@code {
+    [CascadingParameter] public DxChartListEditor ChartEditor { get; set; }
+
+    protected override void OnParametersSet()
+    {
+        base.OnParametersSet();
+        if (ChartEditor.ChartModel is DxPieChartModel pieChart)
+        {
+            pieChart.SetAttribute("style", "margin-top:100px");
+            pieChart.Diameter = 1;
+            pieChart.InnerDiameter = 0.5;
+            pieChart.StartAngle = 0;
+            pieChart.SegmentDirection = PieChartSegmentDirection.Clockwise;
+            pieChart.CustomizeSeriesPoint = e
+                => e.PointAppearance.Color = ColorTranslator.FromHtml(e.Point.DataItems.Cast<Opportunity>().First().Stage.Color());
+        }
+    }
+}

CS/OutlookInspired.Blazor.Server/Charts/SalesCustomerChart.razor

@@ -0,0 +1,13 @@
+@using OutlookInspired.Module.BusinessObjects
+
+<DxChartCommonSeries SeriesType="ChartSeriesType.Bar"
+                     ArgumentField="(MapItem item) => item.CustomerName"
+                     NameField="item => item.CustomerName"
+                     ValueField="item => item.Total"
+                     SummaryMethod="items => items.Sum()" />
+<DxChartLegend Visible="false" />
+<DxChartTooltip Enabled="true" Position="RelativePosition.Outside">
+    <div style="background-color: #505050;color: white">
+        @context.Point.SeriesName: @($"{(decimal)context.Point.Value:$0,.#K}")
+    </div>
+</DxChartTooltip>

CS/OutlookInspired.Blazor.Server/Charts/SalesProductChart.razor

@@ -0,0 +1,13 @@
+@using OutlookInspired.Module.BusinessObjects
+
+<DxChartCommonSeries SeriesType="ChartSeriesType.Bar"
+                     ArgumentField="(MapItem item) => item.ProductName"
+                     NameField="item => item.ProductName"
+                     ValueField="item => item.Total"
+                     SummaryMethod="items => items.Sum()" />
+<DxChartLegend Visible="false" />
+<DxChartTooltip Enabled="true" Position="RelativePosition.Outside">
+    <div style="background-color: #505050;color: white">
+        @context.Point.SeriesName: @($"{(decimal)context.Point.Value:$0,.#K}")
+    </div>
+</DxChartTooltip>