erossini / BlazorChartjs

Creates chart with Chart.js in Blazor
https://www.puresourcecode.com/dotnet/blazor/blazor-component-for-chartjs/
MIT License
100 stars 39 forks source link

Miss alignment in grouped stacked bard #48

Open BuddhaCodes opened 11 months ago

BuddhaCodes commented 11 months ago

Hello there, I want to create a grouped/stacked Chart, similar to this one https://www.chartjs.org/docs/latest/samples/bar/stacked-groups.html when I emulate the configuration, I get the following result. act

This is the configuration and the dataset I use `_configBar5 = new BarChartConfig() { Options = new Options() { Interaction = new () { Intersect = false }, Plugins = new Plugins() { Title = new Title() { Display = true, Text = "Population growth (millions)", Font = new Font() { Size = 18 } } }, Scales = new Dictionary<string, Axis>() { { Scales.XAxisId, new Axis() { //Stacked = true, BeginAtZero = true, } }, { Scales.YAxisId, new Axis() { Stacked = true, BeginAtZero = true, } } }, } };

    _configBar5.Data.Labels.AddRange(Labels);

    List<decimal?> Grouped1 = new List<decimal?>() { 133, 221, 783, 2478 };
    List<decimal?> Grouped2 = new List<decimal?>() { 408, 547, 675, 734 };

    _configBar5.Data.Datasets.Add(new BarDataset()
        {
            Stack = new() {"One"},
            Type = "bar",
            Label = "Africa",
            Data = Grouped1,
            BackgroundColor = new List<string>() { "#3e95cd" }
        });

    _configBar5.Data.Datasets.Add(new BarDataset()
    {
        Stack = new() { "One" },
        Label = "India",
            Type = "bar",
            Data = Grouped2,
        BackgroundColor = new List<string>() { "#8e5eff" }
    });

    _configBar5.Data.Datasets.Add(new BarDataset()
        {
            Stack = new() { "Two" },
            Label = "Europe",
            Type = "bar",
            Data = Grouped1,
            BackgroundColor = new List<string>() { "#8e5ea2" }
        });`
erossini commented 11 months ago

I have an example of StackedBar on the demo website. Let me try to recreate this one.

BuddhaCodes commented 11 months ago

Ok, the demo at the website work perfectly, is the combination of stacked and grouped the one giving me that behaviour