TeeChart for .NET Pro

https://github.com/steema/teechart-net-pro-samples
Admin
TeeChart for .NET Pro is a comprehensive charting library offering professional high-performance...
Tokens:8,836
Snippets:52
Trust Score:7.7
Update:1 month ago
Show doc for...
Tokens:
Raw
### Configure and Load Appointments Chart

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

Sets up chart parameters including titles, labels, and data arrays before calling the loadAppointmentsChart method. Requires the inclusion of the appointment.js script in the supportUnit variable.

```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>";

        }
```

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

### Initialize TeeChart Client Configuration

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

Configures a TeeChart instance with custom series, tooltips, cursor tools, and animations. Requires the TeeChart JavaScript library to be loaded.

```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);
}
```

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

### Access Raw Assets with FileSystem

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

Use the OpenAppPackageFileAsync method to retrieve a stream for a file bundled as a raw asset.

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

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

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

### Configure TeeChart for Appointment Visualization

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

Initializes chart settings, axes, and tooltips for an appointment-style chart.

```javascript
var a2, tip;
var hasAnimated = false;

function drawAppointments(aChart, labelLines) {

    aChart.zoom.enabled = false;
    aChart.scroll.enabled = false;

    aChart.title.visible = false;
    //aChart.applyTheme("minimal");
    aChart.applyPalette("windowsxp");

    aChart.axes.left.title.text = "Number";
    aChart.axes.left.title.format.font.style = "17px Tahoma";
    aChart.axes.left.title.format.font.fill = "rgb(0,0,0)";
    aChart.axes.left.format.stroke.fill = "rgba(0,255,0,0)";
    aChart.axes.left.ticks.visible = false;
    //aChart.axes.left.increment = 1000;
    aChart.axes.left.labels.fixedDecimals = true;
    aChart.axes.left.labels.decimals = 0;
    aChart.axes.left.labels.labelStyle = "value";
    aChart.axes.left.labels.valueFormat = true;

    aChart.axes.bottom.increment = 1;
    aChart.axes.bottom.labels.separation = 1;
    aChart.axes.bottom.labels.format.font.fill = "rgb(30,30,30)";
    aChart.axes.left.labels.format.font.fill = aChart.axes.bottom.labels.format.font.fill;
    aChart.legend.format.font.fill = aChart.axes.bottom.labels.format.font.fill;

    aChart.axes.bottom.grid.centered = true;
    aChart.axes.bottom.ticks.visible = false;

    aChart.axes.bottom.setMinMax(-0.5, aChart.series.items[0].data.values.length - 0.5);

    aChart.title.format.font.style = "18px Tahoma";
    aChart.title.format.font.fill = "rgb(0,0,0)";
    aChart.title.format.font.textAlign = "left";
    aChart.title.format.font.gradient.visible = false;

    aChart.walls.left.size = 10;
    aChart.walls.bottom.size = 10;

    aChart.legend.visible = false;
    aChart.legend.format.stroke.fill = "white";
    aChart.legend.transparent = false;

    aChart.panel.margins.bottom = 30;
    aChart.panel.margins.left = 15;

    //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;
    }

    //aChart.axes.bottom.grid.visible=true;
    //animation
    animation = new Tee.SeriesAnimation();
    animation.duration = 900;
    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);

    animation.onstop = function (a) {
        hasAnimated = true;
    }

    //draw event. Add any custom draw content here.
    aChart.ondraw = function () {

        var inc = 20;  //line height

        var x1 = aChart.axes.bottom.calc(aChart.axes.bottom.minimum),
            y1 = aChart.axes.left.calc(0),
            width = aChart.axes.bottom.calc(aChart.axes.bottom.maximum);
        height = 0;

        yStart = y1;

        // X,Y, Width, Height
        var myFormat = new Tee.Format(aChart);

        myFormat.stroke.size = 0.5;

        aChart.axes.bottom.calcAxisScale();
        var xInc = (aChart.axes.bottom.maximum - aChart.axes.bottom.minimum) / aChart.series.items[0].data.values.length;   //aChart.axes.bottom.increm;
        if (xInc < 0.5) xInc = 0.5;
        var xPos = aChart.axes.bottom.minimum;

        for (i = 0; i < aChart.series.items.length; i++) {
            y1 = y1 + inc;
            if (i == 0) y1 = y1 + (labelLines * inc);
            myFormat.rectangle(0, y1, width, height);
            myFormat.font.style = aChart.axes.bottom.labels.format.font.style;
            myFormat.font.fill = aChart.axes.bottom.labels.format.font.fill;
            aChart.ctx.font = myFormat.font.style;
```

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

### Access Raw Assets with FileSystem

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

