### Install TeeChart .NET Core NuGet Package

Source: https://context7.com/steema/teechart-net-pro-samples/llms.txt

Installs the core TeeChart .NET package, which is essential for most .NET applications using the TeeChart library. This package provides the fundamental charting components.

```bash
dotnet add package Steema.TeeChart.NET
```

--------------------------------

### Install TeeChart .NET Blazor NuGet Package

Source: https://context7.com/steema/teechart-net-pro-samples/llms.txt

Installs the TeeChart package for Blazor applications. This enables the integration of interactive charts into Blazor web applications, often with client-side JavaScript rendering.

```bash
dotnet add package Steema.TeeChart.NET.Blazor
```

--------------------------------

### Install TeeChart .NET WPF NuGet Package

Source: https://context7.com/steema/teechart-net-pro-samples/llms.txt

Installs the TeeChart package specifically designed for WPF (Windows Presentation Foundation) applications. This package includes components optimized for WPF integration.

```bash
dotnet add package Steema.TeeChart.WPF
```

--------------------------------

### Install TeeChart .NET Avalonia NuGet Package

Source: https://context7.com/steema/teechart-net-pro-samples/llms.txt

Installs the TeeChart package for Avalonia UI applications. This package provides charting capabilities for cross-platform desktop applications built with Avalonia.

```bash
dotnet add package Steema.TeeChart.NET.Avalonia
```

--------------------------------

### Install TeeChart .NET MAUI NuGet Package

Source: https://context7.com/steema/teechart-net-pro-samples/llms.txt

Installs the TeeChart package for MAUI (.NET Multi-platform App UI) applications. This allows developers to use TeeChart components in cross-platform .NET applications.

```bash
dotnet add package Steema.TeeChart.NET.MAUI
```

--------------------------------

### Install TeeChart .NET Xamarin.Forms NuGet Package (Legacy)

Source: https://context7.com/steema/teechart-net-pro-samples/llms.txt

Installs the TeeChart package for Xamarin.Forms applications. Note that this package is for legacy Xamarin.Forms projects and may not be recommended for new development.

```bash
dotnet add package Steema.TeeChart.NET.Xamarin.Forms
```

--------------------------------

### Setup Client Chart with Average Line and Tooltip in TeeChart.js

Source: https://github.com/steema/teechart-net-pro-samples/blob/main/Blazor/NET 8/TeeChartOnBlazor/Resources/shipJStr.txt

This function configures a TeeChart.js chart by setting up axes for datetime, creating an 'Average' line series based on existing series, and initializing a custom tooltip with specific styling and data retrieval logic. It also adds a vertical cursor tool and applies a 'minimal' theme.

```javascript
var enableCursor = false;

function setupClientChart(aChart) {
	//function series
	var avg = new Tee.Line();
	avg.title = "Average";
	var avgVals = new Array();

	aChart.title.visible = false;

	aChart.axes.bottom.datetime = true;
	aChart.axes.bottom.labels.dateFormat = "shortDate";
	aChart.series.items[0].dateFormat = "shortDate";

	for (var i = 0; i < aChart.series.items[0].data.x.length; i++) {
		aChart.series.items[0].data.x[i] = new Date(aChart.series.items[0].data.x[i]);
		avgVals[i] = (aChart.series.items[0].data.values[i] + aChart.series.items[1].data.values[i]) / 2;
	}

	avg.data.values = avgVals;
	avg.data.x = aChart.series.items[0].data.x;
	avg.format.stroke.size = 2;
	avg.smooth = 0.5;
	aChart.addSeries(avg);

	//tooltip
	tip = new Tee.ToolTip(aChart);
	tip.render = "dom";
	tip.findPoint = false;
	tip.domStyle = "padding-left:8px; padding-right:8px; padding-top:0px; padding-bottom:4px; margin-left:5px; margin-top:0px; ";
	tip.domStyle = tip.domStyle + "background-color:#FCFCFC; border-radius:4px 4px; color:#FFF; ";
	tip.domStyle = tip.domStyle + "border-style:solid;border-color:#A3A3AF;border-width:1px; z-index:1000;";

	aChart.tools.add(tip);

	tip.onhide = function () { scaling = 0; poindex = -1; }

	var t = new Tee.CursorTool(aChart);
	t.direction = "vertical";

	tip.onshow = function (tool, series, index) {
		if (!enableCursor) {
			aChart.tools.add(t);
			enableCursor = true;
		}
	}

	tip.ongettext = function (tool, text, series, index) {
		var t, s = "", ser;

		for (t = 0; t < aChart.series.count(); t++) {
			if (t > 0) s += "<br/>";
			ser = aChart.series.items[t];
			s += '<font face="verdana" color="darkorange" size="1"><b>' + ser.title + ':</b></font> <font face="verdana" color="red" size="1">' + ser.data.values[index].toFixed(2) + '</font>';
		}
		//console.log(index);
		return s;
	}

	aChart.applyTheme("minimal");

	//animation
	animation = new Tee.SeriesAnimation();
	animation.duration = 1500;
	animation.kind = "each";
	fadeAnimation = new Tee.FadeAnimation();
	fadeAnimation.duration = 500;
	fadeAnimation.fade.series = true;
	fadeAnimation.fade.marks = true;
	animation.mode = "linear";
	fadeAnimation.mode = "linear";
	animation.items.push(fadeAnimation);

	animation.animate(aChart);
}
```

--------------------------------

### Generate Appointments Chart in C#

Source: https://github.com/steema/teechart-net-pro-samples/blob/main/Blazor/NET 8/TeeChartOnBlazor/Resources/apptStr.txt

This C# code snippet demonstrates the generation of an Appointments chart using the TeeChart .NET Pro library. It initializes chart data, series names, and labels, then uses the ChartTable class to load the chart configuration. The code also sets the chart title and includes a JavaScript file for potential client-side interactivity.

