In the 2020 v2 release of ComponentOne, we’ve introduced two new data visualization components for Blazor: FlexChart and FlexPie. This article provides a quick intro to the FlexChart, a visual component that creates a large number of Cartesian plots, including column, bar, line, scatter, area, and step charts.

Read the full ComponentOne 2020 v2 release.

Blazor and WebAssembly

Blazor is a new and promising platform for web UI development. At this moment there are two Blazor flavors that differ by hosting environments (there might be more coming but they’re in early stages of development). Both of them are quite interesting:

• Blazor Server - runs on the server and communicates with the browser via a special SignalR library.
• Blazor Client (Blazor WebAssembly) - runs directly in the browser, with .NET code executed in the browser by runtime implemented in WebAssembly.

FlexChart Blazor Development

For me, it was especially interesting to work with Blazor since it lies somewhere between two technological continents I am used to working with recently: C#/ .NET and client-side JavaScript.

Below are several notes and impressions about the component’s development for Blazor.

• First of all, it’s .NET, so a lot of code works fine here. We were able to easily adapt our common core charting engine that is shared between other .NET platforms (WinForms and WPF).
• As a rendering target SVG is an obvious choice for charting component since it provides fast and high-quality vector graphics as well as perfect compatibility across browsers and platforms.
• The Blazor components which are actually the same as Razor components can work in both Blazor environments (Server and WebAssembly). They are created and initialized on Razor pages that have a special markup syntax. To create a Blazor component you need to inherit your component for ComponentBase class, add parameter attribute to the properties which should be set in markup and, of course, provide content for rendering.
• You still need to use a JavaScript interop quite extensively to get interactive and responsive components. That was expected since the final rendering and UI belong to the browser.

#web #.net #desktop