mariusmuntean / ChartJs.Blazor

Brings Chart.js charts to Blazor

Home Page:https://www.iheartblazor.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

harryhain opened this issue · comments

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.

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.