```csharp
if (chartType == 101) //appointments chart
        {

            //title
            string aTitle = "Appointments";
            //Year labels
            string[] xLabels = new string[] { "2019", "2020", "2021", "2022", "2023" };
            //Series names
            string[] sNames = new string[] { "Ancillaries", "Core staff" };
            //Chart data
            double?[,] apptData = new double?[,] {
                                { /*Ancillaries*/ 10,12,31,34,16 },
                                { /*Core*/ 5,7,12,12,3 }};

            MultiBars stack = MultiBars.Stacked;
            int incr = 5; //left axis increment


            ChartTable cGen = new ChartTable();
            chartJS = await cGen.loadAppointmentsChart(aTitle, sNames, apptData,
                                       stack, xLabels, newLineLabel(xLabels),
                                       incr);

            title = aTitle;

            supportUnit = "<script src=\"js/appointment.js\" type=\"text/javascript\"></script>";

        }
```

--------------------------------

### Create 3D Surface Plot

Source: https://context7.com/steema/teechart-net-pro-samples/llms.txt

Generates three-dimensional surface plots for scientific data visualization. This example fills the surface with sample data and enables the 3D view. Dependencies: Steema.TeeChart.Maui, Steema.TeeChart.Styles.

```csharp
using Steema.TeeChart.Maui;
using Steema.TeeChart.Styles;

var chart = new TChart();
var surface = new Surface(chart.Chart);

// Fill with sample 3D data
surface.FillSampleValues();

// Enable 3D view
chart.Chart.Aspect.View3D = true;
```

--------------------------------

### Setup TeeChart.js Tooltip Display Format in JavaScript

Source: https://github.com/steema/teechart-net-pro-samples/blob/main/Blazor/NET 8/TeeChartOnBlazor/Resources/apptJStr.txt

This JavaScript snippet configures the tooltip display for a TeeChart.js chart. It defines the tooltip's rendering mode, delay, auto-hide behavior, and custom DOM styles for appearance. It also includes an event handler (`ongettext`) to format the tooltip content dynamically based on series data and labels.

```javascript
    //tooltip
    tip = new Tee.ToolTip(aChart);
    tip.render = "dom";
    tip.delay = 3000;
    tip.autoHide = true;
    //tip.findPoint = true;
    tip.domStyle = "padding-left:8px; padding-right:8px; padding-top:0px; padding-bottom:4px; margin-left:5px; margin-top:0px; ";
    tip.domStyle = tip.domStyle + "background-color:#FCFCFC; border-radius:4px 4px; color:#FFF; ";
    tip.domStyle = tip.domStyle + "border-style:solid;border-color:#A3A3AF;border-width:1px; z-index:1000;";

    aChart.tools.add(tip);
    tip.onhide = function () { scaling = 0; poindex = -1; }
    tip.ongettext = function (tool, text, series, index) {
        var t, s = "", ser;

        s += '<font face="verdana" color="darkblue" size="1"><strong>' + aChart.series.items[0].data.labels[index] + '</strong></font>';

        for (t = 0; t < aChart.series.count(); t++) {
            ser = aChart.series.items[t];
            if (!Number.isNaN(ser.data.values[index])) {
                s += "<br/>";
                s += '<font face="verdana" color="#004000" size="1"><b>' + ser.title + ':</b></font> <font face="verdana" color="red" size="1">' 
                     + aChart.axes.left.labels.formatValueString(ser.data.values[index]) + '</font>';
            }
        }
        return s;
    }
```

--------------------------------

### .NET MAUI XAML Declaration for TeeChart Integration

Source: https://context7.com/steema/teechart-net-pro-samples/llms.txt

Provides an example of declaring a TeeChart component in a .NET MAUI application's XAML. It specifies the namespace for Steema.TeeChart.Maui and binds the Drawable property. The TChart control is named 'tChart1' and is configured with height and alignment properties to fill its layout container.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:Steema.TeeChart.Maui;assembly=TeeChart.Maui"
             x:Class="MyApp.ChartPage"
             Title="Chart Demo">

    <StackLayout Margin="30">
        <CheckBox x:Name="view3D"/>
        <Label Text="View 3D" />

        <controls:TChart x:Name="tChart1"
                         Drawable="{Binding Source={RelativeSource Self}}"
                         HeightRequest="400"
                         HorizontalOptions="FillAndExpand"
                         VerticalOptions="FillAndExpand" />
    </StackLayout>
</ContentPage>
```

--------------------------------

### Create MAUI Dashboard Programmatically

Source: https://context7.com/steema/teechart-net-pro-samples/llms.txt

Demonstrates how to create a multi-chart dashboard in MAUI by programmatically adding various chart types (NumericGauge, Donut, Bar) to a Grid layout. This requires the Steema.TeeChart.Maui library.

```csharp
using Steema.TeeChart.Maui;
using Steema.TeeChart.Styles;
using System.Drawing;

