Smithchart Dimensions

17 Feb 202210 minutes to read

You can render the smithchart either corresponding to its container size or you can set the size of the smithchart as per your requirement. To render the smithchart corresponding to its container size, you need to set the size for the smithchart container. Else to set the size for the smithchart as per your requirement, you can use the width and height properties in the smithchart.

Size for Container

You can render smithchart to it’s container size. To achieve this, you need to specify the width and height of the smithchart’s container via inline or CSS as demonstrated below.

    <div id='container'>
        <div id='element' style="width:650px; height:350px;"></div>
    </div>

CSHTML

@using Syncfusion.EJ2;
@using Syncfusion.EJ2.Charts;
@Html.EJS().Smithchart("smithchart").Loaded("loaded").Series(series =>
           {
               series.Name("Transmission1").Add();
           }).Render()
<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>

Container.cs

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

Size for Smithchart

You can also set size for smithchart directly through [width] and [height] properties. Using this properties, you can directly mention the width and height of the smithchart in pixels or you can set the width and height in percentage.

In Pixel

In smithchart’s width and height property, you can directly give values in pixels like below demonstration. This will render smithchart in same size as you mentioned in you code.

CSHTML

@using Syncfusion.EJ2;
@using Syncfusion.EJ2.Charts;
@Html.EJS().Smithchart("smithchart").Loaded("loaded").Height("300px").Width("650px").Series(series =>
           {
               series.Name("Transmission1").Add();
           }).Render()
<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>

Size.cs

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

In percentage

You can also specify the width and height of the smithchart in percentage. If you mention the width and height in percentage, then smithchart will be render as per the percentage of it’s container size. You can set the values in percentage like below demonstration.

CSHTML

@using Syncfusion.EJ2;
@using Syncfusion.EJ2.Charts;
@Html.EJS().Smithchart("smithchart").Loaded("loaded").Height("90%").Width("85%").Series(series =>
           {
               series.Name("Transmission1").Add();
           }).Render()
<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>

Percentage.cs

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