Pass Chart elements by ref / ElementReference (not by id) to JSInterop

[SeppPenner]

Describe the feature request

It would be a good idea to use the ElementReference type to reference the charts from C# to JS. Example (Although it's a bit outdated): https://visualstudiomagazine.com/blogs/tool-tracker/2018/11/an-ad-hoc-approach.aspx

Which charts does this feature request apply to?

All.

Describe the solution you'd like

Like in the example:

Razor:

<input type="text" ref="mytextbox" value="Peter" />

@code
{
    ElementReference mytextbox;

    protected override Task OnInitializedAsync()
    {
        await JSRuntime.Current.InvokeAsync<string>("SetName", mytextbox);
    }
}

Javascript:

function SetName(textbox) {
    textbox.value = "Vogel";
}

Describe alternatives you've considered

None.

Additional context

Example: https://visualstudiomagazine.com/blogs/tool-tracker/2018/11/an-ad-hoc-approach.aspx.

[SeppPenner]

I try to check how easy this is and to find the issue with the static assets soon @Joelius300.

[Joelius300]

We could only do this with the canvas-element. The actual Chart is a js-object which is never exposed to the c# part. Do you know any benefits this would have over the current approach?

The static assets issue is more important at the moment I think :)

[SeppPenner]

We could only do this with the canvas-element. The actual Chart is a js-object which is never exposed to the c# part. Do you know any benefits this would have over the current approach?

Well, it's more clean, I guess. (Moving most of the code towards C#).

The static assets issue is more important at the moment I think :)

Yes, I will check this soon.

[Joelius300]

Moving most of the code towards C#

Fair enough.

Kind of related:
Maybe we should also think about using a new GUID string as default id. This will reduce the collisions if no id was specified which is probably what most users would do if they could.

[SeppPenner]

Maybe we should also think about using a new GUID string as default id. This will reduce the collisions if no id was specified which is probably what most users would do if they could.

I wouldn't even allow to let them chose an id... :D Makes it more restricted, but more save.

[Joelius300]

Good idea!
But we should still keep the getter in case they want to use that canvas for their own js-interop (extensions) and need to access its id.

I've created an issue for it so we don't pollute this one with other changes: https://github.com/Joelius300/ChartJSBlazor/issues/77

[SeppPenner]

But we should still keep the getter in case they want to use that canvas for their own js-interop (extensions) and need to access its id.

That's true. I guess, this is not a big deal and can be done easily.

[SeppPenner]

Is tracked by https://github.com/mariusmuntean/ChartJs.Blazor/issues/42 after the merge.