[dev-v5] Add Vertical Bar Chart variants

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/GroupedVerticalBarChart/GroupedVerticalBarChartDefault.razor

@@ -0,0 +1,10 @@
+@using Microsoft.FluentUI.AspNetCore.Components.Charts
+
+
+@code {
+    private readonly IReadOnlyList<GroupedVerticalBarChartDataPoint> data = new List<GroupedVerticalBarChartDataPoint>
+    {
+        new GroupedVerticalBarChartDataPoint { Legend = "first", Data = 20000 },
+        new GroupedVerticalBarChartDataPoint { Legend = "second", Data = 39000 }
+    };
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/VerticalBarChart/VerticalBarChartDefault.razor

@@ -0,0 +1,10 @@
+@using Microsoft.FluentUI.AspNetCore.Components.Charts
+
+@code {
+    private readonly IReadOnlyList<VerticalBarChartDataPoint> data = new List<VerticalBarChartDataPoint>
+    {
+        new VerticalBarChartDataPoint { Legend = "first", Data = 20000 },
+        new VerticalBarChartDataPoint { Legend = "second", Data = 39000 }
+    };
+
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/VerticalStackedBarChart/VerticalStackedBarChartDefault.razor

@@ -0,0 +1,10 @@
+@using Microsoft.FluentUI.AspNetCore.Components.Charts
+
+
+@code {
+    private readonly IReadOnlyList<VerticalStackedBarChartDataPoint> data = new List<VerticalStackedBarChartDataPoint>
+    {
+        new VerticalStackedBarChartDataPoint { Legend = "first", Data = 20000 },
+        new VerticalStackedBarChartDataPoint { Legend = "second", Data = 39000 }
+    };
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Pages/FluentGroupedVerticalBarChart.md

@@ -0,0 +1,48 @@
+---
+title: Grouped Vertical Bar Chart
+route: /Charts/GroupedVerticalBarChart
+---
+
+# Grouped Vertical Bar Chart
+
+A grouped vertical bar chart displays multiple series of data as a group of bars, with each bar
+denoting a category. The bars are grouped together side by side, with each group denoting a
+different series.
+
+Effectively, a grouped vertical bar chart can slice data across 2 dimensions - (1) A dimension
+along the x axis and (2) Groups within the first dimension. And the y-axis plots the values of
+each category. Each bar in a group is colored differently to differentiate among categories within
+the group.
+
+## Layout
+
+A stacked bar chart is used to emphasize the composition of a category and how individual
+components contribute to it. On the other hand, a grouped bar chart is used to compare distinct
+values across various categories or groups separately.
+
+Refer to Vertical Bar Chart page for common layout guidance.
+
+## Content
+
+Refer to Vertical Bar Chart page for common content guidance.
+
+## Accessibility
+
+Refer to Vertical Bar Chart page for common accessibility guidance.
+
+## Customizing the chart
+
+- Use the BarWidth prop to customize the width of each bar in the chart. When set to undefined
+or 'default', the bar width defaults to 16px, which may decrease to prevent overlap. When set to
+'auto', the bar width is calculated from padding values. For a fixed bar width, specify an
+absolute pixel value like 40.
+
+- Use the MaxBarWidth prop to limit the width of bars to a specified number of pixels.
+
+- Use the XAxisInnerPadding and XAxisOuterPadding props to adjust the padding between groups and
+the padding before the first group and after the last group, respectively. These props accept
+values between 0 and 1, representing a fraction of the step, which is the interval between the
+start of a group and the start of the next group. These props are particularly relevant when using
+a string x-axis. By default, the inner padding is set to 2 / (2 + groupWidthInTermsOfBarWidth),
+maintaining a 2:1 spacing ratio. This default value is calculated at runtime using the formula:
+    > innerPadding = spaceBetweenGroups / (spaceBetweenGroups + groupWidth)

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Pages/FluentVerticalBarChart.md

@@ -0,0 +1,52 @@
+---
+title: Vertical Bar Chart
+route: /Charts/VerticalBarChart
+---
+
+# Vertical Bar Chart
+
+A vertical bar chart displays data as a series of vertical bars, with each bar representing a category and the height of the bar representing the value of that category. It is commonly used to show comparisons between categories of one or more data sets, usually over a period of time. Categories are shown on the horizontal axis, while the data values are shown along the vertical axis. They could present data over time or in relationship to a whole.
+
+## Layout
+
+The default bar width is 16px. For dense data, it can be as thin as 8px wide. Always consider the visual weight of the bars in relationship to the rest of the app before choosing this type of chart.
+
+The padding around the bar chart is a default of 8px from the x and y-axis container. This gives enough room for additional content like label values to display properly without overlapping on to the X-axis ticks. A 2:1 spacing is maintained between all the bars in the graph so that space between two bars is always two times the bar width. This helps to ensure that the graph is not overpowering other data visualizations.
+
+For charts that display monetary values, the dollar symbol should be displayed as part of the total value. Also call out the currency in the chart title to provide additional context. Chart title can be used to communicate currency when the total labels are hidden.
+
+## Content
+
+- **Bar segment** Bar segments make up a bar chart. Standard size options are: 8px, 16px, and 24px with 16px being the default.
+- **Value labels** (Optional - Off by default) with the option to toggle on in case the data visualization needs to communicate label values to users.
+
+## Accessibility
+
+Bar graphs should be flexible to their containers. They will change widths to fit their environment. This also means that bar labels will rotate or truncate to best fit the available space in the chart (Auto adjusting labels coming soon).
+
+Type truncation should happen when the total value exceeds one thousand including 1 decimal place for the hundreds. For example, display full value for 600, 983, or 19.53. Truncate 6,000 to 6.0K, 9,801 to 9.8K, and 100,900 to 100.9K.
+
+## Customizing the chart
+
+- The chart provides an option to select a color scale based on the range of y values. Similar y values will end up having similar colors. Use the colors attribute to define the color scale.
+
+- Use `UseSingleColor` to use a single color for all bars.
+
+- Use `LineLegendText` and `LineLegendColor` to specify the text and color for legends of lines in the chart.
+
+- The bar labels are shown by default. Set the `HideLabels` prop to hide them.
+
+- Use the `BarWidth` prop to customize the width of each bar in the chart. When set to undefined or 'default', the bar width defaults to 16px, which may decrease to prevent overlap. When set to 'auto', the bar width is calculated from padding values. For a fixed bar width, specify an absolute pixel value like 40.
+
+- Use the `MaxBarWidth` prop to limit the width of bars to a specified number of pixels.
+
+- Use the `XAxisInnerPadding` and `XAxisOuterPadding` props to adjust the padding between bars and the padding before the first bar and after the last bar, respectively. These props accept values between 0 and 1, representing a fraction of the step, which is the interval between the start of a bar and the start of the next bar. These props are particularly relevant when using a string x-axis. By default, the inner padding is set to 2/3, maintaining a 2:1 spacing ratio. This default value is calculated using the formula:
+  > innerPadding = spaceBetweenBars / (spaceBetweenBars + barWidth)
+
+## Do's
+
+Try to keep the number of bars in the chart between 3 and 20 to maximize readability.
+
+## Don'ts
+
+Don't use very long labels in vertical bar chart. Long labels use unnecessary space and make the chart skewed. For long labels use horizontal bar chart with axis.

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Pages/FluentVerticalStackedBarChart.md

@@ -0,0 +1,58 @@
+---
+title: Vertical Stacked Bar Chart
+route: /Charts/VerticalStackedBarChart
+---
+
+# Vertical Stacked Bar Chart
+
+Vertical stacked bar chart displays multiple series of data as stacked bars, with each bar representing a category. The bars are stacked on top of each other, with the height of each bar representing the value of the category of the series.
+
+Categories and their count are shown on the horizontal axis.
+
+## Layout
+
+Stacked bar charts are ideal for comparing values across two or more categories. They can easily show multiple categories on the same chart.
+
+Refer to Vertical Bar Chart page for common layout guidance.
+
+## Content
+
+Refer to Vertical Bar Chart page for common content guidance.
+
+## Accessibility
+
+Refer to Vertical Bar Chart page for common accessibility guidance.
+
+## Customizing the chart
+
+Here are some commonly used properties to customize the bar chart.
+
+- `BarGapMax` sets the maximum gap between bars in a stack. See the prop for more details.
+
+- `BarCornerRadius` sets the corner radius of the bars.
+
+- `BarMinimumHeight` provides the minimum height of a bar. Bars below this height will be displayed at this height.
+
+- Use `IsCalloutForStack` to configure callout to be at stack level or individual datapoint level.
+
+- Define a custom callout rendered per datapoint using `OnRenderCalloutPerDataPoint` and per stack using `OnRenderCalloutPerStack`
+
+- Use `OnBarClick` handler for callback on click of bars
+
+- The bar labels are shown by default. Set the `HideLabels` prop to hide them.
+
+- Use the `BarWidth` prop to customize the width of each bar in the chart. When set to undefined or 'default', the bar width defaults to 16px, which may decrease to prevent overlap. When set to 'auto', the bar width is calculated from padding values. For a fixed bar width, specify an absolute pixel value like 40.
+
+- Use the `MaxBarWidth` prop to limit the width of bars to a specified number of pixels.
+
+- Use the `XAxisInnerPadding` and `XAxisOuterPadding` props to adjust the padding between bars and the padding before the first bar and after the last bar, respectively. These props accept values between 0 and 1, representing a fraction of the step, which is the interval between the start of a bar and the start of the next bar. These props are particularly relevant when using a string x-axis. By default, the inner padding is set to 2/3, maintaining a 2:1 spacing ratio. This default value is calculated using the formula:
+
+> `innerPadding = spaceBetweenBars / (spaceBetweenBars + barWidth)`
+
+## Do's
+
+Refer to Vertical Bar Chart page for common dos.
+
+## Don'ts
+
+Refer to Vertical Bar Chart page for common don'ts.

examples/Demo/FluentUI.Demo/Program.cs

@@ -4,6 +4,7 @@
 
 using FluentUI.Demo.Client;
 using Microsoft.FluentUI.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components.Charts;
 
 var builder = WebApplication.CreateBuilder(args);
 
@@ -27,6 +28,7 @@
     // config.DefaultValues.ForAny<FluentAutocomplete<object, object>>().Set(p => p.Width, "100%");
     // config.DefaultValues.ForAny<FluentAutocomplete<object, object>>().Set(p => p.Multiple, false);
 
+    config.DefaultValues.ForAny<FluentChartBase>().Set(p => p.RoundedCorners, true);
     // Use a custom localizer
     config.Localizer = new FluentUI.Demo.MyLocalizer();
 });

src/Charts.Scripts/src/chart-legend/chart-legend.definition.ts

@@ -14,3 +14,4 @@ export const definition: PartialFASTElementDefinition = {
   template,
   styles,
 };
+

src/Charts/Infrastructure/ChartJson.cs

@@ -76,4 +76,14 @@ public static string Serialize(IReadOnlyList<GanttChartDataPoint> value) =>
         JsonSerializer.Serialize(
             value,
             GanttChartDataJsonSerializerContext.Default.IReadOnlyListGanttChartDataPoint);
+
+    /// <summary>
+    /// Serializes vertical bar chart data using the vertical bar chart serializer context.
+    /// </summary>
+    /// <param name="value">The vertical bar chart series collection.</param>
+    /// <returns>A JSON string suitable for the <c>fluent-vertical-bar-chart</c> component.</returns>
+    public static string Serialize(IReadOnlyList<VerticalBarChartSeries> value) =>
+        JsonSerializer.Serialize(
+            value,
+            VerticalBarChartDataJsonSerializerContext.Default.IReadOnlyListVerticalBarChartSeries);
 }

