• Material 3
  • Fluent
  • Fluent 2
  • Bootstrap 5
  • Tailwind CSS
  • High Contrast
  • Fluent 2 High Contrast
Preferences
Mode Selection
Touch
Mouse
Theme Selection
Theme Mode
Localization
*Translated by Google Translator.
Currency

Example of Periodic Table in ASP.NET Core Diagram Control

This sample demonstrates an interactive Periodic Table of Elements built using the Syncfusion® ASP.NET Core Diagram component, displaying all known elements with categorization by color, detailed hover information, and highlighting by period or group.

DEMO
SOURCE

Elements in this interactive Periodic Table are nodes showing atomic number, symbol, and name; atomic mass appears on hover. Elements are color-coded by category with a clear legend. Users can dynamically highlight elements by clicking period or group numbers, instantly revealing chemical trends and relationships.

Transform your ASP.NET Core web apps today with Syncfusion® ASP.NET Core components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
opens in a new tab