stacked column chartjs blazor server
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);
}