Plotly.Blazor

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

Prerequisites

To create Blazor Server Apps, install the latest version of Visual Studio with the ASP.NET and web development workload. Another alternative would be to use Visual Studio code. Click here for more information.

Plotly.Blazor with version >= 7.0.0 requires .NET 8 or higher. Plotly.Blazor with version >= 2.0.0 requires .NET 6 or higher.

Installing

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 _Imports.razor

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

Now we're ready to go! 🎉

Usage

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"/>

To temporarily hide a chart without disposing it, use the Hidden parameter instead of conditional rendering:

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

The component reference remains valid while hidden. The chart refreshes automatically when it becomes visible again.

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));
}

Examples

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!

Missing Implementations

• Events
• Add multiple traces with one call
• Delete multiple traces with one call
• plotly.animate
• plotly.addFrames
• plotly.moveTraces

Versioning

We implement SemVer using GitVersion

License

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