The markers and data labels are used to provide information about the data points in the series. You can add a shape to adorn each data point. By default, both the marker and data label are disabled in Smith chart. You can enable them by setting the visible property to true in marker and data label settings.
By default, the visibility of marker is false. You can enable marker by setting the visible property to true in marker settings. Using marker settings, you can customize marker differently for each series in Smith chart.
<!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='root'>
<div id='loader'>Loading....</div>
</div>
<script src="app/index.js"></script>
</body>
</html>import * as React from "react";
import { Inject, SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, TooltipRender } from '@syncfusion/ej2-react-charts';
export class App extends React.Component {
load(args) {
args.smithchart.series[0].marker = {
visible: true
};
}
render() {
return (<SmithchartComponent id='smithchart' load={this.load.bind(this)}>
<Inject services={[TooltipRender]}/>
<SmithchartSeriesCollectionDirective>
<SmithchartSeriesDirective 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 },
]} name='Transmission1'>
</SmithchartSeriesDirective>
</SmithchartSeriesCollectionDirective>
</SmithchartComponent>);
}
}Using marker settings in series, you can customize the marker for each series differently. You can customize the markers using the following properties differently for each series in the Smith chart:
width]: Controls the width of the marker.height]: Controls the height of the marker.fill]: Customizes the fill color of the marker.opacity]: Customizes the opacity of the marker.border]: Controls the width and color of the marker’s border.shape]: Changes the shape of the marker.<!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='root'>
<div id='loader'>Loading....</div>
</div>
<script src="app/index.js"></script>
</body>
</html>import * as React from "react";
import { Inject, SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, TooltipRender } from '@syncfusion/ej2-react-charts';
export class App extends React.Component {
load(args) {
args.smithchart.series[0].marker = {
visible: true,
height: 10,
width: 10,
fill: '#ff99ff',
opacity: 1,
shape: 'rectangle',
border: {
color: '#cc00cc',
width: 2
}
};
}
render() {
return (<SmithchartComponent id='smithchart' load={this.load.bind(this)}>
<Inject services={[TooltipRender]}/>
<SmithchartSeriesCollectionDirective>
<SmithchartSeriesDirective 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 },
]} name='Transmission1'>
</SmithchartSeriesDirective>
</SmithchartSeriesCollectionDirective>
</SmithchartComponent>);
}
}By default, the data labels are disabled. You can enable the data labels by setting the visible property to true in data label settings. For each point in series, a data label is created. The data labels for each series can be customized differently using the data label settings.
<!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='root'>
<div id='loader'>Loading....</div>
</div>
<script src="app/index.js"></script>
</body>
</html>import * as React from "react";
import { Inject, SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, TooltipRender } from '@syncfusion/ej2-react-charts';
export class App extends React.Component {
load(args) {
args.smithchart.series[0].marker = {
dataLabel: {
visible: true
}
};
}
render() {
return (<SmithchartComponent id='smithchart' load={this.load.bind(this)}>
<Inject services={[TooltipRender]}/>
<SmithchartSeriesCollectionDirective>
<SmithchartSeriesDirective 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 },
]} name='Transmission1'>
</SmithchartSeriesDirective>
</SmithchartSeriesCollectionDirective>
</SmithchartComponent>);
}
}Using data label settings in marker, you can customize the data label for each series differently. The following properties are used to customize data labels differently for each series:
fill]: Changes the fill color of the data label’s shape.opacity]: Controls the opacity of the data label’s shape.border]: Customizes the width and color of the border.textStyle]: Customizes the font color, width, and size.<!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='root'>
<div id='loader'>Loading....</div>
</div>
<script src="app/index.js"></script>
</body>
</html>import * as React from "react";
import { Inject, SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, TooltipRender } from '@syncfusion/ej2-react-charts';
export class App extends React.Component {
load(args) {
args.smithchart.series[0].marker = {
dataLabel: {
visible: true,
fill: '#99ffcc',
opacity: 1,
border: {
color: '#1aff8c',
width: 2,
}
}
};
}
render() {
return (<SmithchartComponent id='smithchart' load={this.load.bind(this)}>
<Inject services={[TooltipRender]}/>
<SmithchartSeriesCollectionDirective>
<SmithchartSeriesDirective 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 },
]} name='Transmission1'>
</SmithchartSeriesDirective>
</SmithchartSeriesCollectionDirective>
</SmithchartComponent>);
}
}