Use the OpenAppPackageFileAsync method to retrieve a stream for a file bundled as a MauiAsset.

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

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

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

### Configure MauiAsset Build Action

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

Add this item group to your .csproj file to ensure files in the Resources/Raw directory are deployed with the application.

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

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

### Format Code for Display

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

Retrieves resource content and formats it as HTML for display in the UI.

```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;
    }
```

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

### Read MAUI Asset Stream

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

Use FileSystem.OpenAppPackageFileAsync to access the stream of a deployed asset file.

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

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

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

### Using Icon Fonts standalone

Source: https://github.com/steema/teechart-net-pro-samples/blob/main/Blazor/NET 8/TeeChartOnBlazor/wwwroot/css/open-iconic/README.md

Include the default stylesheet and use data-glyph attributes to render icons.

```html
<link href="/open-iconic/font/css/open-iconic.css" rel="stylesheet">
```

```html
<span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>
```

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

### Generate Dynamic TeeChart for Blazor

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

This method initializes a TChart instance, configures series based on the provided type, populates data, and prepares the JavaScript export configuration.

```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;
```

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

### Using Icon Fonts with Foundation

Source: https://github.com/steema/teechart-net-pro-samples/blob/main/Blazor/NET 8/TeeChartOnBlazor/wwwroot/css/open-iconic/README.md

Include the Foundation stylesheet and use span elements to render icons.

```html
<link href="/open-iconic/font/css/open-iconic-foundation.css" rel="stylesheet">
```

```html
<span class="fi-icon-name" title="icon name" aria-hidden="true"></span>
```

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

### Generate Appointments Chart

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

Configures a TeeChart bar chart with provided data and exports it as a JavaScript string for client-side rendering.

```csharp
    public string chartName;
    public string title;

    public Task<string> loadAppointmentsChart(string aTitle, string[] sNames, double?[,] aVals,
                                    MultiBars aStack, string[] aLabels, int labelLines,
                                                      int incr)
    {
        {
            //Annual Proposals Received (Total)
            Steema.TeeChart.TChart chartAppointm = new Steema.TeeChart.TChart();

            //chartAppointm.Header.Text = aTitle;

            chartName = "chartApp";
            //chartAppointm.Export.Image.JScript.ChartName = chartName;

            List<string> customCode = new List<string>();

            chartAppointm.Chart.Panning.Allow = Steema.TeeChart.ScrollModes.None;

            //for (int i = aVals.GetLength(0) - 1; i >= 0; i--)  //go backwards for default array order
            for (int i = 0; i < aVals.GetLength(0); i++)
            {
                chartAppointm.Series.Add(new Steema.TeeChart.Styles.Bar());
                for (int j = 0; j < aVals.GetLength(1); j++)
                    if (aVals[i, j] != null)
                        chartAppointm.Series[i].Add(aVals[i, j]);
                    else
                        chartAppointm.Series[i].Add(Double.NaN);
                chartAppointm.Series[i].Title = sNames[i];
                chartAppointm.Series[i].Marks.Visible = false;
                ((Bar)chartAppointm.Series[i]).Pen.Visible = false;
                ((Bar)chartAppointm.Series[i]).MultiBar = aStack;
            }

            for (int i = 0; i < aLabels.Length; i++)
                for (int j = 0; j < chartAppointm.Series.Count; j++)
                    chartAppointm.Series[j].Labels.Add(aLabels[i]);

            title = chartAppointm.Series[0].Description;

            chartAppointm.Axes.Left.Increment = incr;
            chartAppointm.Axes.Bottom.Labels.Separation = 0;
            chartAppointm.Legend.Visible = false;

            chartAppointm.Export.Image.JScript.DoFullPage = false;

            chartAppointm.Export.Image.JScript.ChartName = chartName;
            chartAppointm.Export.Image.JScript.CanvasName = "canvas1";

            customCode.Add("   drawAppointments(" + chartAppointm.Export.Image.JScript.ChartName + ", " + labelLines + ");");


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

            System.IO.MemoryStream resultStream = new System.IO.MemoryStream();
            chartAppointm.Export.Image.JScript.Width = 590;
            chartAppointm.Export.Image.JScript.Height = 370;
            chartAppointm.Export.Image.JScript.Save(resultStream);

            resultStream.Position = 0;

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

            return Task.FromResult(result);

        }
    }
```

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

### Displaying an SVG icon

Source: https://github.com/steema/teechart-net-pro-samples/blob/main/Blazor/NET 8/TeeChartOnBlazor/wwwroot/css/open-iconic/README.md

Use standard image tags to display individual SVG icon files.

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

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

