Add ChartId to Chart to use as CanvasId

ChartJs.Blazor.Samples/Client/Pages/Charts/Bar/Vertical.razor

@@ -6,7 +6,8 @@
 <Chart Config="_config" @ref="_chart"></Chart>
 
 <button @onclick="RandomizeData">Randomize Data</button>
-<button @onclick="AddDataset">Add Dataset</button>
+<button @onclick="() => AddDataset()">Add Dataset</button>
+<button @onclick="() => AddDataset(true)">Add Hidden Dataset</button>
 <button @onclick="RemoveDataset">Remove Dataset</button>
 <button @onclick="AddData">Add Data</button>
 <button @onclick="RemoveData">Remove Data</button>
@@ -79,21 +80,24 @@
         _chart.Update();
     }
 
-    private void AddDataset()
+    private void AddDataset(bool? hidden = null)
     {
         Color color = ChartColors.All[_config.Data.Datasets.Count % ChartColors.All.Count];
         IDataset<int> dataset = new BarDataset<int>(RandomScalingFactor(_config.Data.Labels.Count))
         {
             Label = $"Dataset {_config.Data.Datasets.Count}",
             BackgroundColor = ColorUtil.FromDrawingColor(Color.FromArgb(128, color)),
             BorderColor = ColorUtil.FromDrawingColor(color),
-            BorderWidth = 1
+            BorderWidth = 1,
+            Hidden = hidden
         };
 
+
         _config.Data.Datasets.Add(dataset);
         _chart.Update();
     }
 
+
     private void RemoveDataset()
     {
         IList<IDataset> datasets = _config.Data.Datasets;

ChartJs.Blazor.Samples/Client/Pages/Workarounds/Gradient.razor

@@ -3,12 +3,13 @@
 @layout SampleLayout
 @inject IJSRuntime jsRuntime
 
-<Chart Config="_config" SetupCompletedCallback="@SetupCompletedCallback"></Chart>
+<Chart @ref="_chart" Config="_config" SetupCompletedCallback="@SetupCompletedCallback"></Chart>
 
 @code {
     private const int InitalCount = 7;
     private LineConfig _config;
     private Random _rng = new Random();
+    private Chart _chart;
 
     protected override void OnInitialized()
     {
@@ -61,5 +62,5 @@
     }
 
     private async Task SetupCompletedCallback() =>
-        await jsRuntime.InvokeVoidAsync("workaroundGradient", _config.CanvasId);
+        await jsRuntime.InvokeVoidAsync("workaroundGradient", _chart.ChartId);
 }

src/ChartJs.Blazor/Chart.razor

@@ -1 +1 @@
-<canvas id="@Config.CanvasId" width="@Width" height="@Height"></canvas>
+<canvas id="@ChartId" width="@Width" height="@Height"></canvas>

src/ChartJs.Blazor/Chart.razor.cs

@@ -12,6 +12,8 @@ namespace ChartJs.Blazor
     /// </summary>
     public partial class Chart
     {
+        private ConfigBase _config;
+
         /// <summary>
         /// This event is fired when the chart has been setup through interop and
         /// the JavaScript chart object is available. Use this callback if you need to setup
@@ -30,7 +32,17 @@ public partial class Chart
         /// Gets or sets the configuration of the chart.
         /// </summary>
         [Parameter]
-        public ConfigBase Config { get; set; }
+        public ConfigBase Config
+        {
+            get => _config;
+            set
+            {
+                // Need to synchronize the Config.CanvasId with Chart.ChartId
+                if (_config != null) _config.CanvasId = null;
+                _config = value;
+                if (_config != null) _config.CanvasId = ChartId;
+            }
+        }
 
         /// <summary>
         /// Gets or sets the width of the canvas HTML element.
@@ -44,6 +56,12 @@ public partial class Chart
         [Parameter]
         public int? Height { get; set; }
 
+        /// <summary>
+        /// Gets the id for the html canvas element associated with this chart.
+        /// This property is initialized to a random GUID-string upon creation.
+        /// </summary>
+        public string ChartId { get; } = Guid.NewGuid().ToString();
+
         /// <inheritdoc />
         protected override async Task OnAfterRenderAsync(bool firstRender)
         {

src/ChartJs.Blazor/Common/ConfigBase.cs

@@ -20,15 +20,25 @@ protected ConfigBase(ChartType chartType)
         }
 
         /// <summary>
-        /// Gets the type of chart this config is for.
+        /// Gets or sets the id for the html canvas element associated with this chart.
+        /// This property must be set to the ChartId of the chart.
         /// </summary>
-        public ChartType Type { get; }
+        public string CanvasId { get; internal set;  }
 
         /// <summary>
-        /// Gets the id for the html canvas element associated with this chart.
-        /// This property is initialized to a random GUID-string upon creation.
+        /// Gets a value indicating whether debug messages should be written to the console
+        /// in the Javascript code.
         /// </summary>
-        public string CanvasId { get; } = Guid.NewGuid().ToString();
+#if DEBUG
+        public bool Debug => System.Diagnostics.Debugger.IsAttached;
+#else
+        public bool Debug => false;
+#endif
+
+        /// <summary>
+        /// Gets the type of chart this config is for.
+        /// </summary>
+        public ChartType Type { get; }
 
         /// <summary>
         /// Gets the list of inline plugins for this chart. Consider

src/ChartJs.Blazor/Common/Dataset.cs

@@ -45,6 +45,12 @@ protected Dataset(ChartType type, string id = null) : base(new List<T>())
             Type = type;
         }
 
+        /// <summary>
+        /// Sets the dataset to be hidden when rendered. The label will still show in the Legend so
+        /// that the user can click on it and show the data.
+        /// </summary>
+        public bool? Hidden { get; set; }
+
         /// <summary>
         /// Adds the elements of the specified collection to the end of the <see cref="Dataset{T}"/>.
         /// </summary>

src/ChartJs.Blazor/Interop/TypeScript/ChartJsInterop.ts

@@ -1,6 +1,7 @@
 /// <reference path="types/Chartjs.d.ts" />   
 
 interface ChartConfiguration extends Chart.ChartConfiguration {
+    debug: boolean;
     canvasId: string;
 }
 
@@ -26,6 +27,9 @@ class ChartJsInterop {
     BlazorCharts = new Map<string, Chart>();
 
     public setupChart(config: ChartConfiguration): boolean {
+        if(config.debug)
+            console.debug("ChartJS.Blazor.ChartJSInterop", config);
+
         if (!this.BlazorCharts.has(config.canvasId)) {
             this.wireUpCallbacks(config);