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

Is it possible to create stacked horizontal bar charts, and if so how can I do it? #211

Open
harryhain opened this issue Jun 10, 2023 · 1 comment
Labels
question Further information is requested

Comments

@harryhain
Copy link

Describe your question

Is it possible to create stacked horizontal bar charts, and if so how can I do it?

Which Blazor project type is your question related to?

Server-Side

Which charts is this question related to?

Bar Charts

JavaScript equivalent

options: {
indexAxis: 'y',
scales: {
x: {
stacked: true
},
y: {
stacked: true
}
}
}

Additional context

Add any additional context, screenshots or code about the question here.

@harryhain harryhain added the question Further information is requested label Jun 10, 2023
@fukicycle
Copy link

fukicycle commented Jun 20, 2023

I just had trouble implementing it too. But I was able to implement it.

  • Create bar config like this.
       _barConfig1 = new BarConfig(true)
            {
                Options = new BarOptions
                {
                    Responsive = true,
                    Tooltips = new Tooltips
                    {
                        Mode = InteractionMode.Index,
                        Intersect = false
                    },
                    Scales = new BarScales
                    {
                        YAxes = new List<CartesianAxis>
                    {
                        new BarCategoryAxis
                        {
                            Stacked = true
                        }
                    },
                        XAxes = new List<CartesianAxis>
                    {
                        new BarLinearCartesianAxis
                        {
                            Stacked = true
                        }
                    }
                    }
                }
            };
  • After that, create dataset like this.
        IDataset<int> goldData = new BarDataset<int>(gold, true)
            {
                Label = "Gold",
                BackgroundColor = ColorUtil.FromDrawingColor(System.Drawing.Color.Gold)
            };

        IDataset<int> silverData = new BarDataset<int>(silver, true)
            {
                Label = "Silver",
                BackgroundColor = ColorUtil.FromDrawingColor(System.Drawing.Color.Silver)
            };

        IDataset<int> bronzeData = new BarDataset<int>(bronze, true)
            {
                Label = "Bronze",
                BackgroundColor = ColorUtil.FromDrawingColor(System.Drawing.Color.Brown)
            };
        IDataset<int> mfeData = new BarDataset<int>(mfe, true)
            {
                Label = "Medallion for Excellence",
                BackgroundColor = ColorUtil.FromDrawingColor(System.Drawing.Color.Chocolate)
            };
        IDataset<int> otherData = new BarDataset<int>(other, true)
            {
                Label = "Other",
                BackgroundColor = ColorUtil.FromDrawingColor(System.Drawing.Color.Gray)
            };
        _barConfig1.Data.Datasets.Add(goldData);
        _barConfig1.Data.Datasets.Add(silverData);
        _barConfig1.Data.Datasets.Add(bronzeData);
        _barConfig1.Data.Datasets.Add(mfeData);
        _barConfig1.Data.Datasets.Add(otherData);

It's important things that you have to set horizontal = true and you have to check XAxes, YAxes
Sample is here.
And you can check with Stacked horizontal bar chart here.
But I didn't check on Blazor Server-Side.
Thank you.

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

No branches or pull requests

2 participants