Using chart.js with Blazor (missing directives?)

Viewed 195

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>
0 Answers
Related