### Initialize and Export TeeChart to JavaScript

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

Configures a TChart instance with Points series and exports the result to a JavaScript string for embedding in a Blazor page.

```csharp
    String chartJS;
    String chartCode;
    String chartResize;
    String supportUnit;
    string chartName;

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

    protected override 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);
    }
```

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

### Generate JavaScript Chart Script

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

Wraps a stream-read JavaScript file content into a script tag with a dynamic chart name.

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

        return Task.FromResult(result);
    }
```

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

### Using Icon Fonts with Bootstrap

Source: https://github.com/steema/teechart-net-pro-samples/blob/main/Blazor/NET 8/TeeChartOnBlazor/wwwroot/css/open-iconic/README.md

Include the Bootstrap stylesheet and use span elements to render icons.

```html
<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
```

```html
<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>
```

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

### Using SVG Sprites

Source: https://github.com/steema/teechart-net-pro-samples/blob/main/Blazor/NET 8/TeeChartOnBlazor/wwwroot/css/open-iconic/README.md

Display icons using an SVG sprite for better performance. Add classes to the svg and use tags for styling.

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

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

### Custom Chart Rendering Logic

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

Handles manual drawing of series data, labels, and grid lines on the chart canvas.

```javascript
if (i < aChart.series.items.length) {
                rr = new Tee.Rectangle(60, y1 + 4, 60, 20);
                myFormat.fill = aChart.series.items[aChart.series.items.length - 1 - i].format.fill; //  "rgb(255,0,0)";
                myFormat.rectangle(5, y1 + 3, 14, 14);
                myFormat.font.textAlign = "center";
                myFormat.drawText(rr, aChart.series.items[aChart.series.items.length - 1 - i].title);

                x1 = aChart.axes.bottom.calc(aChart.axes.bottom.minimum);
                xPos = aChart.axes.bottom.minimum;

                var incSize = aChart.axes.bottom.calc(aChart.axes.bottom.minimum + xInc) - x1;

                //myFormat.font.textAlign = "left";

                if (hasAnimated) {
                    for (j = 0; j < aChart.series.items[i].data.values.length; j++) {
                        rr = new Tee.Rectangle(x1, y1 + 4, incSize, 20);
                        if (!Number.isNaN(aChart.series.items[aChart.series.items.length - 1 - i].data.values[j]))
                            myFormat.drawText(rr, "" + aChart.series.items[aChart.series.items.length - 1 - i].data.values[j]);

                        xPos = xPos + xInc;
                        x1 = aChart.axes.bottom.calc(xPos);
                    }
                }

            }
        }

        y1 = y1 + inc;
        myFormat.rectangle(0, y1, width, height);

        x1 = aChart.axes.bottom.calc(aChart.axes.bottom.minimum);
        xPos = aChart.axes.bottom.minimum;

        //left start line
        myFormat.rectangle(0, aChart.axes.left.calc(0) + inc + (labelLines * inc), 0, y1 - yStart - inc - (labelLines * inc));

        while (x1 < aChart.axes.bottom.calc(aChart.axes.bottom.maximum)) {

            myFormat.rectangle(x1, aChart.axes.left.calc(0), 0, y1 - yStart);

            xPos = xPos + xInc;
            x1 = aChart.axes.bottom.calc(xPos);
        }

        //final close line
        myFormat.rectangle(aChart.axes.bottom.calc(aChart.axes.bottom.maximum), aChart.axes.left.calc(0), 0, y1 - yStart);

    }

    //aChart.draw();
}
```

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

### Generate Custom Chart Code

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

Constructs an array of JavaScript strings for chart animations and tool configurations based on series type.

```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();
    }
```

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

### Styling SVG Sprites

Source: https://github.com/steema/teechart-net-pro-samples/blob/main/Blazor/NET 8/TeeChartOnBlazor/wwwroot/css/open-iconic/README.md

Set dimensions and fill colors for SVG sprite icons using CSS.

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

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

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

### Generate Circular Chart Custom Code

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

Generates specific JavaScript configurations for circular chart types like Pie or Donut.

```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();
    }
```

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

### Set Series Bar Size

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

Updates the bar size for the first series and triggers a chart redraw.

```javascript
function setSize(value) {
    aChart.series.items[0].barSize = value;
    aChart.draw();
}
```

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

### Configure Right Panel Margin

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

Adjusts the right panel margin based on the visibility and position of the chart legend.

```javascript
function setRightPanelMargin() {
    if ((aChart.legend.visible) && (aChart.legend.position == "right"))
        aChart.panel.margins.right = 0;
    else
        aChart.panel.margins.right = 10;

    aChart.draw();
}
```
Tokens:
Raw