public class Dashboard : ContentPage
{
    public Dashboard()
    {
        Grid grid = new() 
        {
            RowDefinitions = 
            {
                new RowDefinition { Height = new GridLength(100) },
                new RowDefinition { Height = new GridLength(2, GridUnitType.Star) },
                new RowDefinition(),
            },
            ColumnDefinitions = 
            {
                new ColumnDefinition(),
                new ColumnDefinition(),
                new ColumnDefinition()
            }
        };

        // Gauge chart
        var gaugeChart = new TChart();
        gaugeChart.Drawable = gaugeChart;
        gaugeChart.Chart.Header.Visible = false;
        gaugeChart.Chart.Series.Add(new NumericGauge());
        gaugeChart.Chart.Series[0].FillSampleValues();
        gaugeChart.HorizontalOptions = LayoutOptions.FillAndExpand;
        gaugeChart.VerticalOptions = LayoutOptions.FillAndExpand;
        grid.Add(gaugeChart, 0, 0);

        // Donut chart
        var donutChart = new TChart();
        donutChart.Drawable = donutChart;
        donutChart.Chart.Header.Visible = false;
        donutChart.Chart.Series.Add(new Donut());
        donutChart.Chart.Legend.Alignment = Steema.TeeChart.LegendAlignments.Bottom;
        ((Donut)donutChart.Chart.Series[0]).Marks.Visible = false;
        ((Donut)donutChart.Chart.Series[0]).Circled = true;
        donutChart.Chart.Series[0].FillSampleValues();
        grid.Add(donutChart, 0, 1);

        // Bar chart
        var barChart = new TChart();
        barChart.Drawable = barChart;
        barChart.Chart.Header.Visible = false;
        barChart.Chart.Series.Add(new Bar());
        barChart.Chart.Series[0].FillSampleValues();
        barChart.Chart.Series[0].Marks.Visible = false;
        barChart.Chart.Legend.Visible = false;
        grid.Add(barChart, 2, 2);

        Title = "TeeChart Dashboard";
        Content = grid;
    }
}
```

--------------------------------

### Create and Configure Line Chart in .NET MAUI

Source: https://context7.com/steema/teechart-net-pro-samples/llms.txt

Demonstrates how to create a Line series in a TChart for .NET MAUI. It includes adding sample data, customizing line appearance such as width, end caps, smoothing, and pointer styles, and configuring chart interaction like zooming.

```csharp
using Steema.TeeChart.Maui;
using Steema.TeeChart.Styles;

// Create TChart and add Line series
var chart = new TChart();
var line = new Line(chart.Chart);

// Fill with sample data or add points manually
line.FillSampleValues();

// Or add custom data points
line.Clear();
line.Add(DateTime.Now.ToOADate(), 25.5);
line.Add(DateTime.Now.AddDays(1).ToOADate(), 28.3);
line.Add(DateTime.Now.AddDays(2).ToOADate(), 22.1);

// Configure line appearance
line.LinePen.Width = 3;
line.LinePen.EndCap = Steema.TeeChart.Drawing.LineCap.Round;
line.Smoothed = true;

// Enable data point markers
line.Pointer.Visible = true;
line.Pointer.Style = PointerStyles.Circle;
line.Pointer.HorizSize = 6;
line.Pointer.VertSize = 6;

// Enable gradient on pointers
line.Pointer.Gradient.Visible = true;
line.Pointer.Brush.Gradient.StartColor = System.Drawing.Color.White;
line.Pointer.Brush.Gradient.EndColor = System.Drawing.Color.FromArgb(220, 53, 69);

// Configure chart interaction
chart.Chart.Panning.Active = false;
chart.Chart.Zoom.Active = true;
chart.Chart.Aspect.View3D = false;
```

--------------------------------

### Create and Configure Area Chart in .NET MAUI

Source: https://context7.com/steema/teechart-net-pro-samples/llms.txt

Demonstrates creating an Area chart in .NET MAUI with TeeChart. It includes filling with sample data, setting the area color, enabling smoothing, hiding area lines, and toggling the 3D view.

```csharp
using Steema.TeeChart.Maui;
using Steema.TeeChart.Styles;
using System.Drawing;

var chart = new TChart();
var area = new Area(chart.Chart);

// Fill with sample data
area.FillSampleValues();

// Configure area color
area.Color = Color.Blue;

// Enable smoothing
area.Smoothed = true;
area.AreaLines.Visible = false;

// Toggle 3D view
chart.Chart.Aspect.View3D = false;
```

--------------------------------

### Create Candle (Financial) Chart in .NET

Source: https://context7.com/steema/teechart-net-pro-samples/llms.txt

Shows how to create a Candle (candlestick) chart for financial data visualization using TeeChart. It includes filling with sample financial data, configuring the date-time X-axis, and adding a CursorTool for interactive inspection.

```csharp
using Steema.TeeChart;
using Steema.TeeChart.Styles;

var chart = new TChart();
var candle = new Candle(chart.Chart);

// Fill with sample financial data
candle.FillSampleValues();

// Configure date-time X-axis
candle.XValues.DateTime = true;
chart.Axes.Bottom.Labels.DateTimeFormat = "shortDate";

// Add CursorTool for interactive inspection
var cursorTool = new Steema.TeeChart.Tools.CursorTool(chart.Chart);
cursorTool.Style = CursorToolStyles.Both;
chart.Tools.Add(cursorTool);
```

--------------------------------

### Create Gantt Chart Visualization

Source: https://context7.com/steema/teechart-net-pro-samples/llms.txt

Generates a Gantt chart for project timeline and scheduling visualizations. It includes sample data, task dependency configuration, and gradient settings. Dependencies: Steema.TeeChart, Steema.TeeChart.Styles.

```csharp
using Steema.TeeChart;
using Steema.TeeChart.Styles;

var chart = new TChart();
var gantt = new Gantt(chart.Chart);

// Fill with sample task data
gantt.FillSampleValues(9);

// Configure task dependencies
gantt.NextTasks[0] = 6;

// Configure gradient
gantt.Brush.Gradient.Visible = false;

// Configure axis labels
chart.Axes.Left.Title.Text = "Task";
```

--------------------------------

### Create and Configure Bar Chart in .NET

Source: https://context7.com/steema/teechart-net-pro-samples/llms.txt

Shows how to create a Bar series in a TChart, including filling with sample data, customizing bar appearance like color, width, and gradient fills, and adding data points with labels. It also demonstrates hiding marks and configuring custom bar widths.

```csharp
using Steema.TeeChart;
using Steema.TeeChart.Styles;
using System.Drawing;

var chart = new TChart();
var bar = new Bar(chart.Chart);

// Fill with sample values
bar.FillSampleValues(10);

// Configure bar appearance
bar.ColorEach = false;
bar.Color = Color.FromArgb(52, 152, 219);
bar.BarWidthPercent = 60;
bar.BarStyle = BarStyles.RectGradient;
bar.Transparency = 20;

// Configure gradient
bar.Gradient.Visible = true;
bar.Gradient.StartColor = Color.LightBlue;
bar.Gradient.EndColor = Color.FromArgb(136, 193, 231);
bar.Gradient.Direction = Steema.TeeChart.Drawing.LinearGradientMode.ForwardDiagonal;

