Installation and first chart

Open visual studio 2022, select "Create a new project", then select the Blazor WebAssembly App template.

Name the project and the solution BlazorSample, and select .NET 6.0 as the framework, if the framework is not available for you, you can also use .NET 5.0.

Install from NuGet

Now install LiveCharts from NuGet. If you need more help to install a package from NuGet, please follow this guide.

LiveChartsCore.SkiaSharpView.Blazor

Now go to the Pages folder and open the Index.razor view, add the necessary using statements to import the LiveCharts components and objects, add a CartesianChart component to your view and define a private field for the series to display in our chart, finally bind the field to the CartesianChart.Series property.

@page "/"
@using LiveChartsCore
@using LiveChartsCore.SkiaSharpView
@using LiveChartsCore.SkiaSharpView.Blazor

<PageTitle>Index

<h1>Hello, world!

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<CartesianChart<!-- mark -->
	Series="_series"><!-- mark -->
</CartesianChart><!-- mark -->

@code {
    private ISeries[] _series = // mark
        new ISeries[] // mark
        { // mark
            new LineSeries<double> // mark
            { // mark
                Values = new double[] { 2, 1, 3, 5, 3, 4, 6 }, // mark
                Fill = null // mark
            } // mark
        }; // mark
}

And that's it, start your application and you will see the chart the app starts.

Configure themes and mappers (Optional)

Optionally you could configure LiveCharts to add a theme or a custom mapper, add the following code when your application starts:

Add the following code where the app starts... // ToDo: find where is that point in Blazor-wasm...

using LiveChartsCore;// mark
using LiveChartsCore.SkiaSharpView;// mark

LiveCharts.Configure(config =>// mark
    config// mark
        // registers SkiaSharp as the library backend
        // REQUIRED unless you build your own
        .AddSkiaSharp()// mark

        // adds the default supported types
        // OPTIONAL but highly recommend
        .AddDefaultMappers()// mark

        // select a theme, default is Light
        // OPTIONAL
        //.AddDarkTheme()
        .AddLightTheme()// mark

        // finally register your own mappers
        // you can learn more about mappers at:
        // ToDo add website link...
        .HasMap<City>((city, point) =>// mark
        {// mark
            point.PrimaryValue = city.Population;// mark
            point.SecondaryValue = point.Context.Index;// mark
        })// mark
        // .HasMap<Foo>( .... )// mark
        // .HasMap<Bar>( .... )// mark
    );// mark