Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wrong dataset returned when clicking bar in stacked bar chart #217

Open
esmorun opened this issue Mar 22, 2024 · 0 comments
Open

Wrong dataset returned when clicking bar in stacked bar chart #217

esmorun opened this issue Mar 22, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@esmorun
Copy link

esmorun commented Mar 22, 2024

Describe the bug

I've created a stacked barchart with several datasets (Information, Error, Warning), see screenshot below. When the user clicks a bar, I need to know which dataset the portion of the bar that they clicked belong to. In my case, if they clicked a collection of information, errors or warnings. In my function where I'm handling the ChartMouseEvent, I don't seem to be getting this information, instead it always gives me the first dataset (Information), regardless of which part of the bar the user clicked.

Which Blazor project type is your bug related to?

  • Client-Side

Which charts does this bug apply to?

  • BarChart with several datasets

To Reproduce

Steps to reproduce the behavior:

  1. Using this version of ChartJSBlazor '2.0.2'.
  2. Create a bar chart with several datasets and connect the OnClick event to a function in the BarOptions:
  3. Read information from the _model property in the function where the click is being handled:
  4. The _model property contains information from the first dataset, even though another one was clicked:
{
  "backgroundColor": "rgb(16, 229, 87)",
  "borderColor": "rgba(0, 0, 0, 0.1)",
  "borderSkipped": "bottom",
  "borderWidth": 0,
  "datasetLabel": "Information",
  "label": "22/03",
  "horizontal": false,
  "base": 469.84,
  "x": 821.1667626953125,
  "y": 469.84,
  "width": 76.03767421874998
}

Expected behavior

I expect to be able to find information on which dataset the portion of the bar that was clicked belong to.

Screenshots

Screenshot 2024-03-22 145048

Additional context / logging

Add any additional context about the problem here.

// Put your error log here

Code example

Please provide full code examples below where possible to make it easier for the developers to check your issues.
Please also add the working JavaScript equivalent so we can see what you were trying to achieve.

private Chart? activityBarChart;
private BarConfig? activityBarConfig;

// Create stacked barchart
    private void InitializeActivityBarChart()
    {
        activityBarConfig = new BarConfig()
            {
                Options = new BarOptions
                {
                    Responsive = false,
                    Legend = new Legend
                    {
                        Position = Position.Right,
                        Display = true
                    },
                    Title = new OptionsTitle
                    {
                        Display = true,
                        Text = "Activity"
                    },
                    Scales = new BarScales
                    {
                        XAxes = new List<CartesianAxis>
                        {
                            new BarCategoryAxis
                            {
                                Stacked = true
                            }
                        },
                        YAxes = new List<CartesianAxis>
                        {
                            new BarLinearCartesianAxis
                            {
                                Stacked = true
                            }
                        }
                    },
                    OnClick = new DelegateHandler<ChartMouseEvent>(OnActivityBarChartClicked) //Connect OnClick event to OnActivityBarChartClicked
            }
        };

        StateHasChanged();
    }
//Handle click event
private void OnActivityBarChartClicked(JObject mouseEvent, JArray array)
{
    foreach (JObject elem in array)
    {
        var props = elem.GetValue("_model");
        if (props != null)
        {              
            if (prop.Name.Equals("datasetLabel"))
            {
                var type = prop.Value.ToString();
                Console.WriteLine(type);
            }
        }
    }
}
// Put your JavaScript code here
@esmorun esmorun added the bug Something isn't working label Mar 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant