Smithchart marker in React Smithchart component
2 Feb 202324 minutes to read
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.
Marker
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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Inject, SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, TooltipRender } from '@syncfusion/ej2-react-charts';
function App() {
function load(args) {
args.smithchart.series[0].marker = {
visible: true
};
}
return (<SmithchartComponent id='smithchart' load={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>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('smithchart'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { Inject, SmithchartComponent, SmithchartLegend, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, TooltipRender } from '@syncfusion/ej2-react-charts';
function App() {
function load(args: ISmithchartLoadedEventArgs): void {
args.smithchart.series[0].marker = {
visible: true
};
}
return ( <SmithchartComponent id='smithchart' load={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> );
};
export default App;
ReactDOM.render(<App />, document.getElementById('smithchart'));Marker customization
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:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Inject, SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, TooltipRender } from '@syncfusion/ej2-react-charts';
function App() {
function load(args) {
args.smithchart.series[0].marker = {
visible: true,
height: 10,
width: 10,
fill: '#ff99ff',
opacity: 1,
shape: 'rectangle',
border: {
color: '#cc00cc',
width: 2
}
};
}
return (<SmithchartComponent id='smithchart' load={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>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('smithchart'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { Inject, SmithchartComponent, SmithchartLegend, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, TooltipRender } from '@syncfusion/ej2-react-charts';
function App() {
function load(args: ISmithchartLoadedEventArgs): void {
args.smithchart.series[0].marker = {
visible: true,
height: 10,
width: 10,
fill: '#ff99ff',
opacity: 1,
shape: 'rectangle',
border: {
color: '#cc00cc',
width: 2
}
};
}
return ( <SmithchartComponent id='smithchart' load={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> );
};
export default App;
ReactDOM.render(<App />, document.getElementById('smithchart'));Data labels
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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Inject, SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, TooltipRender } from '@syncfusion/ej2-react-charts';
function App() {
function load(args) {
args.smithchart.series[0].marker = {
dataLabel: {
visible: true
}
};
}
return (<SmithchartComponent id='smithchart' load={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>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('smithchart'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { Inject, SmithchartComponent, SmithchartLegend, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, TooltipRender } from '@syncfusion/ej2-react-charts';
function App() {
function load(args: ISmithchartLoadedEventArgs): void {
args.smithchart.series[0].marker = {
dataLabel: {
visible: true
}
};
}
return ( <SmithchartComponent id='smithchart' load={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> );
};
export default App;
ReactDOM.render(<App />, document.getElementById('smithchart'));Data label customization
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:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Inject, SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, TooltipRender } from '@syncfusion/ej2-react-charts';
function App() {
function load(args) {
args.smithchart.series[0].marker = {
dataLabel: {
visible: true,
fill: '#99ffcc',
opacity: 1,
border: {
color: '#1aff8c',
width: 2,
}
}
};
}
return (<SmithchartComponent id='smithchart' load={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>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('smithchart'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { Inject, SmithchartComponent, SmithchartLegend, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, TooltipRender } from '@syncfusion/ej2-react-charts';
function App() {
function load(args: ISmithchartLoadedEventArgs): void {
args.smithchart.series[0].marker = {
dataLabel: {
visible: true,
fill: '#99ffcc',
opacity: 1,
border: {
color: '#1aff8c',
width: 2,
}
}
};
}
return ( <SmithchartComponent id='smithchart' load={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> );
};
export default App;
ReactDOM.render(<App />, document.getElementById('smithchart'));