Example of Symbol Palette in React Diagram Component

All Controls
/
Diagram
/
SymbolPalette

This sample demonstrates the customizable options of symbol palette.

More Details...

Loading....
Description

This example demonstrates how to add shapes to a symbol palette and customize their appearance using the Syncfusion Diagram component. Symbol sizes can be adjusted using the width and height properties via the getSymbolInfo method.

Additional features include:

  • Enabling or disabling animation using the enableAnimation property.
  • Activating search functionality with the enableSearch property, allowing users to find symbols by ID or search tags

Note: The size of "HTML Shapes" in the symbol palette is restricted at runtime when modifying symbol size property, to maintain a consistent layout and visual appearance.