Add the AreaChart element within the MAUI Grid structure on the MainPage.xaml web page, as proven beneath.
XAML
<BlazorWebView Grid.Row="0" Grid.Column="0" HostPage="wwwroot/index.html">
<BlazorWebView.RootComponents>
<RootComponent Selector="#app" ComponentType="{x:Kind pages: AreaChart}" />
</BlazorWebView.RootComponents>
</BlazorWebView>
C#
@utilizing Syncfusion.Blazor.Charts
<SfChart Title="US Music Gross sales By Format" Width="@Width">
<ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
<ChartPrimaryXAxis Minimal="new DateTime(1973, 01, 01)" Most="new DateTime(2018, 01, 01)" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" LabelFormat="yyyy" IntervalType="IntervalType.Years" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
<ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
<ChartAxisMinorTickLines Width="1"></ChartAxisMinorTickLines>
</ChartPrimaryXAxis>
<ChartPrimaryYAxis Title="In Billions (USD)" Minimal="0" Most="25" Interval="5">
<ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
<ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
</ChartPrimaryYAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@Compact" XName="Interval" YName="USD" Kind="ChartSeriesType.Space">
<ChartSeriesBorder Width="1.5" Colour="white"></ChartSeriesBorder>
</ChartSeries>
<ChartSeries DataSource="@Obtain" XName="Interval" YName="USD" Kind="ChartSeriesType.Space">
<ChartSeriesBorder Width="1.5" Colour="white"></ChartSeriesBorder>
</ChartSeries>
<ChartSeries DataSource="@Streaming" XName="Interval" YName="USD" Kind="ChartSeriesType.Space">
<ChartSeriesBorder Width="1.5" Colour="white"></ChartSeriesBorder>
</ChartSeries>
<ChartSeries DataSource="@Casette" XName="Interval" YName="USD" Kind="ChartSeriesType.Space">
<ChartSeriesBorder Width="1.5" Colour="white"></ChartSeriesBorder>
</ChartSeries>
<ChartSeries DataSource="@Vinyl" XName="Interval" YName="USD" Kind="ChartSeriesType.Space">
<ChartSeriesBorder Width="1.5" Colour="white"></ChartSeriesBorder>
</ChartSeries>
<ChartSeries DataSource="@Observe" XName="Interval" YName="USD" Kind="ChartSeriesType.Space">
<ChartSeriesBorder Width="1.5" Colour="white"></ChartSeriesBorder>
</ChartSeries>
<ChartSeries DataSource="@Different" XName="Interval" YName="USD" Kind="ChartSeriesType.Space">
<ChartSeriesBorder Width="1.5" Colour="white"></ChartSeriesBorder>
</ChartSeries>
</ChartSeriesCollection>
<ChartAnnotations>
<ChartAnnotation CoordinateUnits="Items.Level" X="new DateTime(2006, 01, 01)" Y="0.7">
<ContentTemplate>
<div model="font-weight: daring; font-size: @Dimension; coloration: white;">OTHERS</div>
</ContentTemplate>
</ChartAnnotation>
<ChartAnnotation CoordinateUnits="Items.Level" X="new DateTime(2015, 01, 01)" Y="1.2">
<ContentTemplate>
<div model="font-weight: daring; font-size: @Dimension; coloration: white;">STREAMING</div>
</ContentTemplate>
</ChartAnnotation>
<ChartAnnotation CoordinateUnits="Items.Level" X="new DateTime(2011, 06, 01)" Y="1.9">
<ContentTemplate>
<div model="font-weight: daring; font-size: @Dimension; coloration: white;">DOWNLOAD</div>
</ContentTemplate>
</ChartAnnotation>
<ChartAnnotation CoordinateUnits="Items.Level" X="new DateTime(2001, 01, 01)" Y="10">
<ContentTemplate>
<div model="font-weight: daring; font-size: @Dimension; coloration: white;">COMPACT DISC</div>
</ContentTemplate>
</ChartAnnotation>
<ChartAnnotation CoordinateUnits="Items.Level" X="new DateTime(1990, 01, 01)" Y="3">
<ContentTemplate>
<div model="font-weight: daring; font-size: @Dimension; coloration: white;">CASSETTE</div>
</ContentTemplate>
</ChartAnnotation>
<ChartAnnotation CoordinateUnits="Items.Level" X="new DateTime(1977, 01, 01)" Y="6">
<ContentTemplate>
<div model="font-weight: daring; font-size: @Dimension; coloration: white;">VINYL</div>
</ContentTemplate>
</ChartAnnotation>
<ChartAnnotation CoordinateUnits="Items.Level" X="new DateTime(1976, 01, 01)" Y="1.5">
<ContentTemplate>
<div model="font-weight: daring; font-size: @Dimension; coloration: white;">8-TRACK</div>
</ContentTemplate>
</ChartAnnotation>
</ChartAnnotations>
</SfChart>
@code {
non-public Theme Theme { get; set; }
public string Width { get; set; } = "90%";
public string Dimension { get; set; } = "11px";
public class AreaChartData
{
public DateTime Interval { get; set; }
public double USD { get; set; }
}
public Listing<AreaChartData> Different { get; set; } = new Listing<AreaChartData>
{
new AreaChartData { Interval = new DateTime(1988, 01, 01), USD = -0.16 },
new AreaChartData { Interval = new DateTime(1989, 01, 01), USD = -0.17 },
new AreaChartData { Interval = new DateTime(1990, 01, 01), USD = -0.08 },
new AreaChartData { Interval = new DateTime(1992, 01, 01), USD = 0.08 },
new AreaChartData { Interval = new DateTime(1996, 01, 01), USD = 0.161 },
new AreaChartData { Interval = new DateTime(1998, 01, 01), USD = 0.48 },
new AreaChartData { Interval = new DateTime(1999, 01, 01), USD = 1.16 },
new AreaChartData { Interval = new DateTime(2001, 01, 01), USD = 0.40 },
new AreaChartData { Interval = new DateTime(2002, 01, 01), USD = 0.32 },
new AreaChartData { Interval = new DateTime(2003, 01, 01), USD = 0.807 },
new AreaChartData { Interval = new DateTime(2005, 01, 01), USD = 1.12 },
new AreaChartData { Interval = new DateTime(2006, 01, 01), USD = 1.614 },
new AreaChartData { Interval = new DateTime(2008, 01, 01), USD = 1.210 },
new AreaChartData { Interval = new DateTime(2009, 01, 01), USD = 1.12 },
new AreaChartData { Interval = new DateTime(2011, 01, 01), USD = 0.64 },
new AreaChartData { Interval = new DateTime(2013, 01, 01), USD = 0.161 },
new AreaChartData { Interval = new DateTime(2018, 01, 01), USD = 0.080 }
};
public Listing<AreaChartData> Observe { get; set; } = new Listing<AreaChartData>
{
new AreaChartData { Interval = new DateTime(1973, 01, 01), USD = 2.58 },
new AreaChartData { Interval = new DateTime(1975, 01, 01), USD = 2.25 },
new AreaChartData { Interval = new DateTime(1977, 01, 01), USD = 3.55 },
new AreaChartData { Interval = new DateTime(1978, 01, 01), USD = 2.42 },
new AreaChartData { Interval = new DateTime(1981, 01, 01), USD = -0.24 },
new AreaChartData { Interval = new DateTime(1982, 01, 01), USD = -0 }
};
public Listing<AreaChartData> Streaming { get; set; } = new Listing<AreaChartData>
{
new AreaChartData { Interval = new DateTime(2011, 01, 01), USD = 0.48 },
new AreaChartData { Interval = new DateTime(2013, 01, 01), USD = 1.61 },
new AreaChartData { Interval = new DateTime(2015, 01, 01), USD = 2.17 },
new AreaChartData { Interval = new DateTime(2017, 01, 01), USD = 7.18 }
};
public Listing<AreaChartData> Obtain { get; set; } = new Listing<AreaChartData>
{
new AreaChartData { Interval = new DateTime(2004, 01, 01), USD = 0.48 },
new AreaChartData { Interval = new DateTime(2007, 01, 01), USD = 1.45 },
new AreaChartData { Interval = new DateTime(2012, 01, 01), USD = 2.82 },
new AreaChartData { Interval = new DateTime(2013, 01, 01), USD = 2.58 },
new AreaChartData { Interval = new DateTime(2015, 01, 01), USD = 2.01 },
new AreaChartData { Interval = new DateTime(2016, 01, 01), USD = 1.61 },
new AreaChartData { Interval = new DateTime(2017, 01, 01), USD = 0.80 }
};
public Listing<AreaChartData> Compact { get; set; } = new Listing<AreaChartData>
{
new AreaChartData { Interval = new DateTime(1990, 01, 01), USD = 0.69 },
new AreaChartData { Interval = new DateTime(1992, 01, 01), USD = 2.86 },
new AreaChartData { Interval = new DateTime(1995, 01, 01), USD = 10.2 },
new AreaChartData { Interval = new DateTime(1996, 01, 01), USD = 13.0 },
new AreaChartData { Interval = new DateTime(1997, 01, 01), USD = 14.35 },
new AreaChartData { Interval = new DateTime(1998, 01, 01), USD = 15.17 },
new AreaChartData { Interval = new DateTime(1999, 01, 01), USD = 14.89 },
new AreaChartData { Interval = new DateTime(2000, 01, 01), USD = 18.96 },
new AreaChartData { Interval = new DateTime(2001, 01, 01), USD = 18.78 },
new AreaChartData { Interval = new DateTime(2004, 01, 01), USD = 14.25 },
new AreaChartData { Interval = new DateTime(2005, 01, 01), USD = 14.24 },
new AreaChartData { Interval = new DateTime(2006, 01, 01), USD = 12.34 },
new AreaChartData { Interval = new DateTime(2007, 01, 01), USD = 9.34 },
new AreaChartData { Interval = new DateTime(2008, 01, 01), USD = 4.45 },
new AreaChartData { Interval = new DateTime(2010, 01, 01), USD = 1.46 },
new AreaChartData { Interval = new DateTime(2011, 01, 01), USD = 0.64 }
};
public Listing<AreaChartData> Casette { get; set; } = new Listing<AreaChartData>
{
new AreaChartData { Interval = new DateTime(1976, 01, 01), USD = 0.08 },
new AreaChartData { Interval = new DateTime(1979, 01, 01), USD = 1.85 },
new AreaChartData { Interval = new DateTime(1980, 01, 01), USD = 2.0 },
new AreaChartData { Interval = new DateTime(1982, 01, 01), USD = 3.55 },
new AreaChartData { Interval = new DateTime(1984, 01, 01), USD = 5.40 },
new AreaChartData { Interval = new DateTime(1985, 01, 01), USD = 5.24 },
new AreaChartData { Interval = new DateTime(1988, 01, 01), USD = 6.94 },
new AreaChartData { Interval = new DateTime(1989, 01, 01), USD = 6.85 },
new AreaChartData { Interval = new DateTime(1990, 01, 01), USD = 7.02 },
new AreaChartData { Interval = new DateTime(1992, 01, 01), USD = 5.81 },
new AreaChartData { Interval = new DateTime(1993, 01, 01), USD = 5.32 },
new AreaChartData { Interval = new DateTime(1994, 01, 01), USD = 4.03 },
new AreaChartData { Interval = new DateTime(1997, 01, 01), USD = 2.25 },
new AreaChartData { Interval = new DateTime(1998, 01, 01), USD = 2.01 },
new AreaChartData { Interval = new DateTime(1999, 01, 01), USD = 0.80 },
new AreaChartData { Interval = new DateTime(2001, 01, 01), USD = 0.40 }
};
public Listing<AreaChartData> Vinyl { get; set; } = new Listing<AreaChartData>
{
new AreaChartData { Interval = new DateTime(1973, 01, 01), USD = 7.74 },
new AreaChartData { Interval = new DateTime(1974, 01, 01), USD = 7.58 },
new AreaChartData { Interval = new DateTime(1976, 01, 01), USD = 8.23 },
new AreaChartData { Interval = new DateTime(1977, 01, 01), USD = 9.68 },
new AreaChartData { Interval = new DateTime(1978, 01, 01), USD = 10.16 },
new AreaChartData { Interval = new DateTime(1979, 01, 01), USD = 8.15 },
new AreaChartData { Interval = new DateTime(1981, 01, 01), USD = 6.77 },
new AreaChartData { Interval = new DateTime(1982, 01, 01), USD = 5.64 },
new AreaChartData { Interval = new DateTime(1984, 01, 01), USD = 4.35 },
new AreaChartData { Interval = new DateTime(1985, 01, 01), USD = 2.50 },
new AreaChartData { Interval = new DateTime(1989, 01, 01), USD = 0.64 },
new AreaChartData { Interval = new DateTime(1990, 01, 01), USD = 0 }
};
}