// Add data with labels
bar.Clear();
bar.Add(25.5, "Monday");
bar.Add(32.1, "Tuesday");
bar.Add(18.7, "Wednesday");
bar.Add(45.2, "Thursday");
bar.Add(38.9, "Friday");

// Hide marks
bar.Marks.Visible = false;

// Configure custom bar width
bar.CustomBarWidth = 45;
```

--------------------------------

### Create Pie and Donut Charts in .NET

Source: https://context7.com/steema/teechart-net-pro-samples/llms.txt

Provides code for creating both Pie and Donut charts using TeeChart. It covers filling with sample data, configuring mark visibility and appearance for Pie charts, and setting the donut hole and legend alignment.

```csharp
using Steema.TeeChart;
using Steema.TeeChart.Styles;
using System.Drawing;

var chart = new TChart();

// Pie Chart
var pie = new Pie(chart.Chart);
pie.FillSampleValues();

// Configure marks
pie.Marks.Visible = true;
pie.Marks.Arrow.Visible = false;
pie.Marks.Transparent = true;
pie.Marks.Font.Color = Color.White;

// Donut Chart
var donut = new Donut(chart.Chart);
donut.FillSampleValues();
donut.Circled = true;
donut.Pen.Visible = false;
donut.Marks.Visible = false;

// Configure legend
chart.Chart.Legend.Alignment = Steema.TeeChart.LegendAlignments.Bottom;
```

--------------------------------

### Load Raw Asset using Essentials FileSystem API

Source: https://github.com/steema/teechart-net-pro-samples/blob/main/MAUI/TeeChart.Maui.Demo/Resources/Raw/AboutAssets.txt

This C# code snippet shows how to load a raw asset that has been deployed with your .NET MAUI application. It utilizes the `FileSystem.OpenAppPackageFileAsync` method from the Essentials library to open a stream to the specified asset file. The content of the asset is then read into a string using a `StreamReader`.

```csharp
async Task LoadMauiAsset()
{
	using var stream = await FileSystem.OpenAppPackageFileAsync("AboutAssets.txt");
	using var reader = new StreamReader(stream);

	var contents = reader.ReadToEnd();
}
```

--------------------------------

### Using Open Iconic SVGs

Source: https://github.com/steema/teechart-net-pro-samples/blob/main/MAUI/MauiBlazorApp/wwwroot/css/open-iconic/README.md

Demonstrates how to embed Open Iconic SVG files directly into HTML using the `<img>` tag. Ensure to include an `alt` attribute for accessibility.

```html
<img src="/open-iconic/svg/icon-name.svg" alt="icon name">
```

--------------------------------

### Using Open Iconic SVG Sprite

Source: https://github.com/steema/teechart-net-pro-samples/blob/main/MAUI/MauiBlazorApp/wwwroot/css/open-iconic/README.md

Illustrates how to use Open Iconic's SVG sprite for efficient icon display. It shows how to reference icons using the `<use>` tag and provides CSS for styling and sizing.

```html
<svg class="icon">
  <use xlink:href="open-iconic.svg#account-login" class="icon-account-login"></use>
</svg>
```

```css
.icon {
  width: 16px;
  height: 16px;
}

.icon-account-login {
  fill: #f00;
}
```

--------------------------------

### Open Iconic Font with Foundation

Source: https://github.com/steema/teechart-net-pro-samples/blob/main/MAUI/MauiBlazorApp/wwwroot/css/open-iconic/README.md

Demonstrates the integration of Open Iconic icon fonts with the Foundation framework. It requires linking the Foundation-specific stylesheet and applying the `fi-` class along with the icon name.

```html
<link href="/open-iconic/font/css/open-iconic-foundation.css" rel="stylesheet">
<span class="fi-icon-name" title="icon name" aria-hidden="true"></span>
```

--------------------------------

### Include Raw Assets with MauiAsset in .csproj

Source: https://github.com/steema/teechart-net-pro-samples/blob/main/MAUI/TeeChart.Maui.Demo/Resources/Raw/AboutAssets.txt

This snippet demonstrates how to configure your .csproj file to include raw assets in your .NET MAUI application. The `MauiAsset` build action ensures that files in the specified directory (and its subdirectories) are deployed with the application package. The `LogicalName` attribute controls how the asset is named within the package, allowing for preserved directory structure.

```xml
<MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
```

--------------------------------

### Open Iconic Font with Bootstrap

Source: https://github.com/steema/teechart-net-pro-samples/blob/main/MAUI/MauiBlazorApp/wwwroot/css/open-iconic/README.md

Shows how to integrate Open Iconic icon fonts with the Bootstrap framework. This involves linking the Bootstrap-specific stylesheet and using the `oi` class with the icon name.

```html
<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>
```

--------------------------------

### WeatherAPI Key Configuration in C#

Source: https://github.com/steema/teechart-net-pro-samples/blob/main/WinForms/NET 8/WeatherForecast/README.md

This snippet shows how to define the private constant API_KEY in the WeatherController.cs file. This key is essential for authenticating requests to the WeatherAPI.com service to retrieve weather data. Users can replace the placeholder key with their own obtained from WeatherAPI.

```csharp
private const string API_KEY = "f55e1b187df24acd8d4104955251107";
```

--------------------------------

### Configure Chart Axes

Source: https://context7.com/steema/teechart-net-pro-samples/llms.txt

Configures chart axes for proper data display and formatting, including grid visibility, label styling, and date-time formats. Supports both Bottom (X) and Left (Y) axes, and dual-axis configurations. Dependencies: Steema.TeeChart, Steema.TeeChart.Styles, System.Drawing.

```csharp
using Steema.TeeChart;
using Steema.TeeChart.Styles;
using System.Drawing;

var chart = new TChart();

