Series

17 Feb 20229 minutes to read

You can add any number of series to the smithchart as per your requirement. You can use series setting to either add or customize the data. For the points or datasource added in the series, line is drawn. You can customize the each series as per your requirement with marker, datalabel, animation, opacity and so on.

points or datasource

For adding values in the smithchart, you can use either points or datasource in the series. Points and datasource both should be array of object which should contain the field names resistance and rectangle.

@using Syncfusion.EJ2;
@using Syncfusion.EJ2.Charts;
<div id="control-section">
 <ejs-smithchart id="smithchart" loaded="loaded">
        <e-smithchart-smithchartseriescollection>
            <e-smithchart-smithchartseries name="Transmission1"></e-smithchart-smithchartseries>
        </e-smithchart-smithchartseriescollection>
</ejs-smithchart>
</div>
<script>
        function loaded(args) {
            window.smithchart = args.smithchart;
            args.smithchart.series[0].points = [
                { resistance: 10, reactance: 25 }, { resistance: 8, reactance: 6 },
                { resistance: 6, reactance: 4.5 }, { resistance: 4.5, reactance: 2 },
                { resistance: 3.5, reactance: 1.6 }, { resistance: 2.5, reactance: 1.3 },
                { resistance: 2, reactance: 1.2 }, { resistance: 1.5, reactance: 1 },
                { resistance: 1, reactance: 0.8 }, { resistance: 0.5, reactance: 0.4 },
                { resistance: 0.3, reactance: 0.2 }, { resistance: 0, reactance: 0.15 },
            ];
            args.smithchart.loaded = null;
            args.smithchart.refresh();
        }
    </script>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Series customization

Using following options in series settings, you can customize each series in smithchart as per your requirement.

  • [fill] - Used to customize the fill color for the series.
  • [enableSmartLabels] - Used to place the data labels on the smithchart without overlapping with each other.
  • [visibility] - Used to handle the visibility of the series.
  • [opacity] - Used to control the opacity of the series line.
  • [width] - Used to customize the width of the series line.
@using Syncfusion.EJ2;
@using Syncfusion.EJ2.Charts;
<div id="control-section">
 <ejs-smithchart id="smithchart" loaded="loaded">
        <e-smithchart-smithchartseriescollection>
            <e-smithchart-smithchartseries name="Transmission1"></e-smithchart-smithchartseries>
            <e-smithchart-smithchartseries name="Transmission2"></e-smithchart-smithchartseries>
        </e-smithchart-smithchartseriescollection>
</ejs-smithchart>
</div>
<script>
        function loaded(args) {
            window.smithchart = args.smithchart;
            args.smithchart.series[0].points = [
                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                { resistance: 0.3, reactance: 0.1 }, { resistance: 0.5, reactance: 0.2 },
                { resistance: 1.5, reactance: 0.5 }, { resistance: 2.0, reactance: 0.5 },
                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                { resistance: 4.5, reactance: -0.5 }, { resistance: 5.0, reactance: -1.0 }
            ];
            args.smithchart.series[1].points = [{ resistance: 0, reactance: 0.15 }, { resistance: 0, reactance: 0.15 },
            { resistance: 0, reactance: 0.15 }, { resistance: 0.3, reactance: 0.2 },
            { resistance: 0.3, reactance: 0.2 }, { resistance: 0.3, reactance: 0.2 },
            { resistance: 0.3, reactance: 0.2 }, { resistance: 0.3, reactance: 0.2 },
            { resistance: 0.5, reactance: 0.4 }, { resistance: 1.0, reactance: 0.8 },
            { resistance: 2.5, reactance: 1.3 }, { resistance: 3.5, reactance: 1.6 },
            { resistance: 3.5, reactance: 1.6 }, { resistance: 3.5, reactance: 1.6 },
            { resistance: 4.5, reactance: 2.0 }, { resistance: 6.0, reactance: 4.5 },
            { resistance: 8, reactance: 6 }, { resistance: 10, reactance: 25 }];
            args.smithchart.loaded = null;
            args.smithchart.refresh();
        }
    </script>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}