Title subtitle in React Smithchart component

22 Jul 202620 minutes to read

Enable title

You can add a title using the title property to provide quick information to the user about the data plotted in the Smith Chart.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';
function App() {
    return (<SmithchartComponent id='smithchart' title={{
            visible: true,
            text: 'Transmission lines applied for both impedance and admittance'
        }}>
                        <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>
                            <SmithchartSeriesDirective points={[
            { resistance: 20, reactance: -50 }, { resistance: 10, reactance: -10 },
            { resistance: 9, reactance: -4.5 }, { resistance: 8, reactance: -3.5 },
            { resistance: 7, reactance: -2.5 }, { resistance: 6, reactance: -1.5 },
            { resistance: 5, reactance: -1 }, { resistance: 4.5, reactance: -0.5 },
            { resistance: 3.5, reactance: 0 }, { resistance: 2.5, reactance: 0.4 },
            { resistance: 2, reactance: 0.5 }, { resistance: 1.5, reactance: 0.5 },
            { resistance: 1, reactance: 0.4 }, { resistance: 0.5, reactance: 0.2 },
            { resistance: 0.3, reactance: 0.1 }, { resistance: 0, reactance: 0.05 },
        ]} name='Transmission2'>
                            </SmithchartSeriesDirective>
                        </SmithchartSeriesCollectionDirective>
            </SmithchartComponent>);
}
;
export default App;
const root = ReactDOM.createRoot(document.getElementById('smithchart'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { SmithchartComponent,  SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';

function App() {

  return ( <SmithchartComponent id='smithchart'
                        title = { {
                            visible: true,
                            text: 'Transmission lines applied for both impedance and admittance'
                        }} >
                        <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>
                            <SmithchartSeriesDirective
                                points={[
                                    { resistance: 20, reactance: -50 }, { resistance: 10, reactance: -10 },
                                    { resistance: 9, reactance: -4.5 }, { resistance: 8, reactance: -3.5 },
                                    { resistance: 7, reactance: -2.5 }, { resistance: 6, reactance: -1.5 },
                                    { resistance: 5, reactance: -1 }, { resistance: 4.5, reactance: -0.5 },
                                    { resistance: 3.5, reactance: 0 }, { resistance: 2.5, reactance: 0.4 },
                                    { resistance: 2, reactance: 0.5 }, { resistance: 1.5, reactance: 0.5 },
                                    { resistance: 1, reactance: 0.4 }, { resistance: 0.5, reactance: 0.2 },
                                    { resistance: 0.3, reactance: 0.1 }, { resistance: 0, reactance: 0.05 },
                                ]} name='Transmission2'
                            >
                            </SmithchartSeriesDirective>
                        </SmithchartSeriesCollectionDirective>
            </SmithchartComponent> );

};
export default App;
const root = ReactDOM.createRoot(document.getElementById('smithchart'));
root.render(<App />);

Trim title

Both the title and subtitle of the Smith chart can be trimmed if they exceed the certain length. Trimming is enabled using the [enableTrim] property for title and subtitle. The length for title and subtitle can be changed using the [maximumWidth] property. You can also customize the font, alignment, and visibility of title and subtitle using the [font], [textAlignment], and [visibility] properties.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';
function App() {
    function load(args) {
        args.smithchart.title.text = 'Impedance Transmission';
        args.smithchart.title.visible = true;
        args.smithchart.title.subtitle.text = 'Transmission';
        args.smithchart.title.enableTrim = true;
        args.smithchart.title.maximumWidth = 70;
        args.smithchart.title.subtitle.textAlignment = 'Far';
        args.smithchart.title.subtitle.enableTrim = true;
        args.smithchart.title.subtitle.maximumWidth = 40;
    }
    return (<SmithchartComponent id='smithchart' load={load.bind(this)}>
                        <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 { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective } from '@syncfusion/ej2-react-charts';

function App() {
    function load(args: ISmithchartLoadedEventArgs): void {
        args.smithchart.title.text = 'Impedance Transmission';
        args.smithchart.title.visible = true;
        args.smithchart.title.subtitle.text = 'Transmission';
        args.smithchart.title.enableTrim = true;
        args.smithchart.title.maximumWidth = 70;
        args.smithchart.title.subtitle.textAlignment = 'Far';
        args.smithchart.title.subtitle.enableTrim = true;
        args.smithchart.title.subtitle.maximumWidth = 40;
    }

    return ( <SmithchartComponent id='smithchart' load={load.bind(this)}>
                        <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'));