src/Charts/Models/GroupedVerticalBarChart/GroupedVerticalBarChartDataPoint.cs

@@ -0,0 +1,65 @@
+// ------------------------------------------------------------------------
+// This file is licensed to you under the MIT License.
+// ------------------------------------------------------------------------
+
+using System.Text.Json.Serialization;
+using Microsoft.FluentUI.AspNetCore.Components.Extensions;
+
+namespace Microsoft.FluentUI.AspNetCore.Components.Charts;
+
+/// <summary>
+/// Represents a single data point in a grouped vertical bar chart series.
+/// </summary>
+public sealed record GroupedVerticalBarChartDataPoint
+{
+    /// <summary>
+    /// Gets the legend text shown for the bar segment.
+    /// </summary>
+    [JsonPropertyName("legend")]
+    public string Legend { get; init; } = string.Empty;
+
+    /// <summary>
+    /// Gets the numeric value represented by the bar segment.
+    /// </summary>
+    [JsonPropertyName("data")]
+    public double Data { get; init; }
+
+    /// <summary>
+    /// Gets the optional total bar length used for ratio-style rendering.
+    /// </summary>
+    [JsonPropertyName("total")]
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public double? Total { get; init; }
+
+    /// <summary>
+    /// Gets the solid color used to render the bar segment.
+    /// Use <see cref="DataVizPalette.Custom"/> and set <see cref="CustomColor"/> to supply
+    /// an exact hex or CSS color string. If not provided, the component falls back to its
+    /// default palette.
+    /// </summary>
+    [JsonIgnore]
+    public DataVizPalette? Color { get; init; }
+
+    /// <summary>
+    /// Custom color value used when <see cref="Color"/> is <see cref="DataVizPalette.Custom"/>.
+    /// Accepts an HTML hex color string (e.g. <c>#0099BC</c>) or a CSS variable.
+    /// </summary>
+    [JsonIgnore]
+    public string? CustomColor { get; init; }
+
+    /// <summary>
+    /// Gets the serialized color value sent to the web component.
+    /// Returns <see cref="CustomColor"/> when <see cref="Color"/> is <see cref="DataVizPalette.Custom"/>,
+    /// otherwise the palette token string, or <see langword="null"/> when no color is set.
+    /// </summary>
+    [JsonPropertyName("color")]
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public string? SerializedColor => Color == DataVizPalette.Custom ? CustomColor : Color?.ToAttributeValue();
+
+    /// <summary>
+    /// Gets the optional two-color gradient used to render the bar segment.
+    /// The array should contain exactly two color values: start and end.
+    /// </summary>
+    [JsonPropertyName("gradient")]
+    public string[]? Gradient { get; init; }
+}

