Secondary axis

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor

@@ -6,33 +6,33 @@
 
 <h1>Blazor Line Chart</h1>
 <div class="lead mb-3">
-    A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time.
-    It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.
+  A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time.
+  It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.
 </div>
 
 <CarbonAds />
 
 <SectionHeading Size="HeadingSize.H4" Text="Prerequisites" PageUrl="@pageUrl" HashTagName="prerequisites" />
 <div class="mb-3">
-    Refer to the <a href="/getting-started/blazor-webassembly">getting started guide</a> for setting up charts.
+  Refer to the <a href="/getting-started/blazor-webassembly">getting started guide</a> for setting up charts.
 </div>
 
 <SectionHeading Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
 <div class="mb-3">
-    In the following example, a <a href="/utils/color-utility#categorical-12-color">categorical 12-color</a> palette is used.
+  In the following example, a <a href="/utils/color-utility#categorical-12-color">categorical 12-color</a> palette is used.
 </div>
 <Callout Heading="TIP" Color="CalloutColor.Success">
-    For data visualization, you can use the predefined palettes <code>ColorUtility.CategoricalTwelveColors</code> for a 12-color palette and <code>ColorUtility.CategoricalSixColors</code> for a 6-color palette.
-    These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
+  For data visualization, you can use the predefined palettes <code>ColorUtility.CategoricalTwelveColors</code> for a 12-color palette and <code>ColorUtility.CategoricalSixColors</code> for a 6-color palette.
+  These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
 </Callout>
 <Demo Type="typeof(LineChart_Demo_01_A_Examples)" Tabs="true" />
 <div class="my-3"></div>
 <Demo Type="typeof(LineChart_Demo_01_B_Examples)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H4" Text="Locale" PageUrl="@pageUrl" HashTagName="locale" />
 <div class="my-3">
-    By default, the chart is using the default locale of the platform on which it is running.
-    In the following example, you will see the chart in the <b>German</b> locale (<b>de_DE</b>).
+  By default, the chart is using the default locale of the platform on which it is running.
+  In the following example, you will see the chart in the <b>German</b> locale (<b>de_DE</b>).
 </div>
 <Demo Type="typeof(LineChart_Demo_02_Locale)" Tabs="true" />
 
@@ -45,12 +45,15 @@
 <SectionHeading Size="HeadingSize.H4" Text="Tick Configuration" PageUrl="@pageUrl" HashTagName="tick-configuration" />
 <Demo Type="typeof(LineChart_Demo_05_Tick_Configuration)" Tabs="true" />
 
+<SectionHeading Size="HeadingSize.H4" Text="Secondary Y-Axis" PageUrl="@pageUrl" HashTagName="secondary-y-axis" />
+<Demo Type="typeof(LineChart_Demo_06_Secondary_Axis)" Tabs="true" />
+
 <SectionHeading Size="HeadingSize.H4" Text="Fill between datasets" PageUrl="@pageUrl" HashTagName="dataset-fill" />
 <Demo Type="typeof(LineChart_Demo_06_Dataset_Fill)" Tabs="true" />
 
 @code {
-    private readonly string pageUrl = "/charts/line-chart";
-    private readonly string title = "Blazor Line Chart";
-    private readonly string description = "A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.";
-    private readonly string imageUrl = "https://i.imgur.com/8b7jH0D.png";
+  private readonly string pageUrl = "/charts/line-chart";
+  private readonly string title = "Blazor Line Chart";
+  private readonly string description = "A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.";
+  private readonly string imageUrl = "https://i.imgur.com/8b7jH0D.png";
 }

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_06_Secondary_Axis.razor

@@ -0,0 +1,102 @@
+<LineChart @ref="lineChart" Width="500" Height="200" />
+
+@code {
+    private LineChart lineChart = default!;
+    private LineChartOptions lineChartOptions = default!;
+    private ChartData chartData = default!;
+
+    private int datasetsCount;
+    private int labelsCount;
+
+    private Random random = new();
+
+    protected override void OnInitialized()
+    {
+        chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets() };
+        lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
+
+        lineChartOptions.Scales.Y!.Title = new ChartAxesTitle() { Display = true, Text = "Primary y-axis" };
+        lineChartOptions.Scales.Y!.Max = 100;
+        // Set secondary y-axis
+        lineChartOptions.Scales.SecondaryY!.Display = true;
+        lineChartOptions.Scales.SecondaryY!.Title = new ChartAxesTitle() { Display = true, Text = "Secondary y-axis" };
+        lineChartOptions.Scales.SecondaryY!.Max = 500;
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await lineChart.InitializeAsync(chartData, lineChartOptions);
+        }
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
+    #region Data Preparation
+
+    private List<IChartDataset> GetDefaultDataSets()
+    {
+        var datasets = new List<IChartDataset>();
+        var primaryDataset = GetRandomLineChartDataset(100);
+        var secondaryDataset = GetRandomLineChartDataset(500);
+
+        // Move the dataset to the secondary y-axis
+        secondaryDataset.OnSecondaryYAxis = true;
+
+        datasets.Add(primaryDataset);
+        datasets.Add(secondaryDataset);
+
+        return datasets;
+    }
+
+    private LineChartDataset GetRandomLineChartDataset(int max)
+    {
+        var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor();
+
+        datasetsCount += 1;
+
+        return new LineChartDataset
+            {
+                Label = $"Team {datasetsCount}",
+                Data = GetRandomData(max),
+                BackgroundColor = c.ToRgbString(),
+                BorderColor = c.ToRgbString(),
+                BorderWidth = 2,
+                HoverBorderWidth = 4,
+                // PointBackgroundColor = c.ToRgbString(),
+                // PointRadius = 0, // hide points
+                // PointHoverRadius = 4,
+            };
+    }
+
+    private List<double?> GetRandomData(int max)
+    {
+        var data = new List<double?>();
+        for (var index = 0; index < labelsCount; index++)
+        {
+            data.Add(random.Next(max));
+        }
+
+        return data;
+    }
+
+    private List<string> GetDefaultDataLabels(int numberOfLabels)
+    {
+        var labels = new List<string>();
+        for (var index = 0; index < numberOfLabels; index++)
+        {
+            labels.Add(GetNextDataLabel());
+        }
+
+        return labels;
+    }
+
+    private string GetNextDataLabel()
+    {
+        labelsCount += 1;
+        return $"Day {labelsCount}";
+    }
+
+    #endregion Data Preparation
+
+}

blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs

@@ -282,6 +282,12 @@ public LineChartDataset FillToValue(double value)
     [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
     public string? IndexAxis { get; set; }
 
+    /// <summary>
+    /// Determines if the dataset is plotted on the secondary y-axis.
+    /// </summary>
+    [JsonIgnore]
+    public bool OnSecondaryYAxis { get; set; }
+
     /// <summary>
     /// The fill color for points.
     /// </summary>
@@ -438,12 +444,13 @@ public LineChartDataset FillToValue(double value)
 
     /// <summary>
     /// The ID of the y axis to plot this dataset on.
+    /// Change this through the <see cref="OnSecondaryYAxis" /> property.
     /// </summary>
     /// <remarks>
     /// Default value is 'first y axis'.
     /// </remarks>
     [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
-    public string? YAxisID { get; set; }
+    public string? YAxisID => OnSecondaryYAxis ? "Y1" : null;
 
     #endregion
 }

blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs

@@ -3,7 +3,7 @@
 public interface IChartOptions { }
 
 /// <summary>
-///     <see href="https://www.chartjs.org/docs/latest/general/options.html" />
+/// <see href="https://www.chartjs.org/docs/latest/general/options.html" />
 /// </summary>
 public class ChartOptions : IChartOptions
 {
@@ -183,9 +183,13 @@ public class Scales
 {
     #region Properties, Indexers
 
-    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public ChartAxes? X { get; set; } = new();
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    [JsonPropertyOrder(0)]
+    public ChartAxes? X { get; set; } = new();
 
-    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public ChartAxes? Y { get; set; } = new();
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    [JsonPropertyOrder(1)]
+    public ChartAxes? Y { get; set; } = new();
 
     #endregion
 }
@@ -215,6 +219,11 @@ public class ChartAxes
     [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
     public ChartAxesBorder? Border { get; set; }
 
+    /// <summary>
+    /// Gets or sets whether the axis is displayed.
+    /// </summary>
+    public bool Display { get; set; } = true;
+
     /// <summary>
     /// Gets or sets the grid configuration.
     /// </summary>
@@ -233,6 +242,11 @@ public class ChartAxes
     [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
     public double? Min { get; set; }
 
+    /// <summary>
+    /// Gets or sets the position of the axis.
+    /// </summary>
+    public string Position { get; set; } = "left";
+
     /// <summary>
     /// Should the data be stacked.
     /// By default data is not stacked.

blazorbootstrap/Models/Charts/ChartOptions/LineChartOptions.cs

@@ -12,7 +12,7 @@ public class LineChartOptions : ChartOptions
     /// The base axis of the dataset. 'x' for horizontal lines and 'y' for vertical lines.
     /// </summary>
     /// <remarks>
-    /// Default value is <see langword="null"/>.
+    /// Default value is <see langword="null" />.
     /// </remarks>
     [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
     public string? IndexAxis { get; set; }
@@ -23,7 +23,7 @@ public class LineChartOptions : ChartOptions
 
     public LineChartPlugins Plugins { get; set; } = new();
 
-    public Scales Scales { get; set; } = new();
+    public LineChartScales Scales { get; set; } = new();
 
     #endregion
 

blazorbootstrap/Models/Charts/ChartOptions/LineChartScales.cs

@@ -0,0 +1,13 @@
+namespace BlazorBootstrap;
+
+public class LineChartScales : Scales
+{
+    #region Properties, Indexers
+
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    [JsonPropertyOrder(2)]
+    [JsonPropertyName("Y1")]
+    public ChartAxes? SecondaryY { get; set; } = new() { Display = false, Position = "right" };
+
+    #endregion
+}