Search results

Smith Chart Dimensions

You can set the Smith Chart dimensions in the following ways.

  • Size using CSS
  • Size using API

Size using CSS

To set the size using CSS, add ID to the EjsSmithchart tag and specify the width and height of the Smith Chart using CSS as demonstrated in the following code sample.

@using Syncfusion.EJ2.Blazor.Charts

<EjsSmithchart ID="dimension">
    <SmithchartSeriesCollection>
        <SmithchartSeries Points="@firstTransmissionData"></SmithchartSeries>
    </SmithchartSeriesCollection>
</EjsSmithchart>

<style>
    #dimension {
        height:300px;
        width:300px;
    }
</style>

@code {
    public class SmithDataSource
    {
        public double? resistance;
        public double? reactance;
    };
    private List<SmithDataSource> firstTransmissionData = new List<SmithDataSource> {
        new SmithDataSource { resistance= 10, reactance= 25 },
        new SmithDataSource { resistance= 6, reactance= 4.5 },
        new SmithDataSource { resistance= 3.5, reactance= 1.6 },
        new SmithDataSource { resistance= 2, reactance= 1.2 },
        new SmithDataSource { resistance= 1, reactance= 0.8 },
        new SmithDataSource { resistance= 0, reactance= 0.2 }
    };
}

Smith chart dimention customization

Size using API

You can also set size for Smith Chart directly using the Width and Height properties. Using these properties, you can directly mention the width and height of the Smith Chart in pixels or you can set the width and height in percentage.

In pixel

In the Width and Height properties of Smith Chart, you can directly give values in pixels demonstrated in the following sample. This will render Smith Chart in same size as you mentioned in code.

@using Syncfusion.EJ2.Blazor.Charts

<EjsSmithchart Height="300px" Width="300px">
    <SmithchartSeriesCollection>
        <SmithchartSeries Points="@firstTransmissionData"></SmithchartSeries>
    </SmithchartSeriesCollection>
</EjsSmithchart>

@code {
    public class SmithDataSource
    {
        public double? resistance;
        public double? reactance;
    };
    private List<SmithDataSource> firstTransmissionData = new List<SmithDataSource> {
        new SmithDataSource { resistance= 10, reactance= 25 },
        new SmithDataSource { resistance= 6, reactance= 4.5 },
        new SmithDataSource { resistance= 3.5, reactance= 1.6 },
        new SmithDataSource { resistance= 2, reactance= 1.2 },
        new SmithDataSource { resistance= 1, reactance= 0.8 },
        new SmithDataSource { resistance= 0, reactance= 0.2 }
    };
}

Smith chart size customization

In percentage

In the Width and Height properties of Smith Chart, you can directly give values in percentage as demonstrated in the following code sample. Then, the Smith Chart will be rendered to the percentage of its container size.

@using Syncfusion.EJ2.Blazor.Charts

<div style="height:600px; width:600px">
    <EjsSmithchart Height="50%" Width="50%">
        <SmithchartSeriesCollection>
            <SmithchartSeries Points="@firstTransmissionData"></SmithchartSeries>
        </SmithchartSeriesCollection>
    </EjsSmithchart>
</div>

@code {
    public class SmithDataSource
    {
        public double? resistance;
        public double? reactance;
    };
    private List<SmithDataSource> firstTransmissionData = new List<SmithDataSource> {
        new SmithDataSource { resistance= 10, reactance= 25 },
        new SmithDataSource { resistance= 6, reactance= 4.5 },
        new SmithDataSource { resistance= 3.5, reactance= 1.6 },
        new SmithDataSource { resistance= 2, reactance= 1.2 },
        new SmithDataSource { resistance= 1, reactance= 0.8 },
        new SmithDataSource { resistance= 0, reactance= 0.2 }
    };
}

Smith chart size customization