Search results

Axis

Like chart, Smithchart is having support for two types of axis.

  • Horizontal axis - axis drawn as straight line in the horizontal direction of the chart.
  • Radial axis - axis is drawn as circular path.

Labels Customization

Axis labels are used to denote what kind of data is bound for smithchart. Using axis labels, you can easily identify in which interval chart is rendered. Using following properties we can customize the axis labels for horizontal and radial axis.

  • [labelPosition] - used to place the labels either inside or outside the axis line.
  • [labelIntersectAction] - used to hide the labels when intersect with other one.
  • [labelStyle] - used to customize the properties such as font size, family, weight, opacity.
tagHelper
label.cs
@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.horizontalAxis.majorGridLines.visible = true;
            args.smithchart.horizontalAxis.majorGridLines.opacity = 0.8;
            args.smithchart.horizontalAxis.majorGridLines.width =10;
            args.smithchart.horizontalAxis.axisLine.visible =true;
             args.smithchart.horizontalAxis.axisLine.width =10;
            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.series[1].points = [{ resistance: 20, reactance: -50 }, { resistance: 10, reactance: -10 },
                { resistance: 9, reactance: -4.5 }, { resistance: 8, reactance: -3.5 },
                { resistance: 7, reactance: -2.5 }, { resistance: 6, reactance: -1.5 },
                { resistance: 5, reactance: -1 }, { resistance: 4.5, reactance: -0.5 },
                { resistance: 3.5, reactance: 0 }, { resistance: 2.5, reactance: 0.4 },
                { resistance: 2, reactance: 0.5 }, { resistance: 1.5, reactance: 0.5 },
                { resistance: 1, reactance: 0.4 }, { resistance: 0.5, reactance: 0.2 },
                { resistance: 0.3, reactance: 0.1 }, { resistance: 0, reactance: 0.05 },];
            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();
        }
    }
}

Gridlines

To make the data in a chart that displays axes easier to read, you can display horizontal and radial axis gridlines. Gridlines extend from any horizontal and radial axes across the plot area of the smithchart. Both horizontal and radial axis are having support for major as well as minor gridlines. Major gridlines are drawn from the position in which labels are rendered. Minor gridlines are drawn between two major gridlines as per the count we set in settings.

We can customize following things, in major as well as minor gridlines.

  • [width] - used to customize the width of gridlines.
  • [dashArray] - used to customize whether gridline have to render as normal line or dashed line.
  • [visible] - used to enable or disable the visibility of the gridlines.
  • [opacity] - used to customize the opacity of the major gridlines.
  • [count] - used to customize the count of the minor gridlines.
tagHelper
grid-line.cs
@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.horizontalAxis.majorGridLines.visible = true;
            args.smithchart.horizontalAxis.majorGridLines.opacity = 0.8;
            args.smithchart.horizontalAxis.majorGridLines.width =10;
            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.series[1].points = [{ resistance: 20, reactance: -50 }, { resistance: 10, reactance: -10 },
                { resistance: 9, reactance: -4.5 }, { resistance: 8, reactance: -3.5 },
                { resistance: 7, reactance: -2.5 }, { resistance: 6, reactance: -1.5 },
                { resistance: 5, reactance: -1 }, { resistance: 4.5, reactance: -0.5 },
                { resistance: 3.5, reactance: 0 }, { resistance: 2.5, reactance: 0.4 },
                { resistance: 2, reactance: 0.5 }, { resistance: 1.5, reactance: 0.5 },
                { resistance: 1, reactance: 0.4 }, { resistance: 0.5, reactance: 0.2 },
                { resistance: 0.3, reactance: 0.1 }, { resistance: 0, reactance: 0.05 },];
            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();
        }
    }
}

Axisline

As name suggests that, it is a line in smithchart that can be configured to denotes the axis. By default, visibility of the axis line is true. You can customize its visibility by using visible property in axis Line. Other than visibility of the axis line, you can customize the following properties of the axis line.

  • [width] - used to customize the width of the axis line.
  • [dashArray] - used to render the axis line as dashed line.
  • [visible] - used to enable or disable the visibility of the axis line.
tagHelper
axis-line.cs
@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.horizontalAxis.labelPosition = 'Inside';
            args.smithchart.horizontalAxis.labelIntersectAction ='Hide';
            args.smithchart.radialAxis.labelPosition = 'Inside';
             args.smithchart.radialAxis.labelIntersectAction ='Hide';
            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.series[1].points = [{ resistance: 20, reactance: -50 }, { resistance: 10, reactance: -10 },
                { resistance: 9, reactance: -4.5 }, { resistance: 8, reactance: -3.5 },
                { resistance: 7, reactance: -2.5 }, { resistance: 6, reactance: -1.5 },
                { resistance: 5, reactance: -1 }, { resistance: 4.5, reactance: -0.5 },
                { resistance: 3.5, reactance: 0 }, { resistance: 2.5, reactance: 0.4 },
                { resistance: 2, reactance: 0.5 }, { resistance: 1.5, reactance: 0.5 },
                { resistance: 1, reactance: 0.4 }, { resistance: 0.5, reactance: 0.2 },
                { resistance: 0.3, reactance: 0.1 }, { resistance: 0, reactance: 0.05 },];
            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();
        }
    }
}