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.
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>import { Smithchart } from '@syncfusion/ej2-charts';
let smithchart: Smithchart = new Smithchart({
series: [
{
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 },
],
}
],
});
smithchart.appendTo('#container');<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 for Smith chart </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for Smithchart UI Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-charts/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
</div>
<script src="app.js"></script>
<script>
let loader = document.getElementById('loader');
let container = document.getElementById('container');
if (loader) {
loader.style.display = "none";
}
if (container) {
container.style.visibility = "visible";
}
</script>
</body>
</html>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.
import { Smithchart } from '@syncfusion/ej2-charts';
let smithchart: Smithchart = new Smithchart({
width: '650px',
height: '300px',
series: [
{
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 },
],
}
],
});
smithchart.appendTo('#container');<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 for Smith chart </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for Smithchart UI Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-charts/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
</div>
<script src="app.js"></script>
<script>
let loader = document.getElementById('loader');
let container = document.getElementById('container');
if (loader) {
loader.style.display = "none";
}
if (container) {
container.style.visibility = "visible";
}
</script>
</body>
</html>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.
import { Smithchart } from '@syncfusion/ej2-charts';
let smithchart: Smithchart = new Smithchart({
width: '90%',
height: '85%',
series: [
{
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 },
],
}
],
});
smithchart.appendTo('#container');<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 for Smith chart </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for Smithchart UI Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-charts/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
</div>
<script src="app.js"></script>
<script>
let loader = document.getElementById('loader');
let container = document.getElementById('container');
if (loader) {
loader.style.display = "none";
}
if (container) {
container.style.visibility = "visible";
}
</script>
</body>
</html>