Search results

Smith Chart Dimensions

You can render the Smith chart corresponding to its container size. To set the size for the Smith chart, use the width and height properties.

Size for container

To render the Smith chart to its container size, specify the width and height of the Smith chart’s container using inline or CSS as demonstrated in the following code sample.

    <div id='container'>
        <div id='smithchart' style="width:650px; height:350px;"></div>
    </div>
Source
Preview
index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #smithchart {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='smithchart'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>

Size for Smith chart

You can also set the size for Smith chart in pixels or percentage directly using the [width] and [height] properties.

In pixel

In the width and height properties of Smith chart, directly set the values in pixels as demonstrated in the following code sample.

Source
Preview
index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #smithchart {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='smithchart'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>

In percentage

You can also specify the width and height properties of the Smith chart in percentage. If you mention the width and height in percentage, then Smith chart will be rendered to its container size. The following code sample demonstrates how to set the width and height properties of the Smith chart in percentage.

Source
Preview
index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #smithchart {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='smithchart'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>