// Configure Bottom (X) Axis
chart.Axes.Bottom.Grid.Visible = false;
chart.Axes.Bottom.Labels.Font.Size = 9;
chart.Axes.Bottom.Labels.Font.Bold = true;
chart.Axes.Bottom.Labels.Font.Color = Color.FromArgb(80, 102, 120);
chart.Axes.Bottom.Labels.Angle = 45;
chart.Axes.Bottom.Labels.Separation = 90;

// DateTime axis configuration
chart.Axes.Bottom.Labels.Style = AxisLabelStyle.Value;
chart.Axes.Bottom.Labels.ValueFormat = "HH:mm";
chart.Axes.Bottom.Labels.DateTimeFormat = "HH:mm";
chart.Axes.Bottom.Labels.ExactDateTime = true;
chart.Axes.Bottom.Increment = 1.0 / 24.0;  // 1 hour increment

// Configure Left (Y) Axis
chart.Axes.Left.SetMinMax(0, 100);
chart.Axes.Left.Increment = 10;
chart.Axes.Left.Automatic = false;
chart.Axes.Left.Title.Text = "Temperature (°C)";
chart.Axes.Left.Title.Font.Size = 10;
chart.Axes.Left.Title.Font.Bold = true;
chart.Axes.Left.Grid.Color = Color.FromArgb(230, 230, 230);

// Configure Right Axis (for dual-axis charts)
chart.Axes.Right.SetMinMax(0, 100);
chart.Axes.Right.Increment = 25;
chart.Axes.Right.Automatic = false;
chart.Axes.Right.Title.Text = "Humidity (%)";

// Auto-scaling based on data
chart.Axes.Bottom.Automatic = true;
```

--------------------------------

### Style Chart Panel and Header

Source: https://context7.com/steema/teechart-net-pro-samples/llms.txt

Customizes chart appearance including panel gradients, borders, headers, sub-headers, and legends. This snippet demonstrates setting colors, fonts, alignment, and visibility for various chart elements. Dependencies: Steema.TeeChart, System.Drawing.

```csharp
using Steema.TeeChart;
using System.Drawing;

var chart = new TChart();

// Panel gradient background
chart.Panel.Gradient.Visible = true;
chart.Panel.Gradient.StartColor = Color.White;
chart.Panel.Gradient.EndColor = Color.FromArgb(245, 245, 245);
chart.Panel.Gradient.Direction = Steema.TeeChart.Drawing.LinearGradientMode.Vertical;

// Panel border styling
chart.Panel.Bevel.Inner = BevelStyles.None;
chart.Panel.Bevel.Outer = BevelStyles.None;
chart.Panel.BorderRound = 10;
chart.Panel.MarginBottom = 50;

// Header configuration
chart.Header.Text = "Weather Forecast";
chart.Header.Font.Size = 14;
chart.Header.Font.Bold = true;
chart.Header.Font.Color = Color.FromArgb(80, 102, 120);
chart.Header.Font.Name = "Segoe UI";
chart.Header.Alignment = Steema.TeeChart.Drawing.StringAlignment.Right;
chart.Header.Transparent = true;
chart.Header.Visible = true;

// Sub-header
chart.SubHeader.Text = "Temperature / Humidity";
chart.SubHeader.Font.Size = 10;
chart.SubHeader.Font.Color = Color.FromArgb(100, 100, 100);

// Legend configuration
chart.Legend.Alignment = LegendAlignments.Bottom;
chart.Legend.Font.Size = 10;
chart.Legend.Font.Bold = true;
chart.Legend.Visible = true;
```

--------------------------------

### Format C# Code for HTML Display

Source: https://github.com/steema/teechart-net-pro-samples/blob/main/Blazor/NET 8/TeeChartOnBlazor/Resources/genericStr.txt

Retrieves and formats C# code from a resource file ('genericStr.txt') into an HTML string for display. It utilizes an HtmlFormatter class to handle the conversion.

```csharp
public string getFormattedCode()
    {
        var chartCode = "<h3>C# Code - multiple Chart Series types</h3>";
        string strContents = TeeChartOnBlazor.Utils.getResource("genericStr.txt")

        var formatter = new HtmlFormatter();
        chartCode += formatter.GetHtmlString(strContents, Languages.CSharp);


        return chartCode;
    }
```

--------------------------------

### Annotation Tool for Adding Text Labels to Charts in C#

Source: https://context7.com/steema/teechart-net-pro-samples/llms.txt

Demonstrates how to add text annotations and labels to TeeChart charts using the Annotation tool. This requires Steema.TeeChart and System.Drawing namespaces. Annotations can be positioned using pixel coordinates or by mapping them to axis values. Appearance can be customized, including font, shape transparency, and shadow effects.

```csharp
using Steema.TeeChart;
using Steema.TeeChart.Tools;
using System.Drawing;

var chart = new TChart();

// Create annotation
var annotation = new Annotation(chart.Chart);
annotation.Text = "Important Data Point";

// Position annotation
annotation.Left = 100;
annotation.Top = 50;

// Configure appearance
annotation.Shape.Transparent = true;
annotation.Shape.Font.Size = 9;
annotation.Shape.Font.Bold = false;
annotation.Shape.Font.Name = "Segoe UI";
annotation.Shape.Shadow.Visible = true;
annotation.Shape.Shadow.Transparency = 70;

// Add to chart tools
chart.Tools.Add(annotation);

// Position based on axis values
int pixelX = chart.Axes.Bottom.CalcXPosValue(dataXValue);
int pixelY = chart.Axes.Left.CalcPosValue(dataYValue);
annotation.Left = pixelX;
annotation.Top = pixelY;
```

--------------------------------

### Create World Map Chart

Source: https://context7.com/steema/teechart-net-pro-samples/llms.txt

Displays geographical data on world maps. This snippet sets the map type, fills with sample data, and configures appearance and axes. Dependencies: Steema.TeeChart.Maui, Steema.TeeChart.Styles.

```csharp
using Steema.TeeChart.Maui;
using Steema.TeeChart.Styles;

