-
-
Couldn't load subscription status.
- Fork 50
Description
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...
if you open dev tools and look at console, you can see...
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...
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.
Steps to reproduce the behavior:
- Go to '...'
- Click on '....'
- Scroll down to '....'
- 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

_labels does not exists as a key



