Grouped bar (stacked)

[robertvonk]

Describe your question

Is it possible to create a grouped (stacked) bar chart? Or are de datasets single?

Which Blazor project type is your question related to?

• Client-Side
• Server-Side

Which charts is this question related to?

BarChart

[Joelius300]

I'm trying hard to stay professional here. Could you explain to me why you removed so much from the template? You don't show JavaScript code, you don't show a screenshot of the desired result, you don't link to a sample of chart.js.. By grouped (stacked) I can only assume you mean grouped and stacked combined stacked-group sample. Or do you only mean stacked?

If you only mean stacked we already have a sample. So I'd imagine it can't be that since you've already looked at the samples, right? If you mean stacked group like in this chart.js sample, you should have at least asked yourself "how can I do this with this library?" and try it. You should have tried to port the JavaScript code to C# by searching for the properties and trying to get the same structure. The property names match (apart from camel vs pascal casing) and you can browse both this library's and chart.js' code completely on your own without any decompilation effort or stuff like that. Since you didn't include JavaScript code (that you want to port) and you didn't include C# code (your failed attempt at doing it with this library), I can only imagine you didn't try. Now you also didn't include a screenshot. Does that mean you also don't know what you want it to look like? I'm sorry but I just don't have enough information here.

Also if the question is just about chart.js, go to StackOverflow; We are not chart.js support! You're much better off asking it on SO or their github page anyway. But the same applies for them; do your research first, they have great documentation (much better than ours).

I felt bad for adding imo rather harsh words to the template and readme telling you to include more information so we can help you. But it doesn't seem to have helped.

Please note that I do not want to offend you personally. Unfortunately this issue is a prime example of my biggest problem with maintaining an open source library. I devote a lot of my free time to helping people like you and they don't seem to make the slightest effort to help themselfs and solve the issue on their own.
Your issue was just the one that made me get a bit emotional and rant about it. Do not take this personally, but please help me help you.

[robertvonk]

Thank you for your reply. For me it was a small question but you took it to bigger proportions. In my search for a good charting library for my Blazor personal project I was investigating if I can use this library by looking at the possibilities and samples. Since I didn't see an example of a grouped bar stacked bar chart I thought it would be OK to post a small question. Apparently this causes quite a lot of emotion, and this is not what I had in mind. Anyway I'll dive a bit deeper and will try if I can find out myself. Please continue helping other developers in their issues. Thanks

[Joelius300]

I'm sorry. Again, I really didn't want to attack you, I'm sure you meant absolutely no harm. I'm overreacting and I know I came off a bit strong especially since this is your first interaction with me. I'm more than happy to help you with any issue you're facing with this library but it just really frustrates me to use time on questions where most of my time is just spent claryfing the question. And, unlucky for you, I just happened to get a bit emotional, I'm sorry for that. I probably should have just asked you to clarify. I'm sorry if I scared you off. If you can move on from that and would still like to cooperate with me, I'd love to now move on with the following. Otherwise, close the issue again.

What do you mean by grouped (stacked) can you show me an example? We support stacked bar charts (sample) or do you maybe mean something like this? It would really help if you included the attempt you made to realize such a chart. Can you show me the JavaScript or C# code?

[robertvonk]

Thanks for your reply, I can understand that it is sometimes frustrating in giving support, based upon vague questions. But enough about the way of communicating, let's dive into the technical part 😃
I've managed to play around with the stacked bar example and it's possible to create a grouped bar chart. Following code gives the result show in the attached picture.

protected override void OnInitialized()
{
    _config = new BarConfig
    {

        Options = new BarOptions
        {

            Title = new OptionsTitle
            {
                Display = true,
                Text = "Sample chart from Blazor"
            },
            Scales = new BarScales
            {
                XAxes = new List<CartesianAxis>
                 {
                    new BarCategoryAxis
                    {
                        BarThickness = BarThickness.Flex,
                        Stacked = true
                    }
                }

            },
            Responsive = true
        }
    };

    _config.Data.Labels.AddRange(new[] { "Jan", "Feb", "March", "April" });

    var barSet1 = new BarDataset<DoubleWrapper>
    {
        Stack = "One",
        Label = "Income",
        BackgroundColor = ColorUtil.RandomColorString(),
        BorderWidth = 1,
        HoverBackgroundColor = ColorUtil.ColorString(0, 0, 0, 0.1),
        HoverBorderColor = ColorUtil.RandomColorString(),
        HoverBorderWidth = 1,
        BorderColor = "#ffffff",
    };
    var barSet1a = new BarDataset<DoubleWrapper>
    {
        Stack = "Two",
        Label = "Expense",
        BackgroundColor = ColorUtil.RandomColorString(),
        BorderWidth = 1,
        HoverBackgroundColor = ColorUtil.ColorString(0, 0, 0, 0.1),
        HoverBorderColor = ColorUtil.RandomColorString(),
        HoverBorderWidth = 1,
        BorderColor = "#ffffff",
    };
    barSet1.AddRange(new double[] { 4, 3, 2, 1 }.Wrap());
    barSet1a.AddRange(new double[] { 10, 20, 13, 5 }.Wrap());
    _config.Data.Datasets.Add(barSet1);
    _config.Data.Datasets.Add(barSet1a);

    var barSet2 = new BarDataset<DoubleWrapper>
    {
        Stack = "One",
        Label = "Savings",
        BackgroundColor = ColorUtil.RandomColorString(),
        BorderWidth = 1,
        HoverBackgroundColor = ColorUtil.ColorString(0, 0, 0, 0.1),
        HoverBorderColor = ColorUtil.RandomColorString(),
        HoverBorderWidth = 1,
        BorderColor = "#ffffff",
    };

    barSet2.AddRange(new double[] { 1, 5, 10, 15 }.Wrap());
    _config.Data.Datasets.Add(barSet2);

}

Using the config parameter "Stack" in the BarDataSet will result in the grouped stacked bar chart result, which was my requirement.
var barSet1 = new BarDataset
{
Stack = "One",
Label = "Income",
BackgroundColor = ColorUtil.RandomColorString(),
BorderWidth = 1,
HoverBackgroundColor = ColorUtil.ColorString(0, 0, 0, 0.1),
HoverBorderColor = ColorUtil.RandomColorString(),
HoverBorderWidth = 1,
BorderColor = "#ffffff",
};

I'll continue using this library for my project and for the next issue/question I'll promise to add more details 😅

[Joelius300]

Amazing work!

I'm glad you got it working. Maybe I'm asking too much of people but I'm glad you didn't take offence. I'm excited for future interactions with you and I hope you'll have a good experience with this library. If you have any further questions/inquieries just let us know and open an issue :)

[erossini]

@robertvonk I saw your code and it is what I'm trying to do. I copied and pasted your code and I have few questions:

• what version of the library are you using?
• what is DoubleWrapper class? Is it your class or from the package?
• what is the extension Wrap()?

Thank you so much in advance.
Enrico