var chart = new TChart();
var map = new World(chart.Chart);

// Set map type
map.Map = WorldMapType.World;
map.FillSampleValues();

// Configure appearance
map.Pen.Visible = false;

// Configure axes
chart.Chart.Panning.Active = false;
chart.Chart.Zoom.Active = true;
chart.Chart.Axes.Bottom.Visible = false;
chart.Chart.Axes.Left.Increment = 50;
```

--------------------------------

### Generate JavaScript for Chart Initialization

Source: https://github.com/steema/teechart-net-pro-samples/blob/main/Blazor/NET 8/TeeChartOnBlazor/Resources/genericStr.txt

Generates a JavaScript string to initialize a chart, including chart name and custom script content. This is typically used for embedding charts in web applications.

```csharp
string result = "<script> var " + chartName + "; " + reader.ReadToEnd() + "</script>";

        return Task.FromResult(result);
```

--------------------------------

### Configure Series Animation for TeeChart

Source: https://github.com/steema/teechart-net-pro-samples/blob/main/Blazor/NET 8/TeeChartOnBlazor/Resources/genericStr.txt

Provides C# code to generate JavaScript for animating chart series. It handles different animation types based on the chart series (e.g., Area, Pie Donut) and chart type (e.g., Candle).

```csharp
string[] getCustomCode1(bool animate, TChart aChart)
    {
        var customCode = new List<string>();

        if (animate)
        {
            if (aChart[0].GetType() == typeof(Area))
            {
                customCode.Add("   //animation");
                customCode.Add("   animation = new Tee.SeriesAnimation();");
                customCode.Add("   animation.duration = 1700;");
                customCode.Add("   animation.kind = \"all\";");
                customCode.Add("   animation.mode = \"linear\";");
            }
            else
            {
                customCode.Add("   //animation");
                customCode.Add("   animation = new Tee.SeriesAnimation();");
                customCode.Add("   animation.duration = 900;");
                customCode.Add("   animation.kind = \"each\";");
                customCode.Add("   fadeAnimation = new Tee.FadeAnimation();");
                customCode.Add("   fadeAnimation.duration = 500;");
                customCode.Add("   fadeAnimation.fade.series = true;");
                customCode.Add("   fadeAnimation.fade.marks = true;");
                customCode.Add("   animation.mode = \"linear\"; ");
                customCode.Add("   fadeAnimation.mode = \"linear\";");
                customCode.Add("   animation.items.push(fadeAnimation);");
                customCode.Add("   ");
            }

            customCode.Add("   animation.animate(" + aChart.Export.Image.JScript.ChartName + ");");
        }

        if (aChart[0].GetType() == typeof(Candle))
        {
            customCode.Add(aChart.Export.Image.JScript.ChartName + ".axes.bottom.datetime = true;");
            customCode.Add(aChart.Export.Image.JScript.ChartName + ".axes.bottom.labels.dateFormat = \"shortDate\";");
            customCode.Add(aChart.Export.Image.JScript.ChartName + ".series.items[0].dateFormat = \"shortDate\";");

            //cursortool
            customCode.Add("var t = new Tee.CursorTool(" + aChart.Export.Image.JScript.ChartName + ");");
            customCode.Add("t.direction = \"both\";");
            customCode.Add(aChart.Export.Image.JScript.ChartName + ".tools.add(t);");
        }

        customCode.Add(aChart.Export.Image.JScript.ChartName + ".axes.bottom.labels.format.font.fill = \"rgba(0,0,0,0.6)\";");
        customCode.Add(aChart.Export.Image.JScript.ChartName + ".axes.bottom.labels.format.font.setSize(\"10px\");");
        customCode.Add(aChart.Export.Image.JScript.ChartName + ".series.items[0].marks.transparent = true;");

        //customCode.Add("hostChart = " + aChart.Export.Image.JScript.ChartName + ";");

        customCode.Add("chartFeatures(" + chartName + ");"); //call general setup enhancements
        customCode.Add("resizeC(" + chartName + ");");

        return customCode.ToArray();
    }
```

--------------------------------

### Open Iconic Font Standalone Usage

Source: https://github.com/steema/teechart-net-pro-samples/blob/main/MAUI/MauiBlazorApp/wwwroot/css/open-iconic/README.md

Provides instructions for using Open Iconic icon fonts independently. This involves linking the default stylesheet and using the `oi` class with the `data-glyph` attribute to specify the icon.

```html
<link href="/open-iconic/font/css/open-iconic.css" rel="stylesheet">
<span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>
```

--------------------------------

### Generate JavaScript Chart from .NET (C#)

Source: https://github.com/steema/teechart-net-pro-samples/blob/main/Blazor/NET 8/TeeChartOnBlazor/Resources/genericStr.txt

This C# function dynamically creates a TeeChart instance based on a specified chart type. It configures series, axes, and applies custom JavaScript code for rendering. Dependencies include Steema.TeeChart and System.IO. It returns a JavaScript string representing the chart.

```csharp
@using Steema.TeeChart;
@using Steema.TeeChart.Styles;
@using System.IO;
@using System.Drawing;
@using ColorCode; 
@using TeeChartOnBlazor.Data;  //the project data

