ElementRef Conversion

[nvonbenken]

I'm getting the following error when trying to compile after adding this to my project. I'm using dotnet --version gives 2.1.300.

Cannot implicitly convert type 'Microsoft.AspNetCore.Blazor.ElementRef' to 'BlazorComponents.Shared.ChartJsBarChart'

And my graph component (simply copied from the readme/sample):

@using BlazorComponents.Shared
@using BlazorComponents.ChartJS

<div class="container">
  <h2>Chart JS charts using Blazor</h2>
  <div class="row">
    <button class="btn btn-primary" onclick="@UpdateChart">Update Chart </button>
  </div>
  <ChartJsBarChart ref="@barChartJs" Chart="@blazorBarChartJS" Width="600" Height="300" />
</div>

@functions {

public ChartJSChart<ChartJsBarDataset> blazorBarChartJS { get; set; } = new ChartJSChart<ChartJsBarDataset>();
ChartJsBarChart barChartJs;

protected override void OnInit()
{
  blazorBarChartJS = new ChartJSChart<ChartJsBarDataset>()
  {
    ChartType = "bar",
    CanvasId = "myFirstBarChart",
    Options = new ChartJsOptions()
    {
      Text = "Sample chart from Blazor",
      BorderWidth = 1,
      Display = true
    },
    Data = new ChartJsData<ChartJsBarDataset>()
    {
      Labels = new List<string>() { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" },
      Datasets = new List<ChartJsBarDataset>()
        {
            new ChartJsBarDataset()
            {
                Label = "# of Votes from blazor",
                BackgroundColor = "#cc65fe",
                BorderColor = "#cc65fe",
                Data = new List<int>(){ 19,12,5,3,3,2}
            },
            new ChartJsBarDataset()
            {
                Label = "# of Likes from blazor",
                BackgroundColor = "#36a2eb",
                BorderColor = "#36a2eb",
                Data = new List<int>(){ 30,10,15,13,13,12}
            }
        }
    }
  };
}

public void UpdateChart()
{
  //Update existing dataset
  blazorBarChartJS.Data.Labels.Add($"New{DateTime.Now.Second}");
  var firstDataSet = blazorBarChartJS.Data.Datasets[0];
  firstDataSet.Data.Add(DateTime.Now.Second);

  //Add new dataset
  //blazorLineChartJS.Data.Datasets.Add(new ChartJsLineDataset()
  //{
  //    BackgroundColor = "#cc65fe",
  //    BorderColor = "#cc65fe",
  //    Label = "# of Votes from blazor 1",
  //    Data = new List<int> {20,21,12,3,4,4},
  //    Fill = true,
  //    BorderWidth = 2,
  //    PointRadius = 3,
  //    PointBorderWidth = 1
  //});

  barChartJs.UpdateChart(blazorBarChartJS);
}
}

[muqeet-khan]

You need to have the following in your main _ViewImports.cshtml? here is an example ViewImports

@addTagHelper *,BlazorComponents

I am closing this issue for now as I think this will solve your issue. However, If you have this and its still not working, let me know and I will reopen and see if I can repro it on my end.

Thanks for trying out BlazorComponents.

[McHeff]

Can you re-open this please

Having the same issue, and I have added the tag helper to my index.html