src/Charts/Models/GroupedVerticalBarChart/GroupedVerticalBarChartSeries.cs

@@ -0,0 +1,37 @@
+// ------------------------------------------------------------------------
+// This file is licensed to you under the MIT License.
+// ------------------------------------------------------------------------
+
+using System.Text.Json.Serialization;
+
+namespace Microsoft.FluentUI.AspNetCore.Components.Charts;
+
+/// <summary>
+/// Represents one grouped vertical bar chart series in the data payload.
+/// </summary>
+public sealed record GroupedVerticalBarChartSeries
+{
+    /// <summary>
+    /// Gets the optional title shown for the data series.
+    /// </summary>
+    [JsonPropertyName("chartSeriesTitle")]
+    public string? ChartSeriesTitle { get; init; }
+
+    /// <summary>
+    /// Gets the collection of data points rendered within the series.
+    /// </summary>
+    [JsonPropertyName("chartData")]
+    public IReadOnlyList<GroupedVerticalBarChartDataPoint> ChartData { get; init; } = [];
+
+    /// <summary>
+    /// Gets the optional benchmark value used to render the benchmark indicator.
+    /// </summary>
+    [JsonPropertyName("benchmarkData")]
+    public double? BenchmarkData { get; init; }
+
+    /// <summary>
+    /// Gets optional text displayed alongside the chart data for the series.
+    /// </summary>
+    [JsonPropertyName("chartDataText")]
+    public string? ChartDataText { get; init; }
+}

