HtmlForgeX

Bar & Column Charts

Column Chart (Vertical)

page.ApexChart(chart => {
    chart.Title.Text("Sales by Region");

    chart.AddColumn("North", 148)
         .AddColumn("South", 132)
         .AddColumn("East", 165)
         .AddColumn("West", 121);

    chart.DataLabels(d => d.Enable(true))
         .PlotOptions(p => p.BarOptions(b => b.BorderRadiusValue(4)));
});

Bar Chart (Horizontal)

page.ApexChart(chart => {
    chart.Title.Text("Top Products");

    chart.AddBar("Product A", 540)
         .AddBar("Product B", 470)
         .AddBar("Product C", 448)
         .AddBar("Product D", 430);

    chart.PlotOptions(p => p.BarOptions(b => b.HorizontalValue(true)))
         .DataLabels(d => d.Enable(true).Offset(-6, 0));
});

Stacked Columns

page.ApexChart(chart => {
    chart.Title.Text("Revenue Breakdown");
    chart.Type = ApexChartType.Bar;

    chart.AddSeries("Product A", 120, 132, 101, 134)
         .AddSeries("Product B", 90, 102, 120, 140)
         .AddSeries("Services", 60, 76, 88, 95);

    chart.Chart(c => c.SetStacked(true))
         .PlotOptions(p => p.BarOptions(b => b.BorderRadiusValue(4)));
});

Grouped Bars

page.ApexChart(chart => {
    chart.Title.Text("Q1 vs Q2");

    chart.AddSeries("Q1", 380, 430, 450, 470)
         .AddSeries("Q2", 410, 445, 465, 490);

    chart.DataLabels(d => d.Enable(false))
         .Legend(l => l.ShowLegend(true).Position(ApexPosition.Top));
});

API Reference