Add Help; add multiple axis; Fix minor bugs

CHANGELOG.md

@@ -8,6 +8,21 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). To
 auto-changelog
 ```
 
+#### [0.93](https://github.com/erossini/BlazorChartjs/compare/0.92...0.93)
+
+> 10 November 2022
+
+- Add for Line chart Y and Y2 - Add Pie chart options - Introduce StringEnum for Align, LegendAlign, CrossAlign, PointStyle and Poistion [`#28`](https://github.com/erossini/BlazorChartjs/pull/28)
+- Update issue templates [`e4621c0`](https://github.com/erossini/BlazorChartjs/commit/e4621c0a7341187c4e27bb4710cba77d98ed13a7)
+- Update README [`710f8c0`](https://github.com/erossini/BlazorChartjs/commit/710f8c0010af15a263b03907d7039f29d8ea0c9d)
+
+#### [0.92](https://github.com/erossini/BlazorChartjs/compare/0.91...0.92)
+
+> 7 November 2022
+
+- Add borderWidth for all charts [`#26`](https://github.com/erossini/BlazorChartjs/pull/26)
+- Update CHANGELOG [`0039102`](https://github.com/erossini/BlazorChartjs/commit/003910208c6e8b8dffb817a36eca9f9d81da674e)
+
 #### [0.91](https://github.com/erossini/BlazorChartjs/compare/0.9...0.91)
 
 > 2 November 2022

ChartjsDemo/ChartjsDemo.csproj

@@ -25,6 +25,9 @@
     <Content Update="Pages\CrosshairPage.razor">
       <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
     </Content>
+    <Content Update="Pages\LineMultiAxes.razor">
+      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+    </Content>
   </ItemGroup>
 
 </Project>

ChartjsDemo/Data/LineDataExamples.cs

@@ -9,5 +9,11 @@ public static class LineDataExamples
         // custom code
         public static List<string> CustomLineText = new List<string>() { "January", "February", "March", "April", "May", "June" };
         public static List<decimal> CustomLine = new List<decimal>() { 60, 80, 81, 56, 55, 40 };
+
+        // multi axes
+        public static List<string> MultiAxesLineText = new List<string>() { 
+            "January;2015", "February;2015;Y", "March;2015", 
+            "January;2016", "February;2016;Y", "March;2016" };
+        public static List<decimal> MultiAxesLine = new List<decimal>() { 12, 19, 3, 5, 2, 3 };
     }
-}
+}

ChartjsDemo/Pages/AreaSimple.razor

@@ -65,7 +65,14 @@ protected override async Task OnInitializedAsync()
                 Options = new Options()
                 {
                     Responsive = true,
-                    MaintainAspectRatio = false
+                    MaintainAspectRatio = false,
+                    Plugins = new Plugins()
+                    {
+                        Legend = new Legend()
+                        {
+                            Display = true
+                        }
+                    }
                 }
             };
 

ChartjsDemo/Pages/DoughnutSimple.razor

@@ -27,8 +27,21 @@ private Chart? _chart1;
 protected override async Task OnInitializedAsync()
 {
     _config1 = new DoughnutChartConfig()
+    {
+        Options = new Options()
         {
-        };
+            Responsive = true,
+            MaintainAspectRatio = false,
+            Plugins = new Plugins()
+            {
+                Legend = new Legend()
+                {
+                    Display = true,
+                    Position = LegendPosition.Left
+                }
+            }
+        }
+    };
 
     _config1.Data.Labels = PieDataExamples.SimplePieText;
     _config1.Data.Datasets.Add(new DoughnutDataset()
@@ -52,7 +65,15 @@ protected override async Task OnInitializedAsync()
             Options = new Options()
             {
                  Responsive = true,
-                 MaintainAspectRatio = false
+                 MaintainAspectRatio = false,
+                 Plugins = new Plugins()
+                 {
+                     Legend = new Legend()
+                     {
+                         Display = true,
+                         Position = LegendPosition.Left
+                     }
+                 }
             }
         };
 

ChartjsDemo/Pages/LineBar.razor

@@ -42,26 +42,31 @@ protected override async Task OnInitializedAsync()
                     }
                 },
                 Scales = new Dictionary<string, Axis>()
-            {
                 {
-                    Scales.XAxisId, new Axis()
                     {
-                        Stacked = true,
-                        Ticks = new Ticks()
+                        Scales.XAxisId, new Axis()
                         {
-                            MaxRotation = 0,
-                            MinRotation = 0
+                            Stacked = true,
+                            Ticks = new Ticks()
+                            {
+                                MaxRotation = 0,
+                                MinRotation = 0
+                            }
                         }
-                    }
-                },
-                {
-                    Scales.YAxisId, new Axis()
+                    },
                     {
-                        Stacked = true
+                        Scales.YAxisId, new Axis()
+                        {
+                            Stacked = true,
+                            Title = new AxesTitle()
+                            {
+                                Display = true,
+                                Text = "This is an Y title"
+                            }
+                        }
                     }
                 }
             }
-            }
         };
 
     _config1.Data.Labels = BarDataExamples.SimpleBarText;
