React
Demos
Support
Forum
Download
Search results

Series

You can add any number of series to Smith chart as needed. By using the series setting, you can add or customize the data. For the points and data source added in the series, line can be drawn. You can customize the each series with marker, data label, animation, opacity, and so on.

points or data source

For adding values in the Smith chart, you can use either points or data source in the series. Both the points and data source should be an array of object, which should contain the field names resistance and rectangle.

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>

Series customization

Using the following options in series settings, you can customize the each series in Smith chart:

  • [fill]: Customizes the fill color for the series.
  • [enableSmartLabels]: Places the data labels on Smith chart without overlapping with each other.
  • [visibility]: Handles the visibility of the series.
  • [opacity]: Controls the opacity of the series line.
  • [width]: Customizes the width of the series line.
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>
Previous
Next