+
+
+
+
+@code {
+
+ private IgbDataLegend legend;
+ private IgbDataChart chart;
+ private IgbCategoryXAxis xAxis1;
+ private IgbNumericYAxis yAxis1;
+ private IgbNumericYAxis yAxis2;
+ private IgbFinancialPriceSeries series1;
+ private IgbColumnSeries series2;
+ private IgbDataToolTipLayer dataTooltip;
+ private IgbCrosshairLayer crosshairLayer;
+
+ public string[] IncludedDataColumns = new string[] { "High", "Low", "Open", "Close", "Volume" };
+ public string[] ExcludedDataColumns = new string[] { "VOL" };
+
+ private Action BindElements { get; set; }
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ var chart = this.chart;
+ // var xAxis1 = this.xAxis1;
+
+ var yAxis1 = this.yAxis1;
+ var yAxis2 = this.yAxis2;
+ var series1 = this.series1;
+
+ // var dataTooltip = this.dataTooltip;
+ var legend = this.legend;
+
+
+ this.BindElements = () => {
+ legend.Target = this.chart;
+
+ // yAxis1.TitleTextColor = series1.ActualBrush;
+ // yAxis2.TitleTextColor = chart.Series[1].ActualBrush;
+ };
+ this.BindElements();
+
+ }
+
+ private string DarkBackground = "#242323";
+ private string DarkForeground = "white";
+
+ private string LightBackground = "white";
+ private string LightForeground = null;
+
+ private void applyDarkTheme()
+ {
+ applyThemeWith(this.DarkForeground, this.DarkBackground);
+ }
+
+ private void applyLightTheme()
+ {
+ applyThemeWith(this.LightForeground, this.LightBackground);
+ }
+
+ private void applyThemeWith(string foreground, string background)
+ {
+
+ this.AppBackground = background;
+
+ this.yAxis1.MajorStroke = foreground;
+ this.yAxis2.MajorStroke = foreground;
+ this.yAxis1.TickStroke = foreground;
+ this.yAxis2.TickStroke = foreground;
+ this.xAxis1.TickStroke = foreground;
+
+ this.xAxis1.LabelTextColor = foreground;
+ this.yAxis1.LabelTextColor = foreground;
+ this.yAxis2.LabelTextColor = foreground;
+
+ this.xAxis1.Stroke = foreground;
+ this.xAxis1.TitleTextColor = foreground;
+ this.yAxis1.TitleTextColor = foreground;
+ this.yAxis2.TitleTextColor = foreground;
+
+ this.chart.TitleTextColor = foreground;
+ this.chart.SubtitleTextColor = foreground;
+ this.chart.MarkerBrushes = background;
+
+ if (this.dataTooltip != null)
+ {
+ this.dataTooltip.ToolTipBackground = background;
+ // this.dataTooltip.ToolTipBorderThickness = 1;
+ this.dataTooltip.ToolTipBorderBrush = foreground;
+ this.dataTooltip.HeaderTextColor = foreground;
+ this.dataTooltip.TitleTextColor = foreground;
+ this.dataTooltip.ValueTextColor = foreground;
+ this.dataTooltip.LabelTextColor = foreground;
+ this.dataTooltip.UnitsTextColor = foreground;
+ }
+
+ if (this.legend != null)
+ {
+ this.legend.ContentBackground = background;
+ // this.legend.ContentBorderThickness = 1;
+ this.legend.ContentBorderBrush = foreground;
+ this.legend.HeaderTextColor = foreground;
+ this.legend.TitleTextColor = foreground;
+ this.legend.ValueTextColor = foreground;
+ this.legend.LabelTextColor = foreground;
+ this.legend.UnitsTextColor = foreground;
+ }
+ }
+
+ private string _AppBackground = "white";
+ public string AppBackground
+ {
+ get { return _AppBackground; }
+ set { _AppBackground = value; }
+ }
+
+ private StockTesla _stockTesla = null;
+ public StockTesla StockTesla
+ {
+ get
+ {
+ if (_stockTesla == null)
+ {
+ _stockTesla = new StockTesla();
+ }
+ return _stockTesla;
+ }
+ }
+
+
+
+}
\ No newline at end of file
diff --git a/samples/charts/data-chart/chart-themes/BlazorClientApp.csproj b/samples/charts/data-chart/chart-themes/BlazorClientApp.csproj
new file mode 100644
index 0000000000..2931326d0f
--- /dev/null
+++ b/samples/charts/data-chart/chart-themes/BlazorClientApp.csproj
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-blazor-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-blazor-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Setup
+
+- instal **.NET SDK** from this [website](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/install)
+
+## Running App in Visual Studio 2022
+
+NOTE: VS 2022 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2022** as an administrator
+
+- open the **BlazorClientApp.sln** solution
+
+- right click solution and select **Restore NuGet Packages** menu item
+
+- click **Debug** menu and select **Start Debugging** or press **F5** key
+
+
+## Running App in VS Code
+
+- open **VS Code** as an administrator
+
+- open this folder in **VS Code**
+
+- open a terminal window
+
+- to restore assemblies, run this command:
+```dotnet restore```
+
+- to run samples, run this command:
+```dotnet watch run```
+
+- wait for for message:
+**Now listening on: http://localhost:4200**
+
+- open **http://localhost:4200** in your browser
+
+
+## Resources
+
+- [Razor Component Models](https://www.codemag.com/article/1911052)
+- [Razor Syntax](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#razor-syntax)
+- [Getting reference to components](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#capture-references-to-components)
diff --git a/samples/charts/data-chart/chart-themes/StockTesla.cs b/samples/charts/data-chart/chart-themes/StockTesla.cs
new file mode 100644
index 0000000000..58856c73a6
--- /dev/null
+++ b/samples/charts/data-chart/chart-themes/StockTesla.cs
@@ -0,0 +1,248 @@
+using System;
+using System.Collections.Generic;
+public class StockTeslaItem
+{
+ public string Date { get; set; }
+ public double Open { get; set; }
+ public double High { get; set; }
+ public double Low { get; set; }
+ public double Close { get; set; }
+ public double Volume { get; set; }
+ public double Change { get; set; }
+ public double Index { get; set; }
+}
+
+public class StockTesla
+ : List
+
+
+@code {
+
+ private Action BindElements { get; set; }
+ private IgbInput AnnotationInput{ get; set; }
+ private IgbTextarea AnnotationTextArea{ get; set; }
+ private IgbUserAnnotationInformation AnnotationInfo{ get; set; }
+ private IgbToolbar toolbar;
+ private IgbDataChart chart;
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ var toolbar = this.toolbar;
+ var chart = this.chart;
+
+ if(firstRender && chart != null){
+ await Task.Delay(500);
+ await JS.InvokeVoidAsync("onUserAnnotationEnable", null);
+ }
+
+ this.BindElements = () => { toolbar.Target = this.chart; };
+ this.BindElements();
+ }
+
+ public void OnUserAnnotationInfoRequested(IgbUserAnnotationInformationEventArgs e){
+ this.AnnotationInfo = e.AnnotationInfo;
+ JS.InvokeVoidAsync("onUserAnnotationToggleDialog", new object[] { true });
+ }
+
+ public async void OnDoneButtonClick(MouseEventArgs e){
+
+ if (this.AnnotationInfo == null) return;
+
+ this.AnnotationInfo.Label = this.AnnotationInput.GetCurrentValue();
+ this.AnnotationInfo.AnnotationData = this.AnnotationTextArea.GetCurrentValue();
+
+ string badgeColor = await JS.InvokeAsync
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-blazor-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-blazor-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Setup
+
+- instal **.NET SDK** from this [website](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/install)
+
+## Running App in Visual Studio 2022
+
+NOTE: VS 2022 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2022** as an administrator
+
+- open the **BlazorClientApp.sln** solution
+
+- right click solution and select **Restore NuGet Packages** menu item
+
+- click **Debug** menu and select **Start Debugging** or press **F5** key
+
+
+## Running App in VS Code
+
+- open **VS Code** as an administrator
+
+- open this folder in **VS Code**
+
+- open a terminal window
+
+- to restore assemblies, run this command:
+```dotnet restore```
+
+- to run samples, run this command:
+```dotnet watch run```
+
+- wait for for message:
+**Now listening on: http://localhost:4200**
+
+- open **http://localhost:4200** in your browser
+
+
+## Resources
+
+- [Razor Component Models](https://www.codemag.com/article/1911052)
+- [Razor Syntax](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#razor-syntax)
+- [Getting reference to components](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#capture-references-to-components)
diff --git a/samples/charts/data-chart/user-annotation-layer/_Imports.razor b/samples/charts/data-chart/user-annotation-layer/_Imports.razor
new file mode 100644
index 0000000000..d27d337cb1
--- /dev/null
+++ b/samples/charts/data-chart/user-annotation-layer/_Imports.razor
@@ -0,0 +1,9 @@
+// these namespaces are global to the app
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components.WebAssembly.Http
+@using Microsoft.JSInterop
+@using Infragistics.Samples
diff --git a/samples/charts/data-chart/user-annotation-layer/wwwroot/UserAnnotationLayerScript.js b/samples/charts/data-chart/user-annotation-layer/wwwroot/UserAnnotationLayerScript.js
new file mode 100644
index 0000000000..838fef3cbc
--- /dev/null
+++ b/samples/charts/data-chart/user-annotation-layer/wwwroot/UserAnnotationLayerScript.js
@@ -0,0 +1,46 @@
+function onUserAnnotationEnable() {
+ var x = document.getElementsByClassName("igc-data-chart")[0];
+ x.isUserAnnotationsEnabled = true;
+}
+
+function onUserAnnotationToggleDialog(open) {
+ var dialog = document.getElementsByClassName("annotationDialogPopup")[0];
+
+ if (open) {
+ dialog.style.display = "block";
+ }
+ else {
+ dialog.style.display = "none";
+ }
+}
+
+function onUserAnnotationToolTipContentUpdatingScript(o, e) {
+ var tooltipText = e.annotationInfo.annotationData;
+
+ if (e.content.children.length == 0) {
+ var element = document.createElement("div");
+ element.textContent = tooltipText;
+ element.style = "color: white";
+ e.content.appendChild(element);
+ }
+ else {
+ var element = e.content.children[0];
+ element.textContent = tooltipText;
+ }
+}
+
+igRegisterScript("onUserAnnotationToolTipContentUpdatingScript", onUserAnnotationToolTipContentUpdatingScript, false);
+
+
+function getBadgeColor() {
+ var badgeColorEditor = document.getElementById("annotationBadgeColorEditor").childNodes[0].childNodes[0];
+ return badgeColorEditor.value;
+}
+
+function getMainColor() {
+ var mainColorEditor = document.getElementById("annotationMainColorEditor").childNodes[0].childNodes[0];
+ return mainColorEditor.value;
+}
+
+
+
diff --git a/samples/charts/data-chart/user-annotation-layer/wwwroot/index.css b/samples/charts/data-chart/user-annotation-layer/wwwroot/index.css
new file mode 100644
index 0000000000..73e66607e6
--- /dev/null
+++ b/samples/charts/data-chart/user-annotation-layer/wwwroot/index.css
@@ -0,0 +1,47 @@
+/*
+CSS styles are loaded from the shared CSS file located at:
+https://static.infragistics.com/xplatform/css/samples/
+*/
+#aboveContentSplit {
+ display: flex;
+ flex-direction: row;
+}
+#aboveContentLeftContainer {
+ margin-left: 1.25rem;
+ display: flex;
+ flex-grow: 1;
+ justify-content: start;
+ align-items: end;
+}
+#aboveContentRightContainer {
+ margin-right: 1.25rem;
+ display: flex;
+ flex-grow: 1;
+ justify-content: end;
+ align-items: end;
+}
+
+.annotationDialogPopup {
+ display: none;
+ display: flex;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 20%;
+ height: 23rem;
+ background-color: white;
+ border: 1px black solid;
+ border-radius: 0.25rem;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ box-shadow: 0.05rem 0.05rem 0.5rem 0.05rem gray;
+}
+
+.annotationDialogButtons {
+ height: auto;
+ justify-content: center;
+ align-items: center;
+ padding: 1rem;
+ gap: 1rem;
+}
diff --git a/samples/charts/data-chart/user-annotation-layer/wwwroot/index.html b/samples/charts/data-chart/user-annotation-layer/wwwroot/index.html
new file mode 100644
index 0000000000..244a6c4877
--- /dev/null
+++ b/samples/charts/data-chart/user-annotation-layer/wwwroot/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+
+
+