@code {

    public string chartName;
    public string title;

    public Task<string> GetJSChart(int chartType, int width, int height)
    {
        Steema.TeeChart.TChart mChart = new TChart();

        bool animate = false;

        switch (chartType) {
            case 0: Line line = new Line(mChart.Chart); 
                animate=true;
                break;
            case 1: Points points = new Points(mChart.Chart); 
                animate=true;
                break;
            case 2: Area area1 = new Area(mChart.Chart);
                Area area2 = new Area(mChart.Chart);
                //countSeries = 2;
                animate = true;
                break;
            case 3: break;
            case 5: Bubble bubble = new Bubble(mChart.Chart); animate = true; break;
            case 6: Candle candle = new Candle(mChart.Chart); break;
            case 7: Gantt gantt = new Gantt(mChart.Chart);
                break;
            case 31: Pie pie = new Pie(mChart.Chart); break;
            case 32: Donut donut = new Donut(mChart.Chart); break;
            case 33:
            case 34: CircularGauge cGauge = new CircularGauge(mChart.Chart); break;
        }

        var series = mChart.Series[0];

        mChart.Header.Text = ""; // series.Description + " series";

        mChart.Axes.Left.Title.Text = "value";

        foreach (Series s in mChart.Series)
        {
            if (series.GetType() == typeof(Bubble))
            {
                ((Bubble)(s)).Pointer.Gradient.Visible = true;
                ((Bubble)(s)).Pointer.Pen.Visible = false;
                s.FillSampleValues(50);
            }
            else if ((series.GetType() == typeof(Gantt)))
                s.FillSampleValues(9);
            else
                s.FillSampleValues();
        }

        if (mChart.Series.Count > 1)
        {
            if (mChart[0].MaxYValue() > mChart[1].MaxYValue())
                mChart.Axes.Left.SetMinMax(0, mChart[0].MaxYValue()+20);
            else
                mChart.Axes.Left.SetMinMax(0, mChart[1].MaxYValue()+20);
        }

        series.XValues.DateTime = true;
        //mChart.Axes.Bottom.Labels.Angle = 90;
        //mChart.Axes.Bottom.Increment = Steema.TeeChart.Utils.GetDateTimeStep(DateTimeSteps.OneDay);
        //mChart.Axes.Left.Title.Text = "µVal";

        if ((mChart.Series.Count == 1) && (series.GetType() != typeof(Gantt)))
            mChart.Axes.Left.SetMinMax(series.YValues.Minimum - 10, series.YValues.Maximum + 10);

        chartName = "dynoTeeChart";
        mChart.Export.Image.JScript.ChartName = chartName;

        MemoryStream ms = new MemoryStream();
        mChart.Export.Image.JScript.Width = width;
        mChart.Export.Image.JScript.Height = height;
        mChart.Export.Image.JScript.DoFullPage = false; //inline, no page <html> header tags

        if ((series.GetType() == typeof(Pie)) ||
                (series.GetType() == typeof(Donut)))
        {
            series.Marks.Visible = true;
            series.Marks.Arrow.Visible = false;
            series.Marks.Arrow.Color = Color.White;
            series.Marks.Transparent = true;
            series.Marks.Pen.Transparency = 100;
            series.Marks.Pen.Color = Color.White;
            series.Marks.Font.Color = Color.White;

            mChart.Export.Image.JScript.CustomCode = getCustomCodeOp2(mChart);
        }
        else
            mChart.Export.Image.JScript.CustomCode = getCustomCode1(animate, mChart);

        if ((series.GetType() == typeof(Gantt)))
        {
            ((Gantt)series).Brush.Gradient.Visible = false;
            ((Gantt)series).NextTasks[0] = 6;
            mChart.Axes.Left.Title.Text = "task";
        }

        if ((series.GetType() == typeof(CircularGauge)))
        {
            mChart.Axes.Left.Title.Text = "µHz";

            var customCode = new List<string>();

            if (chartType == 34)
            {
                customCode.Add("modGauge(" + chartName + ", " + chartName + ".series.items[0]" + ");");
                customCode.Add("setTimeout(modVal, 500);");
            }
            else
            {
                ((CircularGauge)(mChart[0])).Value = 0;
                customCode.Add(chartName + ".series.items[0]" + ".format.shadow.visible=false;");
                customCode.Add(chartName + ".series.items[0]" + ".back.visible=false;");
                customCode.Add("growVal(" + chartName + ");");
                customCode.Add("setTimeout(growVal, 500);");
            }

            mChart.Export.Image.JScript.CustomCode = customCode.ToArray();

        }

        title = mChart.Series[0].Description;

        mChart.Export.Image.JScript.Save(ms);

        ms.Position = 0;

        StreamReader reader = new StreamReader(ms);
        //setup our chart name, here 'dynoChartName'.
        return Task.FromResult(reader.ReadToEnd());
    }

    private string[] getCustomCode1(bool animate, Steema.TeeChart.TChart mChart)
    {
        var customCode = new List<string>();
        if (animate)
            customCode.Add("animate();");
        return customCode.ToArray();
    }

    private string[] getCustomCodeOp2(Steema.TeeChart.TChart mChart)
    {
        var customCode = new List<string>();
        customCode.Add("setTimeout(animate, 500);");
        return customCode.ToArray();
    }
}
```

--------------------------------

### Generate JavaScript Chart from .NET Data

Source: https://github.com/steema/teechart-net-pro-samples/blob/main/Blazor/NET 8/TeeChartOnBlazor/Resources/shipStr.txt

This snippet demonstrates how to create a TChart object in .NET, populate it with time-series data for two series (Apples and Pears), configure JavaScript export settings, and save the chart as a JavaScript string. It sets chart dimensions, disables full page export, and includes custom JavaScript code for client-side initialization. The output is a string containing JavaScript code to render the chart.

```csharp
using System;
using System.IO;
using System.Threading.Tasks;
using System.Collections.Generic;
using Steema.TeeChart;
using Steema.TeeChart.Styles;

// Assuming this is part of a Blazor component or similar
public class ChartGenerator
{
    public string chartJS;
    public string supportUnit;
    public string chartName;

    [Parameter]
    public string CType { get; set; }

