Skip to main content

Charts

Lagoon does not provide a native chart component. To integrate charts into a Lagoon application, use a third-party Blazor package based on Chart.js and keep the integration separate from Lg* components.

The recommended package is Kebechet.Blazor.ChartJS:

warning

Do not use ChartJs.Blazor anymore: this package is no longer maintained and includes Newtonsoft.Json.

Installation / integration​

  1. Add the Kebechet.Blazor.ChartJS NuGet package to your client project.
  2. Follow the package instructions to reference Chart.js and the necessary scripts in your application.
  3. Create a Blazor component or page dedicated to the chart.
  4. Use the components and models provided by Kebechet.Blazor.ChartJS; do not invent a Lagoon API for charts.

Usage example​

The old documentation does not provide a complete example. The integration principle remains as follows:

ChartsPage.razor
@inherits LgPage

<LgFrame Title="#ChartsTitle">
    <!-- Place here the component provided by Kebechet.Blazor.ChartJS. -->
</LgFrame>
ChartsPage.razor.cs
public partial class ChartsPage : LgPage
{
    // Prepares the series and options expected by the chosen charts package.
    protected override void OnInitialized()
    {
        base.OnInitialized();
    }
}

Refer to the package documentation for the exact names of components, datasets, and options.

See also​