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, fonts or mappers (Optional)

Optionally you could configure LiveCharts to add a theme, register a global font, enable right to left tooltips or a custom mapper for a type, when you need a non-Latin font you must register a typeface so SkiaShap can render the text correctly, add the following code when your application starts:

In the solution explorer, browse for the App.razor file, then edit the it as follows.

@using LiveChartsCore;
@using LiveChartsCore.SkiaSharpView;
@using LiveChartsCore.SkiaSharpView.Blazor
@using System.Collections.ObjectModel;
@inject NavigationManager NavigationManager
@inject IJSRuntime JS

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)"></LayoutView>
    </NotFound>
</Router>

@code {
    public record City(string Name, double Population);

    protected override void OnInitialized()
    {
        LiveCharts.Configure(config => // mark
            config // you can override the theme
                // .AddDarkTheme() // mark

                // finally register your own mappers
                // you can learn more about mappers at:
                // https://livecharts.dev/docs/blazor/2.0.0-rc2/Overview.Mappers

                // here we use the index as X, and the population as Y // mark
                .HasMap<City>((city, index) => new(index, city.Population)) // mark
            // .HasMap<Foo>( .... ) // mark
            // .HasMap<Bar>( .... ) // mark
            ); // mark
    }

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

        RenderSidebar(NavigationManager.ToBaseRelativePath(NavigationManager.Uri));
        NavigationManager.LocationChanged += (object? sender, LocationChangedEventArgs e) =>
        {
            RenderSidebar(NavigationManager.ToBaseRelativePath(e.Location));
        };
    }

    private void RenderSidebar(string uri)
    {
         if (uri.ToLower().Contains("hello") || uri.Length == 0)
        {
            JS.InvokeVoidAsync("hideSideBar");
        }
        else
        {
            JS.InvokeVoidAsync("showSideBar");
        }
    }
}