Create Chart in WebAssembly Project

After following the previous topic, you should be able to add a Chart -derived component to your Blazor UI.

1. Open the razor page file.
2. Import MindFusion.Charting and MindFusion.Charting.Blazor namespaces.
3. Add e.g. a <BarChart> tag to the razor markup.
4. Customize the chart by setting parameters.
5. Add chart data by setting the Series property from page's OnAfterRender method:

C#

@using MindFusion.Drawing;
@using MindFusion.Charting;
@using MindFusion.Charting.Blazor;

<div class="chart">
  <BarChart @ref="barChart"
    BarLayout=@BarLayout.SideBySide
    GridType=@GridType.None
    ShowLegend=false />
</div>

@code {

BarChart barChart;

protected override void OnAfterRender(bool firstRender)
{
    base.OnAfterRender(firstRender);

    if (firstRender)
    {
        barChart.Series = new ObservableCollection<Series>
        {
            new BarSeries(
            new List<double> { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 },
            new List<string> { "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve" },
            null)
            { Title = "Series 1" }
        };
        .....
    }
}

You can add data series using either ones of the pre-defined series classes (such as SimpleSeries, Series2D, XmlSeries, DataBoundSeries) or by implementing the Series interface in your own model class.

6. Browse the other sections of this help file to learn more about the functionality provided by the MindFusion.Charting classes, methods and properties. Follow the tutorials to learn how to load data into charts and create more complex plots. You could also peruse example projects provided under Samples subfolder of library's distribution.