balzor charts js code example

Example: 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);

}