Tooltip in Smith Chart

22 Jul 20265 minutes to read

The Smith Chart displays the details of each point via a tooltip when the mouse hovers over it. By default, the tooltip is disabled. To enable the tooltip, add the <e-smithchartseries-tooltip> child element to each series and set its visible attribute to true. You can customize the tooltip’s visibility and appearance for each series individually.

@using Syncfusion.EJ2;
@using Syncfusion.EJ2.Charts;
<div id="control-section">
 <ejs-smithchart id="smithchart" loaded="loaded">
        <e-smithchart-smithchartseriescollection>
            <e-smithchart-smithchartseries name="Transmission1">
            <e-smithchartseries-tooltip visible="true"></e-smithchartseries-tooltip>
            </e-smithchart-smithchartseries>
            <e-smithchart-smithchartseries name="Transmission2">
            <e-smithchartseries-tooltip visible="true"></e-smithchartseries-tooltip>
             <e-smithchartseries-marker visible="true"></e-smithchartseries-marker>
            </e-smithchart-smithchartseries>
        </e-smithchart-smithchartseriescollection>
</ejs-smithchart>
</div>
<script>
        function loaded(args) {
            window.smithchart = args.smithchart;
            args.smithchart.series[0].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 },
            ];
            args.smithchart.series[1].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 },];
            args.smithchart.loaded = null;
            args.smithchart.refresh();
        }
    </script>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}