    protected async Task OnInitializedAsync()
    {
        int chartType = Convert.ToInt32(CType);

        Steema.TeeChart.TChart tChart = new TChart();

        Points points1 = new Points(tChart.Chart);
        Points points2 = new Points(tChart.Chart);

        //setup some datetime data
        double[] dates = new double[] { new DateTime(2019, 9, 1).ToOADate(),new DateTime(2019, 9, 15).ToOADate(), new DateTime(2019, 10, 1).ToOADate()
                        , new DateTime(2019, 10, 15).ToOADate(), new DateTime(2019, 11, 1).ToOADate()
                        , new DateTime(2019, 11, 15).ToOADate(), new DateTime(2019, 12, 1).ToOADate()
                        , new DateTime(2019, 12, 15).ToOADate(), new DateTime(2020, 1, 1).ToOADate()
                        , new DateTime(2020, 1, 15).ToOADate(), new DateTime(2020, 2, 1).ToOADate()
                        , new DateTime(2020, 2, 15).ToOADate(), new DateTime(2020, 3, 1).ToOADate(), new DateTime(2020, 3, 15).ToOADate()
                        , new DateTime(2020, 4, 1).ToOADate(), new DateTime(2020, 4, 15).ToOADate(), new DateTime(2020, 5, 1).ToOADate()
                        , new DateTime(2020, 5, 15).ToOADate(), new DateTime(2020, 6, 1).ToOADate()
                        , new DateTime(2020, 6, 15).ToOADate(), new DateTime(2020, 7, 1).ToOADate()
                        , new DateTime(2020, 7, 15).ToOADate(), new DateTime(2020, 8, 1).ToOADate(), new DateTime(2020, 8, 15).ToOADate()
                        , new DateTime(2020, 9, 1).ToOADate(), new DateTime(2020, 9, 15).ToOADate(), new DateTime(2020, 10, 1).ToOADate()
                        , new DateTime(2020, 10, 15).ToOADate() };

        for (int i = 0; i < dates.Length; i++)
            dates[i] = MilliTimeStamp(DateTime.FromOADate(dates[i]));

        points1.Title = "Apples";
        points1.Add(dates, new double[] { 5, 3, 2, 7, 1, 6, 4, 5, 1, 0, 10, 7, 11, 15, 12, 21, 17, 15, 19, 24, 21, 11, 15, 21, 19, 17, 20, 23 });
        points2.Title = "Pears";
        points2.Add(dates, new double[] { 7, 1, 5, 1, 0, 10, 6, 3, 2, 7, 11, 4, 5, 3, 4, 5, 1, 5, 11, 15, 16, 14, 14, 13, 12, 15, 17, 19 });

        chartName = "shipments";
        tChart.Export.Image.JScript.ChartName = chartName;

        var customCode = new List<string>();
        customCode.Add("setupClientChart(" + chartName + ");");
        tChart.Export.Image.JScript.CustomCode = customCode.ToArray();

        MemoryStream ms = new MemoryStream();
        tChart.Export.Image.JScript.Width = 1400; //start dims
        tChart.Export.Image.JScript.Height = 300;
        tChart.Export.Image.JScript.DoFullPage = false; //inline, no page <html> header tags

        tChart.Export.Image.JScript.Save(ms);

        supportUnit = "<script src=\"js/shipments.js\" type=\"text/javascript\"></script>";

        ms.Position = 0;

        StreamReader reader = new StreamReader(ms);
        //setup our chart name, here 'dynoChartName'.
        string result = "<script> var " + chartName + "; " + reader.ReadToEnd() + "</script>";

        chartJS = await Task.FromResult(result);
    }

    // Placeholder for MilliTimeStamp function, assuming it exists elsewhere
    private double MilliTimeStamp(DateTime dateTime) {
        // Implementation would go here, e.g., return dateTime.Ticks / TimeSpan.TicksPerMillisecond;
        return dateTime.Ticks;
    }
}

```

--------------------------------

### Configure Pie Donut Chart Formatting

Source: https://github.com/steema/teechart-net-pro-samples/blob/main/Blazor/NET 8/TeeChartOnBlazor/Resources/genericStr.txt

Generates JavaScript code for specific formatting of Pie Donut charts, such as setting stroke fill to white and angle width to 0. It also includes a call to an 'animatedPie' function.

```csharp
string[] getCustomCodeOp2(TChart aChart)
    {
        var customCode = new List<string>();

        //customCode.Add(chartName + ".series.items[0].marks.visible = false; ");
        customCode.Add(chartName + ".series.items[0].format.stroke.fill = \"white\"; ");
        customCode.Add(chartName + ".series.items[0].angleWidth = 0;");
        customCode.Add("animatedPie(" + chartName + ");");
        //customCode.Add("resizeC(" + chartName + ");");

        return customCode.ToArray();
    }
```

--------------------------------

### WPF XAML Declaration for TeeChart Integration

Source: https://context7.com/steema/teechart-net-pro-samples/llms.txt

Shows how to declare a TeeChart component within a WPF application's XAML markup. It includes the necessary namespace declaration for Steema.TeeChart.WPF and demonstrates how to assign event handlers for chart drawing and scrolling. The TChart control is named 'ChartTemp' and is configured to stretch within its parent grid.

```xml
<Window x:Class="MyApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:teechart="clr-namespace:Steema.TeeChart.WPF;assembly=TeeChart.WPF"
        Title="Weather Forecast" Height="600" Width="800">

    <Grid>
        <teechart:TChart Name="ChartTemp"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
                         AfterDraw="ChartTemp_AfterDraw"
                         BeforeDrawSeries="ChartTemp_BeforeDrawSeries"
                         Scroll="ChartTemp_Scroll"
                         Margin="15"/>
    </Grid>
</Window>
```

--------------------------------

### Create Circular Gauge Indicator

Source: https://context7.com/steema/teechart-net-pro-samples/llms.txt

Creates dashboard-style circular gauge indicators. This snippet sets the gauge value and range, and configures the chart for optimal gauge display. Dependencies: Steema.TeeChart.Maui, Steema.TeeChart.Styles.

```csharp
using Steema.TeeChart.Maui;
using Steema.TeeChart.Styles;

var chart = new TChart();
var gauge = new CircularGauge(chart.Chart);

// Set gauge value and range
gauge.FillSampleValues(10);
gauge.Value = 35;

// Configure chart for gauge display
chart.Chart.Panning.Active = false;
chart.Chart.Zoom.Active = true;
chart.Chart.Header.Visible = false;
```