Is it possible to create stacked horizontal bar charts, and if so how can I do it?
harryhain opened this issue · 1 comments
harryhain commented
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.
fukicycle commented
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.