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

Different type charts don't render correctly when either has DataLabels enabled #83

Open
tomasoft opened this issue Aug 1, 2024 · 0 comments

Comments

@tomasoft
Copy link

tomasoft commented Aug 1, 2024

Describe the bug
When you have a line graph and a pie chart in the same page, and either of them has registerdatalabels set to true,
The result is that based on order of appearance, one chart will be partially rendered, and the other not rendered at all.

To Reproduce
In a blazor server project, create a PieChart Component...

<h3>Pie Simple</h3>

<Chart Config="_config2" Height="400px" />

private PieChartConfig? _config2;
private Chart? _chart2;

protected override Task OnInitializedAsync()
{
    _config2 = new PieChartConfig
    {
        Options = new PieOptions()
        {
            Responsive = true,
            MaintainAspectRatio = false,
            RegisterDataLabels = true,
            Plugins = new Plugins()
            {
                DataLabels = new DataLabels()
                {
                    Align = DatalabelsAlign.Center,
                    Anchor = DatalabelsAnchor.Center,
                }
            }
        },
        Data =
        {
            Labels = PieDataExamples.SimplePieText
        }
    };

    _config2.Data.Datasets.Add(new PieDataset()
    {
        Label = "My First Dataset",
        Data = PieDataExamples.SimplePie.ToList(),
        BackgroundColor = SampleColors.PaletteBorder1,
        HoverOffset = 4,
        DataLabels = new DataLabels()
        {
            BackgroundColor = "black",
            BorderRadius = 4,
            Color = "white",
            Font = new Font()
            {
                Weight = "bold"
            },
            Padding = new Padding(6)
        }
    });
    return Task.CompletedTask;
}

and a LineGraph component...

<h3>LineGraph</h3>

<Chart Config="_config1" Height="400px" />

private LineChartConfig? _config1 = new();
private Chart? _chart1 = new();

protected override Task OnInitializedAsync()
{
    _config1 = new LineChartConfig
    {
        Options = new Options()
        {
            Responsive = true,
            MaintainAspectRatio = false,
            Plugins = new Plugins()
            {
                Zoom = new Zoom()
                {
                    Enabled = true,
                    Mode = "xy",
                    ZoomOptions = new ZoomOptions()
                    {
                        Wheel = new Wheel()
                        {
                            Enabled = true
                        },
                        Pinch = new Pinch()
                        {
                            Enabled = true
                        }
                    },
                    Pan = new Pan()
                    {
                        Enabled = true,
                        Mode = "x"
                    }
                }
            }
        },
        Data =
        {
            Labels = LineDataExamples.SimpleLineText
        }
    };

    _config1.Data.Datasets.Add(new LineDataset()
    {
        Label = "Line 1",
        Data = LineDataExamples.SimpleLine.ToList(),
        BorderColor = SampleColors.PaletteBorder1.FirstOrDefault()
    });

    _config1.Data.Datasets.Add(new LineDataset()
    {
        Label = "Line 2",
        Data = LineDataExamples.SimpleLine2.ToList(),
        BorderColor = SampleColors.PaletteBorder1.Skip(1).FirstOrDefault(),
    });
    _config1.Data.Datasets.Add(new LineDataset()
    {
        Label = "Line 3",
        Data = LineDataExamples.SimpleLine3.ToList(),
        BorderColor = SampleColors.PaletteBorder1.Skip(2).FirstOrDefault(),
    });

    return Task.CompletedTask;
}

Reference the components in the _Imports.razor and use them in the Home page...

@page "/"

<PageTitle>Dashboard</PageTitle>

<LineGraph />
<PieChart />

Once you run the application, you will see something like...

image

if you open dev tools and look at console, you can see...

image

if you comment out the RegisterDataLabels setting in the PieOptions inside of the PieChartConfig,
you can see both the line graph and the simple pie chart, but of course with no labels as below...

image

if you enable RegisterDataLabels and only use the simple pie component like below...

@page "/"

<PageTitle>Dashboard</PageTitle>

<PieChart />

The pie chart renders with no problems.

image

Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
Both charts render and the labels are visible where enabled.

Desktop (please complete the following information):

  • OS: Windows
  • Browser Chrome/Edge
  • Version 127.0

Additional context
I have also noticed that when both charts are used, in here
image
_labels does not exists as a key

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant