Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/LayTec-AG/Plotly.Blazor
This library packages the well-known charting library plotly.js into a razor component that can be used in a Blazor project.
https://github.com/LayTec-AG/Plotly.Blazor
aspnet aspnetcore blazor blazor-application blazor-webassembly chart charting-library charts csharp data-visualization dotnet dotnet-core microsoft plot plotly razor visual-studio visualization webassembly webgl
Last synced: 10 days ago
JSON representation
This library packages the well-known charting library plotly.js into a razor component that can be used in a Blazor project.
- Host: GitHub
- URL: https://github.com/LayTec-AG/Plotly.Blazor
- Owner: LayTec-AG
- License: mit
- Created: 2020-04-28T10:41:53.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-21T13:56:43.000Z (18 days ago)
- Last Synced: 2024-10-29T17:29:29.599Z (10 days ago)
- Topics: aspnet, aspnetcore, blazor, blazor-application, blazor-webassembly, chart, charting-library, charts, csharp, data-visualization, dotnet, dotnet-core, microsoft, plot, plotly, razor, visual-studio, visualization, webassembly, webgl
- Language: C#
- Homepage:
- Size: 439 MB
- Stars: 353
- Watchers: 12
- Forks: 52
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-blazor - Plotly.Blazor -   Brings the charting library [plotly.js](https://github.com/plotly/plotly.js) with over 40 chart types to Blazor ([Demo](https://laytec-ag.github.io/Plotly.Blazor/)). (Libraries & Extensions / 2D/3D Rendering engines)
README
# Plotly.Blazor
[](https://laytec-ag.github.io/Plotly.Blazor)
[](https://www.nuget.org/packages/Plotly.Blazor/)
[](https://github.com/LayTec-AG/Plotly.Blazor/network/members)
This library packages the well-known charting library [plotly.js](https://github.com/plotly/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 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](https://docs.microsoft.com/en-us/aspnet/core/blazor/get-started?view=aspnetcore-3.1&tabs=visual-studio-code) for more information.
**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
```powershell
Install-Package Plotly.Blazor
```
Using .NET CLI
```cmd
dotnet add package Plotly.Blazor
```
**If you are using 4.1.0 or lower**, then add the following lines to your _Layout.cshtml **above** the `_/framework/blazor.webassembly.js` or `_/framework/blazor.server.js`
```razor
```
**Add the following lines to your _Imports.razor**
```razor
@using Plotly.Blazor
@using Plotly.Blazor.Traces
```
**Now we're ready to go! :tada:**
### Usage
**Create the Razor component**
Info: *The chart reference is important so that we can update the chart later.*
```razor
```
**Generate some initial data for your plot.**
```razor
@code {
PlotlyChart chart;
Config config = new Config();
Layout layout = new Layout();
// Using of the interface IList is important for the event callback!
IList data = new List
{
new Scatter
{
Name = "ScatterTrace",
Mode = ModeFlag.Lines | ModeFlag.Markers,
X = new List{1,2,3},
Y = new List{1,2,3}
}
};
}
```
**Generate some additional data for your plot.**
```csharp
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](https://laytec-ag.github.io/Plotly.Blazor) you can find a running instance of the [examples](Plotly.Blazor.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](http://semver.org/) using [GitVersion](https://github.com/GitTools/GitVersion/)
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details