src/Charts/Models/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisSeries.cs

@@ -0,0 +1,37 @@
+// ------------------------------------------------------------------------
+// This file is licensed to you under the MIT License.
+// ------------------------------------------------------------------------
+
+using System.Text.Json.Serialization;
+
+namespace Microsoft.FluentUI.AspNetCore.Components.Charts;
+
+/// <summary>
+/// Represents one horizontal bar chart series in the data payload.
+/// </summary>
+public sealed record HorizontalBarChartWithAxisSeries
+{
+    /// <summary>
+    /// Gets the optional title shown for the data series.
+    /// </summary>
+    [JsonPropertyName("chartSeriesTitle")]
+    public string? ChartSeriesTitle { get; init; }
+
+    /// <summary>
+    /// Gets the collection of data points rendered within the series.
+    /// </summary>
+    [JsonPropertyName("chartData")]
+    public IReadOnlyList<HorizontalBarChartWithAxisDataPoint> ChartData { get; init; } = [];
+
+    /// <summary>
+    /// Gets the optional benchmark value used to render the benchmark indicator.
+    /// </summary>
+    [JsonPropertyName("benchmarkData")]
+    public double? BenchmarkData { get; init; }
+
+    /// <summary>
+    /// Gets optional text displayed alongside the chart data for the series.
+    /// </summary>
+    [JsonPropertyName("chartDataText")]
+    public string? ChartDataText { get; init; }
+}