How can I set up onClick event on pieChart

[bd8697]

Describe your question

I'm trying to set up an OnClick event for a pieChart.

Which Blazor project type is your question related to?

• Server-Side

Which charts is this question related to?

all charts

Additional context

From this (#55 ) and this (#155 ) I understand that to implement an OnClick event, this should work:

[JSInvokable] public void OnClickHandler(object sender, object args) { }

    protected override void OnInitialized()
    {
        _config = new PieConfig
        {
            Options = new PieOptions
            {
                Responsive = true,
                 OnClick = new DotNetInstanceClickHandler(OnClickHandler),
                Title = new OptionsTitle
                {
                    Display = true,
                    Text = "ChartJs.Blazor Pie Chart"
                }
            }
        };

The problem is that I get: "Type or namespace DotNetInstanceClickHandler" not found. I tried adding it from here: DotNetInstanceClickHandler, but it does not have the type required (IMethodHandler< ClickHandler >).

Do you have any idea why is DotNetInstanceClickHandler not found or where I can I find some sample of this implemented? Thank you.

[Joelius300]

Hey @bd8697, thanks for the question.

Both of the issues you linked are related to versions prior to 2.0. In version 2.0 and up, you use DelegateHandler<T> and you don't need the JSInvokable attribute anymore.

Replace your DotNetInstanceClickHandler with DelegateHandler<ChartMouseEvent> and adjust your OnClickHandler method to match the signature of ChartMouseEvent:

public delegate void ChartMouseEvent(JObject mouseEvent, JArray activeElements);

Hope that helps 😄 if not, please comment to reopen.

[bd8697]

Wow. I thought it might be something related to versioning, but I just couldn't figure it out; big thank you for the solution. 😗

For anyone else stumbling across this, here is how I get the label of the clicked element (@Joelius300 pelase correct me if there's a better way) :

public void OnClickHandler(JObject mouseEvent, JArray activeElements)
        {
            foreach (JObject elem in activeElements)
            {
                foreach (JProperty prop in elem.GetValue("_model"))
                {
                    if(prop.Name.Equals("label"))
                    {
                        Console.WriteLine(prop.Value.ToString());
                    }
                }
            }
        }

[Joelius300]

@Joelius300 please correct me if there's a better way

If I understand your intent correctly, there might be a better way in JavaScript (see getElementAtEvent) but without JavaScript (-interop) I don't know how you could improve that logic to be honest 😅

[NoahYannis]

How do I get the JObject, JArray as well as the JSON data from the piechart?