diff --git a/docs/BlazorApexCharts.Docs/Components/Issues/StackOnlyBar.razor b/docs/BlazorApexCharts.Docs/Components/Issues/StackOnlyBar.razor new file mode 100644 index 00000000..790acaef --- /dev/null +++ b/docs/BlazorApexCharts.Docs/Components/Issues/StackOnlyBar.razor @@ -0,0 +1,117 @@ +@page "/issues/539" + +@using ApexCharts +@using System.Globalization + +

StackOnlyBar Chart Example

+ + + + + + + + + + + + +@code { + // Data Model + public class ChartData + { + public string MonthYear { get; set; } = string.Empty; + public double Target { get; set; } + public double Completed { get; set; } + public double Pending { get; set; } + } + + // Chart Options + private ApexChartOptions chartOptions; + + // Sample Data + private List ChartDataList = new List + { + new ChartData { MonthYear = "Jan/24", Target = 5000, Completed = 3000, Pending = 2000 }, + new ChartData { MonthYear = "Feb/24", Target = 7000, Completed = 4000, Pending = 3000 }, + new ChartData { MonthYear = "Mar/24", Target = 6000, Completed = 4500, Pending = 1500 }, + new ChartData { MonthYear = "Apr/24", Target = 8000, Completed = 5000, Pending = 3000 }, + new ChartData { MonthYear = "May/24", Target = 7500, Completed = 6000, Pending = 1500 }, + new ChartData { MonthYear = "Jun/24", Target = 9000, Completed = 7000, Pending = 2000 }, + new ChartData { MonthYear = "Jul/24", Target = 8500, Completed = 6500, Pending = 2000 }, + new ChartData { MonthYear = "Aug/24", Target = 9500, Completed = 8000, Pending = 1500 }, + new ChartData { MonthYear = "Sep/24", Target = 10000, Completed = 8500, Pending = 1500 }, + new ChartData { MonthYear = "Oct/24", Target = 11000, Completed = 9000, Pending = 2000 }, + new ChartData { MonthYear = "Nov/24", Target = 10500, Completed = 9500, Pending = 1000 }, + new ChartData { MonthYear = "Dec/24", Target = 12000, Completed = 10000, Pending = 2000 } + }; + + protected override void OnInitialized() + { + chartOptions = new ApexChartOptions + { + Chart = new() + { + Toolbar = new ApexCharts.Toolbar + { + Tools = new Tools { Zoom = false, Zoomin = false, Zoomout = false, Pan = false, Reset = false, Download = false }, + }, + DropShadow = new ApexCharts.DropShadow + { + Enabled = true, + Color = "#000", + Top = 5, + Left = 0, + Blur = 3, + Opacity = 0.1 + }, + StackOnlyBar = true, + Stacked = true + }, + Grid = new Grid + { + BorderColor = "#e7e7e7", + StrokeDashArray = 3 + }, + Tooltip = new ApexCharts.Tooltip + { + X = new TooltipX + { + + } + }, + Stroke = new Stroke { Curve = Curve.Smooth }, + Yaxis = new List() + { + new YAxis + { + Labels = new YAxisLabels + { + Formatter = @"function (value) { + return 'R$' + Number(value).toLocaleString(); + }" + }, + } + }, + }; + } +} \ No newline at end of file