@@ -121,7 +126,12 @@ protected override async Task OnInitializedAsync()
                         {
                             Scales.YAxisId, new Axis()
                             {
-                                Stacked = true
+                                Stacked = true,
+                                Title = new AxesTitle()
+                                {
+                                    Display = true,
+                                    Text = "This is an Y title"
+                                }
                             }
                         }
                     }

ChartjsDemo/Pages/LineMultiAxes.razor

@@ -0,0 +1,96 @@
+@page "/lineMultiAxes"
+
+<h3>Line Multi Axes</h3>
+
+<p>
+The graph can have multiple X axis and this is useful when you want to group some data. In this example, the graph shows the number of votes for the years <b>2015</b> and <b>2015</b> for <b>January</b> to <b>March</b>.
+</p>
+
+<p>
+To achieve that, under <b>Options</b>, there is <b>GroupXAxis</b>: if the property is set to <b>True</b>, the property adds 2 <b>XAxis</b> and check for the labels to display. Separate one value from another with a semicolumn (<b>;</b>) The label should be contains:
+</p>
+
+<ol>
+    <li>the label to display</li>
+    <li>the label for the group</li>
+    <li>any value that identifies when the label for the group has to be display (in the example below the <i>Y</i> is where I define in corrispondence of what I want to display the label).</li>
+</ol>
+
+<Chart Config="_config1" @ref="_chart1" Height="400px"></Chart>
+
+<hr />
+
+<h3>Code</h3>
+
+<p>
+    This is the component to add in your page.
+</p>
+
+<CodeSnippet Language="Language.xml" Style="Style.VisualStudio">
+&ltChart Config="_config1" &#64;ref="_chart1">&lt;Chart>
+</CodeSnippet>
+
+<p>
+    Then, in the code section, add the following code:
+</p>
+
+<CodeSnippet Language="Language.csharp" Style="Style.VisualStudio" LoadMainScript="false">
+private LineChartConfig? _config1;
+private Chart? _chart1;
+
+public static List&lt;string> MultiAxesLineText = new List&lt;string>() { 
+    "January;2015", "February;2015;Y", "March;2015", 
+    "January;2016", "February;2016;Y", "March;2016" };
+public static List&lt;decimal> MultiAxesLine = new List&lt;decimal>() { 12, 19, 3, 5, 2, 3 };
+
+protected override async Task OnInitializedAsync()
+{
+    _config1 = new LineChartConfig()
+    {
+        Options = new Options()
+        {
+            GroupXAxis = true
+        }
+    };
+
+    _config1.Data.Labels = LineDataExamples.SimpleLineText;
+    _config1.Data.Datasets.Add(new LineDataset()
+        {
+            Label = "My First Dataset",
+            Data = LineDataExamples.SimpleLine.ToList(),
+            BorderColor = Colors.PaletteBorder1.FirstOrDefault(),
+            Tension = 0.1M,
+            Fill = false,
+            PointRadius= 15,
+            PointStyle = PointStyle.Cross
+        });
+}
+</CodeSnippet>
+
+@code {
+    private LineChartConfig? _config1;
+    private Chart? _chart1;
+
+    protected override async Task OnInitializedAsync()
+    {
+        _config1 = new LineChartConfig()
+        {
+            Options = new Options()
+            {
+                GroupXAxis = true
+            }
+        };
+
+        _config1.Data.Labels = LineDataExamples.MultiAxesLineText;
+        _config1.Data.Datasets.Add(new LineDataset()
+            {
+                Label = "# of Votes",
+                Data = LineDataExamples.MultiAxesLine.ToList(),
+                BorderColor = Colors.PaletteBorder1.FirstOrDefault(),
+                Tension = 0.1M,
+                Fill = false,
+                PointRadius= 15,
+                PointStyle = PointStyle.Cross
+            });
+    }
+}

ChartjsDemo/Pages/PieMulti.razor

@@ -69,8 +69,16 @@ protected override async Task OnInitializedAsync()
         {
             Options = new PieOptions()
             {
-                    Responsive = true,
-                    MaintainAspectRatio = false
+                Responsive = true,
+                MaintainAspectRatio = false,
+                    Plugins = new Plugins()
+                    {
+                        Legend = new Legend()
+                        {
+                            Display = true,
+                            Position = LegendPosition.Left
+                        }
+                    }
             }
         };
 

ChartjsDemo/Shared/MainLayout.razor

@@ -7,7 +7,7 @@
 
     <main>
         <div class="top-row px-4">
-            <a href="https://www.puresourcecode.com" target="_blank">PureSourceCode.com</a>
+            <a href="https://www.puresourcecode.com" target="_blank"><img src="psc_logo.png" width="25px" />PureSourceCode.com</a>
             <a href="https://www.puresourcecode.com/dotnet/blazor/blazor-component-for-chartjs/" target="_blank">Post</a>
             <a href="https://www.puresourcecode.com/forum/chart-js-for-blazor/" target="_blank">Forum</a>
         </div>

ChartjsDemo/Shared/NavMenu.razor

@@ -34,6 +34,11 @@
                 <span class="oi oi-graph" aria-hidden="true"></span> Line Simple
             </NavLink>
         </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="lineMultiAxes">
+                <span class="oi oi-graph" aria-hidden="true"></span> Line Multi Axes
+            </NavLink>
+        </div>
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="pieSimple">
                 <span class="oi oi-pie-chart" aria-hidden="true"></span> Pie Simple