Awesome Open Source
Awesome Open Source


Build Status Publish Status Examples Status NuGet Status

This library packages the well-known charting library plotly.js into a Razor component that can be used in a Blazor project. The advantage of this wrapper is that the plotly scheme itself is used to generate the classes. So you can automatically update to the latest plotly.js version with the help of the generator.

Getting Started


To create Blazor Server Apps, install the latest version of Visual Studio 2019 with the ASP.NET and web development workload. For Blazor WebAssembly you need at least Visual Studio 2019 16.6+. Another alternative would be to use Visual Studio code. Click here for more information.

Plotly.Blazor with version >= 2.0.0 requires .NET 5 or higher.


After you have created your Blazor project, you need to do the following steps:

Install the latest NuGet Package

Using Package Manager

Install-Package Plotly.Blazor

Using .NET CLI

dotnet add package Plotly.Blazor

Add the following lines to your index.html or _Host.cshtml below or above the blazor.webassembly.js

Info: These files are already included in the NuGet Package!

<!-- Import the plotly.js library -->
<script src="_content/Plotly.Blazor/plotly-latest.min.js" type="text/javascript"></script>

<!-- Import the plotly.js interop functions -->
<script src="_content/Plotly.Blazor/plotly-interop.js" type="text/javascript"></script>

Add the following lines to your _Imports.razor

@using Plotly.Blazor
@using Plotly.Blazor.Traces

Now we're ready to go! 🎉


Create the Razor component

Info: The chart reference is important so that we can update the chart later.

<PlotlyChart @bind-Config="config" @bind-Layout="layout" @bind-Data="data" @ref="chart"/>

Generate some initial data for your plot.

@code {
    PlotlyChart chart;
    Config config = new Config();
    Layout layout = new Layout();
    // Using of the interface IList is important for the event callback!
    IList<ITrace> data = new List<ITrace>
        new Scatter
            Name = "ScatterTrace",
            Mode = ModeFlag.Lines | ModeFlag.Markers,
            X = new List<object>{1,2,3},
            Y = new List<object>{1,2,3}

Generate some additional data for your plot.

private async Task AddData(int count = 100)
    if (!(chart.Data.FirstOrDefault() is Scatter scatter)) return;
    var (x, y) = Helper.GenerateData(scatter.X.Count + 1, scatter.X.Count + 1 + count);

    await chart.ExtendTrace(x, y, data.IndexOf(scatter));


Here you can find a running instance of the examples. This is always up-to-date with the current state of the develop branch.

What it might look like!

Image of Example

Known issues


  • Blazor WebAssembly is (currently) not intended for performance purposes! We therefore recommend Blazor Server. This issue is tracked here.
  • IJSRuntime (currently) does not allow to adjust the serialization of objects. Accordingly, a conversion is carried out beforehand, which consumes a comparatively large amount of time. You can find this issue here.

Missing Implementations

  • Events
  • Add multiple traces with one call
  • Delete multiple traces with one call
  • plotly.animate
  • plotly.addFrames
  • plotly.downloadImage
  • plotly.moveTraces
  • plotly.relayout Thanks to PeopleCanFly!
  • plotly.restyle Thanks to PeopleCanFly!
  • plotly.toImage


We implement SemVer using GitVersion


See also the list of contributors who participated in this project.


This project is licensed under the MIT License - see the LICENSE file for details

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
C Sharp (276,290
Dotnet (8,059
Visualization (5,705
Data Visualization (4,508
Dotnet Core (4,351
Asp Net Core (3,723
Webgl (2,435
Webassembly (2,281
Chart (2,280
Visual Studio (1,934
Microsoft (1,402
Asp Net (1,194
Blazor (972
Plotly (781
Plot (718
Blazor Webassembly (252
Razor (182
Charting Library (141
Blazor Application (63
Related Projects