I'm using ChartJs.Blazor for chart.js implementation with Blazor.
However, I'm unable to get it working fully due to the following lines
private PieConfig _config;
Options = new PieOptions
PieDataset<int> dataset = new PieDataset<int>(new[] { 6, 5, 3, 7 })
All with the error of
the type or namespace could not be found
Index.Razor
@page "/"
@code{
private PieConfig _config;
protected override void OnInitialized()
{
_config = new PieConfig
{
Options = new PieOptions
{
Responsive = true,
Title = new OptionsTitle
{
Display = true,
Text = "ChartJs.Blazor Pie Chart"
}
}
};
foreach (string color in new[] { "Red", "Yellow", "Green", "Blue" })
{
_config.Data.Labels.Add(color);
}
PieDataset<int> dataset = new PieDataset<int>(new[] { 6, 5, 3, 7 })
{
BackgroundColor = new[]
{
ColorUtil.ColorHexString(255, 99, 132), // Slice 1 aka "Red"
ColorUtil.ColorHexString(255, 205, 86), // Slice 2 aka "Yellow"
ColorUtil.ColorHexString(75, 192, 192), // Slice 3 aka "Green"
ColorUtil.ColorHexString(54, 162, 235), // Slice 4 aka "Blue"
}
};
_config.Data.Datasets.Add(dataset);
}
}
<h1>Ferrari Price</h1>
<div class="container">
<div class="col-12">
<Chart Config="_config"></Chart>
</div>
</div>
_Imports.Razor
@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using CryptoPlatform
@using CryptoPlatform.Shared
@using ChartJs.Blazor
@using ChartJs.Blazor.Common
@using ChartJs.Blazor.Common.Axes
@using ChartJs.Blazor.Common.Axes.Ticks
@using ChartJs.Blazor.Common.Enums
@using ChartJs.Blazor.Common.Handlers
@using ChartJs.Blazor.Common.Time
@using ChartJs.Blazor.Util
@using ChartJs.Blazor.Interop
Based on the docs, this should be working. Because I'm so inexperienced in Blazor, debugging the issue is near impossible.
It should be noted the following scripts are also implemented on my _Host.cshtml page
<script src="_framework/blazor.server.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<script src="_content/ChartJs.Blazor.Fork/ChartJsBlazorInterop.js"></script>