Smithchart tooltip in React Smithchart component

22 Jul 202614 minutes to read

The tooltip is useful when you cannot display information by using the data labels due to space constraints. You can enable tooltip by setting the visible property as true in tooltip object and by injecting the TooltipRender module into the services.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { SmithchartComponent, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, Inject, SmithchartLegend, TooltipRender } from '@syncfusion/ej2-react-charts';
function App() {
    return (<SmithchartComponent id='smithchart' legendSettings={{ visible: true, shape: 'Circle' }} title={{
            visible: true,
            text: 'Transmission lines applied for both impedance and admittance'
        }}>
                        <Inject services={[SmithchartLegend, 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' tooltip={{ visible: true }} marker={{ shape: 'Circle', dataLabel: { visible: true }, visible: true, border: { width: 2 } }}>
                            </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' tooltip={{ visible: true }}>
                            </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, Inject, SmithchartLegend, TooltipRender } from '@syncfusion/ej2-react-charts';

function App() {

  return ( <SmithchartComponent id='smithchart'
                        legendSettings={ { visible: true, shape: 'Circle' } }
                        title = { {
                            visible: true,
                            text: 'Transmission lines applied for both impedance and admittance'
                        } } >
                        <Inject services={[SmithchartLegend, 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' tooltip={ { visible: true } } marker={ { shape: 'Circle', dataLabel: { visible: true }, visible: true, border: { width: 2 } } }
                                >
                            </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' tooltip={ { visible: true } }
                            >
                            </SmithchartSeriesDirective>
                        </SmithchartSeriesCollectionDirective>
            </SmithchartComponent> );

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