# Syncfusion: Enterprise-Grade AI-Ready UI Components, Document SDKs, and Feature-rich Document Viewers/Editors Source: https://www.syncfusion.com > Syncfusion is a leading provider of enterprise tools trusted by developers worldwide. It provides over 1,600 high-performance enterprise-grade UI components, frameworks, and document SDKs that empower developers to build modern, AI-powered, accessible applications across web, desktop, and mobile platforms. From DataGrids and Charts to advanced editors and scheduling tools, Syncfusion accelerates development for .NET, Blazor, Angular, React, .NET MAUI, JavaScript, Vue, WPF, WinForms, and ASP.NET Core. > > By combining cross-platform UI components, advanced data visualization, robust file format SDKs, and AI-powered features, Syncfusion helps developers reduce coding effort, accelerate development, and deliver modern, enterprise-ready applications. ## Core Offerings - **UI Components** - DataGrid, Charts, Scheduler, Rich Text Editor, Gantt Chart, Diagram, and more. - **Document SDKs** - Create, edit, convert, and view PDF, Word, Excel, and PowerPoint files. - **Document Viewer/Editor SDKs** - View, edit, and collaborate on PDF, Word, and Excel documents directly inside applications. - **AI-Powered Tools** - AI Code Studio, HelpBot. - **AI Coding Assistants** - Accelerate enterprise app development with Syncfusion AI Coding Assistants acting as an MCP server. Get intelligent, context-aware coding assistance and seamless IDE integration. ## UI Components - **DataGrid, Charts, Scheduler, Gantt, Diagram, Rich Text Editor**, and more. - Platforms supported: **Blazor, React, Angular, JavaScript, Vue, .NET MAUI, ASP.NET Core, WinForms, WPF, WinUI, UWP, and Flutter**. - Optimized for **performance, accessibility, and scalability**. - **AI-Powered UI Components** - Smart Paste, Smart TextArea, AI AssistView, and AI-Powered PDF Viewer. ## Document SDKs & Viewers / Editors Syncfusion delivers powerful document processing libraries and interactive editors. - Feature-rich viewers/editors like PDF Viewer SDK, DOCX Editor SDK, and Spreadsheet Editor SDK for viewing, editing, annotation, form filling, secure signing, and editing. - Create, edit, and convert **PDF, Word, Excel, and PowerPoint files** faster using Document SDKs. - Provide user-friendly APIs for embedding document workflows into apps with minimal code. ## AI-Powered Features - **Smart Paste, Smart TextArea, AI AssistView** - productivity-focused AI components. - **AI-Powered PDF Viewer** for built-in smart redaction, form filling, and more. - **AI Code Studio** - Enterprise-grade AI coding assistant for faster, smarter app development. - **HelpBot** - always-available AI support with code snippets and documentation answers. - Seamless integration with **OpenAI, Anthropic, Google, and Azure AI models**. ## Security & Compliance - **SOC 2 Type 2 certified** - audited for security, availability, and confidentiality. - **GDPR aligned** - strict privacy controls for EU-regulated industries. - **NIST 800-53 compliant** - robust security and risk management. - Regional **data residency** options in the **US, EU, and Canada**. ## Why Developers Choose Syncfusion - **1,600+ UI Components** - Charts, DataGrids, Editors, Schedulers, GanttView, Kanban board, Diagram, and more. - **Cross-Platform Reach** - Blazor, Angular, React, JavaScript, .NET MAUI, WPF, WinForms, ASP.NET Core, and Flutter. - **Document SDKs** - Rich APIs for working with DOCX, XLSX, PPTX, and PDF. - **Free Community License** - Available for eligible developers and startups. - **Flexible Pricing** - Unlimited license options and transferable annual license with one low annual subscription fee. ================================================================================ ## Products -------------------------------------------------------------------------------- ### UI Component Suite URL: https://www.syncfusion.com/ui-component-suite Essential Studio® # Accelerate Enterprise App Development with AI-Ready UI Components Build stunning AI-Powered apps faster with 1,600+ accessible and high-performance UI components like DataGrid, Charts, Scheduler, Rich Text Editor, Gantt Chart, and Diagram for every major .NET and JavaScript framework. ## Enterprise UI Components Built for Your Stack One consistent toolkit for web, mobile, and desktop development gives you faster delivery and easier maintenance. Our tools help you design rich, interactive apps with the platforms you already trust. High-performance controls: DataGrid, Charts, Scheduler, Gantt Chart, Diagram, Rich Text Editor, and more. [Blazor - Build interactive web UIs in C# with no JavaScript required.](https://www.syncfusion.com/blazor-components) [React -Fast, customizable UI components for high-performance React apps.](https://www.syncfusion.com/react-components) [Angular -Enterprise-ready Angular components for scalable web apps.](https://www.syncfusion.com/angular-components) [JavaScript - Lightweight, flexible, and framework-agnostic UI building blocks.](https://www.syncfusion.com/javascript-ui-controls) [Vue - Build elegant UIs and reactive interfaces with high-performance.](https://www.syncfusion.com/vue-components) [ASP.NET Core - Powerful Razor components for modern web development.](https://www.syncfusion.com/aspnet-core-ui-controls) [ASP.NET MVC - Classic MVC controls that remain enterprise ready.](https://www.syncfusion.com/aspnet-mvc-ui-controls) [Flutter -Add-On Flutter is offered as an add-on benefit for UI Component Suite users.Create beautiful, natively compiled UIs for mobile, web, and desktop.](https://www.syncfusion.com/flutter-widgets) ## Build AI-Powered Enterprise Apps Faster Prebuilt AI components and an AI code editor help you accelerate app delivery across your stack. ### AI-Powered Components - Smart TextArea: Provides AI-driven sentence completion, adapting suggestions based on role and context. - Smart Paste: Automatically fills out forms by interpreting structured data, helping minimize errors. - AI AssistView: Delivers instant AI tips and explanations to guide users as they work. ### AI-Ready Components - DataGrid: Manage and explore large datasets with AI-backed insights. - Charts: Highlight patterns and trends through AI-enhanced visual interactions. - Scheduler: Improve scheduling and resource allocation with AI-supported optimization. ### AI-Ready Components - DataGrid: Manage and explore large datasets with AI-backed insights. - Charts: Highlight patterns and trends through AI-enhanced visual interactions. - Scheduler: Improve scheduling and resource allocation with AI-supported optimization. ### See What You can Build with Our Components From enterprise dashboards to interactive data visualizations, our UI components help you deliver stunning, functional apps in record time. [Blazor](https://www.syncfusion.com/blazor-components/blazor-datagrid) [React](https://www.syncfusion.com/react-components/react-data-grid) [Angular](https://www.syncfusion.com/angular-components/angular-grid) [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-data-grid) [Vue](https://www.syncfusion.com/vue-components/vue-grid) [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls/grid) [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/grid) [WinForms](https://www.syncfusion.com/winforms-ui-controls/datagrid) [WPF](https://www.syncfusion.com/wpf-controls/datagrid) [WinUI](https://www.syncfusion.com/winui-controls/datagrid) [.NET MAUI](https://www.syncfusion.com/maui-controls/maui-datagrid) [UWP](https://www.syncfusion.com/uwp-ui-controls/datagrid) ### AI-Powered Developer Productivity Build faster with our UI components, while [Code Studio](https://www.syncfusion.com/code-studio/) helps streamline the process. ### Cross-Platform & Responsive Designed for developers to deliver responsive apps across web, desktop, and mobile using popular frameworks. ### AI-Powered Support With our HelpBot, you can get instant responses and code examples for simpler questions. ### Comprehensive Suite Build with confidence using a comprehensive set of controls for all leading .NET and JavaScript frameworks. ### Modern & Engaging Apps Leverage expertly designed components and themes to deliver apps that are visually impressive and always current. ### Direct Access to Expert Engineers Receive world-class support directly from the engineers who develop and maintain our products. ### Enterprise-Grade Quality Assured Rely on outstanding performance, accessibility, localization, and security at every stage. ### Innovation That Never Stops We continuously enhance our tools to support your needs today and anticipate the challenges of tomorrow. ### Hassle-Free Licensing Clear, simple pricing with no hidden costs. Guaranteed. [Documentation](https://help.syncfusion.com/) #### Blazor Components URL: https://www.syncfusion.com/blazor-components Syncfusion Collaborates with Microsoft to Advance .NET MAUI.[Read more Read more on press release](https://www.syncfusion.com/explore/microsoft-collaboration/) ## Why you need the Syncfusion Blazor component library The Syncfusion Blazor component library offers 145+ responsive, lightweight components, including data visualizations like [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid), 55+ [Charts](https://www.syncfusion.com/blazor-components/blazor-charts), and [Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler), for building modern web apps. ### 145+ Blazor components The Syncfusion Blazor Component Library offers 145+ components that work seamlessly with both Blazor Server and client-side Blazor WebAssembly projects. ### AI-ready UI components From [AI-ready components](https://www.syncfusion.com/explore/ai) to AI-powered services like the [HelpBot](https://helpbot.syncfusion.com/) and [Code Studio](https://www.syncfusion.com/code-studio), Syncfusion helps you build intelligent apps faster and get support when you need it. ### Stunning built-in themes Pixel-perfect built-in themes are available in Fluent 2, Tailwind CSS, Bootstrap 5, and Material 3 designs. You can customize these themes using our online [Theme Studio](https://blazor.syncfusion.com/themestudio) tool. ### Performance Every component is fine-tuned to work with a high volume of data. ### Dedicated support Truly unlimited dedicated support system via the public [forum](https://www.syncfusion.com/forums/blazor-components), [feature & feedback page](https://www.syncfusion.com/feedback/blazor-components), [live chat](https://www.syncfusion.com/forums/156460/introducing-live-chat-support), and [support tickets](https://support.syncfusion.com/create). ### Demos and training A wide range of product [demos](https://blazor.syncfusion.com/) and training, including [video tutorials](https://www.syncfusion.com/tutorial-videos/blazor/blazor-server-app), [documentation](https://blazor.syncfusion.com/documentation/introduction), and [KBs](https://support.syncfusion.com/kb/web/category/67). ### Hassle-free licensing Simple, straightforward, and no hidden fees. Guaranteed. ### Frequent updates Get minor improvements and bug fixes every week to stay up to date. ## AI-Powered Tools for Developers Explore the complete Syncfusion® AI ecosystem: AI-ready UI components, smart developer tools like [Code Studio](https://www.syncfusion.com/code-studio/) (an AI code editor) and instant support with the [AI-powered HelpBot](https://helpbot.syncfusion.com/). Everything you need to build intelligent, modern apps faster. ## MCP Server for Blazor Syncfusion MCP Server for Blazor brings expert component knowledge into your IDE. The AI Coding Assistant generates and refactors Blazor code, while the Agentic UI Builder scaffolds layouts with instant, documentation-backed API guidance. Track and visualize your daily expenses with a great UI using this Blazor WebAssembly showcase demo. Track and visualize data such as calories consumed and daily activities like steps taken, water consumption, and sleep duration using this Blazor WebAssembly showcase demo. Appointment Planner Manage the appointments of doctors with patients in a clinic using this Blazor WebAssembly appointment scheduling showcase app. Document Explorer File management tool that allows users to navigate, access, edit, and organize various document types, including Word, Excel, PowerPoint, PDF, and image files. It features file operations (open, edit, save, delete), sorting, filtering, and search functionalities. Diagram Builder is a web application which is used to create the diagrams like Flow Chart, process diagrams and more. A mind map, a type of spider diagram, is used to visually organize information around a central concept. It helps show the relationships between groups of information. Org Chart Creator An organizational chart is a diagram that visually conveys a company's internal structure by detailing the roles, responsibilities, and relationships between individuals within an entity. A business process model and notation (BPMN) diagram is like a flowchart for complex business processes, used for sharing process information across organizations and industries. Logic Circuit Designer Design and simulate digital logic circuits using a wide range of logic gates, input and output components to better visualize and understand how it works, and share your design with others. Design and plan the layout of a floor or building, including the placement of walls, doors, windows, furniture, and other objects. Track and visualize the data from your daily activities, like diet and exercise, to see your daily fitness statistics. Effortlessly calculate your loan payment by providing details about your loan amount, interest rate, and loan term. Sales Management app This app is designed to help businesses efficiently and effectively manage their sales processes. Integrate Microsoft Identity technologies into our Blazor apps for login, registration, authorization, and authentication. Diagram Collaborative Editing Diagram Collaborative Editing is a Blazor-based diagramming application enabling concurrent multi-user editing with real-time updates powered by SignalR and Redis. #### Easily Transition from Desktop to Web Development with Syncfusion Blazor Controls. [Documentation](https://blazor.syncfusion.com/documentation) [API Reference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor_namespace.html) [Blazor UI Kit](https://www.syncfusion.com/essential-blazor-ui-kit) ### Blazor EBook A quick guide to getting started with learning and improving your skills using Blazor technology. ### Blazor Webstories Explore our collection of web stories to learn about programming and development tools. announce the new feature availability, explain Blazor components best practices, and describe example channels for Blazor. [How to Copy and Paste Events in Blazor Scheduler Using Clipboard APIs](https://www.syncfusion.com/blogs/post/copy-and-paste-events-in-blazor-scheduler) [Getting Started with Blazor Charts Using Visual Studio Code](https://www.syncfusion.com/tutorial-videos/blazor/charts?title=getting-started-with-blazor-charts-component-using-visual) [Real-Time Collaborative Editing in Blazor Diagram with SignalR and Redis](https://www.syncfusion.com/blogs/post/collaborative-editing-in-blazor-diagram) [Getting Started with the Blazor DataGrid Component](https://www.syncfusion.com/tutorial-videos/blazor/data-grid?title=getting-started-with-the-blazor-datagrid-component) [Blazor Scheduler Localization: Multilingual Support + Culture Switching](https://www.syncfusion.com/blogs/post/multilingual-support-in-blazor-scheduler) [Getting Started with Blazor Scheduler using Visual Studio Code](https://www.syncfusion.com/tutorial-videos/blazor/scheduler?title=getting-started-with-blazor-scheduler-component-using-visual) --- title: Blazor DataGrid | Fast and Feature-Rich Data Table | Syncfusion description: Easily integrate the Blazor DataGrid and customize your data table with advanced features like sorting, filtering, editing, exporting, and accessibility. image: "https://ft.syncfusion.com/featuretour/ft-og-images/blazor/blazor-datagrid.webp" url: "https://www.syncfusion.com/blazor-components/blazor-datagrid" --- # Blazor DataGrid - Responsive, High-Performance Data Table - Millions of records load in just a second. - Mobile-first design that adapts to any resolution. - Flexible editing and intuitive record selection modes. - Countless column customizations and data summaries. - Seamless data exporting options like PDF, CSV, and Excel. ## Overview The DataGrid supports local and remote data sources and provides features for interactive data manipulation. It includes adaptive UI rendering for different screen sizes and supports exporting data in multiple formats. ### High performance A focus on fast-paced [performance allows users to load millions of records](https://www.syncfusion.com/blazor-components/blazor-datagrid/performance) in just a second. ### Seamless data binding Bind data seamlessly with various [local and remote data sources](https://www.syncfusion.com/blazor-components/blazor-datagrid/data-binding), such as IEnumerable/List, RESTful services, OData services, WCF services, ObservableCollections, ExpandoObject, and DynamicObject. ### Adapts to any resolution The DataGrid has a [highly responsive layout](https://blazor.syncfusion.com/documentation/datagrid/adaptive-layout) and an optimized design for desktops, tablets, and smart phones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Flexible editing The Blazor DataGrid performs [create, read, update, and delete operations](https://www.syncfusion.com/blazor-components/blazor-datagrid/editing) more easily with a list of business objects or remote data service with the help of a data manager. ### Create your own template designs Allow users to create custom user experiences in the Blazor DataGrid using a [wide range of template options](https://blazor.syncfusion.com/documentation/datagrid/column-template). ### Attractive customizable themes Cutting-edge design with built-in themes: Fluent, Tailwind CSS, Bootstrap, Material, Fabric, and more. Utilize the [online Theme Studio tool](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) to customize themes easily. ### Easy export and printing [Export the DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid/excel-export) in various file formats, including Excel, [PDF](https://blazor.syncfusion.com/documentation/datagrid/pdf-export), and CSV. [Print](https://blazor.syncfusion.com/documentation/datagrid/print) all the rows, regardless of the number of pages, as well as just the currently viewed page. ### Globalization and localization [Enable users from different locales](https://blazor.syncfusion.com/documentation/datagrid/global-local) to use the control by formatting dates, currency, and numbering to suit preferences. ## AI-ready grid for smarter data analysis Build smarter Blazor applications with a DataGrid that supports AI features out of the box. Add semantic search and anomaly detection to uncover insights and improve data reliability. - Semantic search: Connect your natural language processing (NLP) model to enable natural language queries, eliminating the need for exact keywords. - [See how to add semantic search](https://blazor.syncfusion.com/demos/datagrid/semantic-filtering?theme=bootstrap5) - Anomaly detection: Integrate machine learning (ML) services to identify irregular trends and prevent data issues. - [See how to add anomaly detection](https://blazor.syncfusion.com/demos/datagrid/ai-anomaly-detection?theme=bootstrap5) ## Blazor DataGrid code example Easily [get started with the Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app) using a few simple lines of C# code, as demonstrated below. Also explore this [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5), which shows you how to render and configure the control. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/BtVUDFsbqVrzNTbF) - razor ## Adaptive UI layout The Blazor DataGrid user interface is customized and redesigned for great views and usability on small screens. Its features include filter, sort, search, column chooser, column menu, pager dropdown, and edit dialogs that are adaptive to the screen size and render row elements vertically. ## Columns Defines the grid structure with column definitions and templates, along with formatting, auto-generation, column resizing, reordering, freezing, and spanning. - [More details on column behaviors](https://www.syncfusion.com/blazor-components/blazor-datagrid/column) ## Paging Displays data in pages with a built-in pager, support for custom pager UI, and [on-demand data loading](https://support.syncfusion.com/kb/article/10781/blazor-grid-load-data-on-demand). - [More details on paging features](https://www.syncfusion.com/blazor-components/blazor-datagrid/paging) ## Sorting Allows sorting of rows by column values, including ascending and descending order, multi-column sorting, and custom sorting logic. - [More details on sorting feature](https://www.syncfusion.com/blazor-components/blazor-datagrid/sorting) ## Filtering Enables filtering of records based on conditions, including Excel-style filtering, menu and checkbox filtering, and custom filter logic. - [More details on filtering features](https://www.syncfusion.com/blazor-components/blazor-datagrid/filtering) ## Selection Supports row and cell selection with single and multiple selection options, keyboard interaction, and programmatic control. - [More details on selection features](https://www.syncfusion.com/blazor-components/blazor-datagrid/selection) ## Editing The Blazor DataGrid provides full support for create, read, update, and delete operations (CRUD). In addition to built-in editor components to edit a particular column value, custom editor components can be created using templates. With the help of a data manager, you can perform editing operations with an array collection or remote data service. - [More details on editing feature](https://www.syncfusion.com/blazor-components/blazor-datagrid/editing) ## Grouping Group data by one or more columns. - [More details on grouping features](https://www.syncfusion.com/blazor-components/blazor-datagrid/grouping) ## Aggregation Display summarized values for columns. - [More details on aggregation features](https://www.syncfusion.com/blazor-components/blazor-datagrid/aggregation) ## Row and column spanning Merge cells across rows or columns. ## Frozen rows and columns Fix rows or columns while scrolling. ## Sticky header The Blazor DataGrid header can be in a fixed position when scrolling the document vertically to visualize the data grid content at the same time as the column header. ## Row drag and drop Move rows within or across grids. ## Master-detail grid Display related detail data for selected records. ## Blazor live DataGrid Supports frequent data updates efficiently. ### Row height Row height is a major factor when displaying a large number of records in the viewport. It is easily customizable and the row height can be set conditionally. ### Copy to clipboard The clipboard allows users to copy selected rows or cells’ data into it. Use the Ctrl+C and Ctrl+Shift+H key combinations to copy data with and without headers, respectively. ### Context menu Perform various actions in a Blazor DataGrid using the pop-up menu that appears when a cell, header, or pager is right-clicked. In addition to default menu items, custom context menu items can be added. ### Width and height Set the width and height properties to change the size of a data grid. When the content overflows the grid element, horizontal and vertical scrollbars will appear. To fill the data grid’s parent container, simply set the height and width to 100%. ### Stacked headers Stacked headers allow grouping and visualizing column headers in a stacked manner. The number of columns that can be stacked is unlimited. Perform all Blazor DataGrid actions even when the columns are stacked. ### Tooltips Enhance the user experience with tooltips that support rich content in the Blazor DataGrid. Display images, icons, and custom components alongside plain text for more contextual and visually engaging interactions that improve clarity and usability within the grid interface. ### Keyboard navigation Supports full keyboard interaction. ### Screen reader Implements WAI-ARIA standards. ### Right to left (RTL) Supports right-to-left layouts. ## Mobile-optimized and touch-friendly The Blazor DataGrid has a highly responsive layout and a finely optimized design for desktops, tablets, and smartphones. ### Touch support User-friendly touch gestures and an interactive UI design help produce the best user experience. All Blazor DataGrid features work on touch devices with zero configuration. ### Responsive pager The Blazor DataGrid pager changes its complete UI responsively based on the grid dimensions. Its optimized design provides the best UI interaction on different devices. ## Other supported frameworks The DataGrid is also available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React DataGrid](https://www.syncfusion.com/react-components/react-data-grid) - [Angular Grid](https://www.syncfusion.com/angular-components/angular-data-grid) - [JavaScript DataGrid](https://www.syncfusion.com/javascript-ui-controls/js-data-grid) - [Vue Grid](https://www.syncfusion.com/vue-components/vue-grid) ## Supported browsers Is compatible with all modern web browsers, including Chrome, Firefox, Edge, and Safari, and Opera. --- title: Blazor TreeGrid - Lightning Fast, Edit & Sort | Syncfusion description: Blazor TreeGrid is a high-performance that visualizes self-referential hierarchical (tree-like structure) data with a rich set of features. image: "https://ft.syncfusion.com/featuretour/ft-og-images/blazor/blazor-tree-grid.webp" url: "https://www.syncfusion.com/blazor-components/blazor-tree-grid" --- # Blazor TreeGrid - High-performance Component - Load large amounts of data by dynamically loading child data on demand. - Include flexible UI interactions like expanding and collapsing parent records, dialog editing, and more. - Attractive UI appearance with built-in themes such as fabric, bootstrap, etc. ## Overview The Blazor TreeGrid is a feature-rich component used to visualize self-referential hierarchical (tree-like structure) data effectively in a tabular format. Its rich feature set includes many functionalities like data binding, editing, sorting, filtering, paging, aggregating rows, and exporting to Excel, CSV, and PDF formats. ### High performance Display data hierarchically, its optimized design provides high performance and [load millions of records](https://www.syncfusion.com/blazor-components/blazor-tree-grid/performance) in just a few seconds. ### Seamless data binding Bind data seamlessly with various [local and remote data sources](https://blazor.syncfusion.com/documentation/treegrid/data-binding) such as JSON, OData, WCF, and RESTful web services with the help of a data manager. ### Self-referential, hierarchical grid Tree Grid is designed to visualize  [self-referential and hierarchical](https://ej2.syncfusion.com/vue/documentation/treegrid/data-binding/local-data) in a tabular format. This in turns displays the relationship between parent and child records. ### Flexible editing The Blazor Tree Grid performs [create, read, update, and delete operations (CRUD)](https://www.syncfusion.com/blazor-components/blazor-tree-grid/editing) with observable data. It edits with an Array of JSON or remote data service with the data manager. ### Adapts to any resolution The Tree Grid has a [highly responsive layout](https://blazor.syncfusion.com/documentation/treegrid/adaptive-layout) and an optimized design for desktops, touch screens, and smart phones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Create your own template designs Using templates, users can create a custom UI in the Blazor Tree Grid based on their application need using a [wide range of template](https://blazor.syncfusion.com/documentation/treegrid/columns/column-template) options. ### Attractive customizable themes Cutting edge design with 5+ built-in themes such as Fluent, Tailwind CSS, Bootstrap, Material, Fabric, and more. Utilize the [online Theme Studio tool](https://blazor.syncfusion.com/themestudio/?theme=fluent) to customize themes of Tree Grid easily. ### Globalization and localization [Enables users from different locales](https://blazor.syncfusion.com/documentation/treegrid/globalization) to use the Tree Grid by formatting dates, currency, and numbering to suit their preferences. ## Blazor Tree Grid Code Example Easily get started with the Blazor Tree Grid using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor TreeGrid Example](https://blazor.syncfusion.com/demos/tree-grid/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Blazor Tree Grid. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/rNLpZVDCqpCNQKSH) - razor ## Adaptive UI layout The Blazor Tree Grid user interface is customized and redesigned for great views and usability on small screens. Filter, search, and edit dialogs are adaptive to the screen size. ## Column Columns define the schema of a data source in Blazor Tree Grid component. It supports formatting, column definitions, freezing columns, column spanning, text wrapping, column chooser, column menu, column reorder, and other features. - [More details on column behaviors](https://www.syncfusion.com/blazor-components/blazor-tree-grid/column) ## Paging Through paging, a segment of data can be viewed from the assigned data source. The Blazor Tree Grid offers built-in pager UI with options to customize its entire UI. It also has an [on-demand paging](https://blazor.syncfusion.com/documentation/treegrid/data-binding#remote-service-binding) mode for effective data retrieval from remote web services. - [More details on paging feature](https://www.syncfusion.com/blazor-components/blazor-tree-grid/paging) ## Sorting The Blazor Tree Grid allows users to sort a column by simply clicking on the header. A Ctrl + header click performs multi-sorting. Allows sorting data either in the ascending or descending order. ## Filtering Filtering helps view specific or related records that meet a given filtering criteria. It supports various filter types that include powerful Excel-like filter. The Blazor Tree Grid filter allows users to choose appropriate filter types, define their own custom filtering logic, and customize the filtering UI based on their application needs. Filtering with related parent or child records can be defined. - [More details on filtering feature](https://www.syncfusion.com/blazor-components/blazor-tree-grid/filtering) ## Selection The Blazor TreeGrid allows selecting rows or cells. One or more rows or cells can also be selected by holding Ctrl or Command, or programmatically. - [More details on selection feature](https://www.syncfusion.com/blazor-components/blazor-tree-grid/selection) ## Row Rows in Tree Grid represents each data object information from the data source. It supports expanding / collapsing child rows, reordering of rows, indent / outdent rows to change its hierarchy levels and much more features. - [More details on row behaviors](https://www.syncfusion.com/blazor-components/blazor-tree-grid/row) ## Editing The Blazor Tree Grid provides full support to create, read, update, and delete (CRUD) operations. In addition to built-in editor components to edit a particular column value, using template support users can create custom editor components that suit their application needs. It performs editing operations with a list of business objects or remote data service with the help of the data manager. - [More details on editing feature](https://www.syncfusion.com/blazor-components/blazor-tree-grid/editing) ## Row drag and drop The Blazor TreeGrid allows users to drag and drop rows within the same or another tree grid. This functionality is especially useful for reorganizing data and creating a more intuitive user experience. ## Aggregation Aggregates for column values can easily be displayed using the aggregate feature. Aggregates can be customized to show values in individual summary rows. ## Frozen columns Frozen columns are visible at the left or right or both the sides of the tree grid and make the remaining grid content scrollable. It is mainly used to compare cell values. Users can include or exclude the columns from being frozen, by interacting with the frozen line separators between the columns. ### Excel, PDF, CSV export Easily export the Blazor Tree Grid component in file formats such as Excel, PDF, or CSV. ### Print Allows users to print data either by using the print option from the toolbar or programmatically. Print all the rows of a Blazor Tree Grid regardless of the number of pages or print the currently viewed page alone. ### Row height Row height is a major factor when displaying the number of records in the view port, and it is effortlessly customizable based on the application’s UI requirement. It is also possible to set row height conditionally. ### Copy to clipboard The clipboard provides an option to copy selected rows or cells’ data into the clipboard. Use Ctrl+C and Ctrl+Shift+H key combinations to copy data with and without headers, respectively. ### Context menu The context menu improves user action with Blazor Tree Grid using popup menu. It appears when the cell, header, or pager is right clicked. In addition to built-in default menu items, it allows you to add custom context menu items. ### Width and height Allows changing the Blazor Tree Grid size by setting the width and height properties. Horizontal and vertical scrollbars will appear when the content overflows the Blazor Tree Grid element. For the Blazor Tree Grid to fill its parent container, the user must simply set the height and width to 100%. ### Stacked headers Stacked headers allow grouping and visualizing column headers in a stacked manner. There is no limit to the number of columns that can be stacked. Allows the user to perform all Blazor TreeGrid actions, even when the columns are stacked. ### Keyboard navigation Blazor Tree Grid ensures that every cell is keyboard accessible. Major features like expanding or collapsing child rows, sort, select, and edit can be performed using keyboard commands alone; no mouse interaction is required. This helps in creating highly accessible applications using this component. ### Screen reader The Blazor TreeGrid has complete WAI-ARIA accessibility support. The Blazor Tree Grid UI includes high-contrast visual elements, helping visually impaired people to have the best viewing experience. Also, the valid UI descriptions are easily accessible through assistive technologies such as screen readers. ### Right to left (RTL) Right-to-left rendering allows displaying the text and layout of the Tree Grid from right to left. This improves the user experience and accessibility for RTL languages. Load large amounts of data 55+ interactive demos ## Other supported frameworks The Tree Grid is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React Tree Grid](https://www.syncfusion.com/react-components/react-tree-grid) - [Angular Tree Grid](https://www.syncfusion.com/angular-components/angular-tree-grid) - [JavaScript Tree Grid](https://www.syncfusion.com/javascript-ui-controls/js-tree-grid) - [Vue Tree Grid](https://www.syncfusion.com/vue-components/vue-tree-grid) ## Supported browsers The Blazor Tree Grid works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [Documentation](https://blazor.syncfusion.com/documentation/treegrid/getting-started) [Enhancing Data Visualization with a Nested Grid UI in Blazor TreeGrid](https://www.syncfusion.com/blogs/post/nested-grid-in-blazor-treegrid) [Explore the Interactive Features of Blazor TreeGrid in Action](https://www.youtube.com/watch?v=Whf0GrVAtqI&t=6s) ##### Columns | Blazor TreeGrid | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-tree-grid/column ## Overview Columns define the schema of data source in Blazor Tree Grid component. It supports formatting, column definitions, freezing columns, column spanning, text wrapping, column chooser, column menu, and other important features. ## Define columns In a Blazor Tree Grid, users can explicitly define the required columns. Additionally, the appearance of these columns can be enhanced by setting the header text, text alignment, cell value format, and width. ## Auto size Users can interactively auto size column width to show its full content by double clicking on column borders. Blazor Tree Grid also supports triggering auto sizing to the required columns programmatically. - [Columns auto sizing documentation](https://blazor.syncfusion.com/documentation/treegrid/columns#autofit-specific-columns) ## Cell styling Blazor Tree Grid supports customization of cell styles programmatically or by using CSS. - [Cell styling documentation](https://blazor.syncfusion.com/documentation/treegrid/cell#customize-cell-styles) ## Text wrap Wraps the Blazor Tree Grid cell text to the next line when it is too large to fit a cell. Users can wrap the header or content cell`s text by setting the available wrap mode options. - [Example for text wrap](https://blazor.syncfusion.com/demos/tree-grid/auto-wrap) - [Text wrap documentation](https://blazor.syncfusion.com/documentation/treegrid/cell#auto-wrap) ## Column and row spanning The column and row can automatically merge adjacent cells that contain the same value. Identical values are displayed as a single, unified cell across both rows and columns, improving readability and reducing redundancy in hierarchical data. [Blazor demo for Tree Grid with row and column spanning](https://blazor.syncfusion.com/demos/tree-grid/row-and-column-spanning) ## Column chooser The column chooser provides a list of column names paired with check boxes, allowing users to easily toggle visibility. This enables them to control column visibility through an interactive UI. - [Example for column chooser](https://blazor.syncfusion.com/demos/tree-grid/columnchooser) - [Column chooser documentation](https://blazor.syncfusion.com/documentation/treegrid/columns/column-chooser) ## Reorder Reorder Blazor Tree Grid columns either through user interaction or programmatically. Simply dragging a column header to the desired column position will reorder the columns of a Tree Grid. - [Example for column reorder](https://blazor.syncfusion.com/demos/tree-grid/reorder) - [Column Reorder documentation](https://blazor.syncfusion.com/documentation/treegrid/columns/column-reorder) ## Resize Users can resize columns by dragging the right corner of the column header. A scroll bar will appear when the content width of the Tree Grid exceeds the width of the element. - [Example for column resize](https://blazor.syncfusion.com/demos/tree-grid/resizing) - [Column Resize documentation](https://blazor.syncfusion.com/documentation/treegrid/columns/column-resizing) ## Column menu Allows performing various column-based actions with the help of Blazor Tree Grid column menu. Menu items can also be customized to list only the preferred actions. - [Example for column menu](https://blazor.syncfusion.com/demos/tree-grid/column-menu) - [Column menu documentation](https://blazor.syncfusion.com/documentation/treegrid/columns/column-menu) ## Checkbox column Users can select multiple records by using the checkbox column. It is also possible to choose records hierarchically with checkboxes. If a parent’s checkbox is checked, the child checkboxes will also be checked. - [Documentation for checkbox column](https://blazor.syncfusion.com/documentation/treegrid/columns/columns#checkbox-column) Load large amounts of data 55+ interactive demos ##### Blazor TreeGrid RESTful Data Binding | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-tree-grid/data-binding ## Overview The Blazor TreeGrid data binding feature supports to bind data seamlessly with various local and remote data sources such as IEnumerable/List, RESTful services, OData services, and WCF services. It uses the data manager to handle data and supports customizing data requests and processing. ## List binding Bind the Tree Grid with a list of business objects or IEnumerable collection. The Blazor Tree Grid is a generic component which needs a model type to bind data. In case the model type is unknown during compile type, it binds the list using ExpandoObject or DynamicObject. - [List binding documentation](https://blazor.syncfusion.com/documentation/treegrid/data-binding#list-binding) ## Remote data binding Binding the Blazor Tree Grid with RESTful services allows data from the services to be consumed using the data manager. It supports various data adaptors such as OData, ODataV4, URL, and Web API for working with a particular data service - [Web API binding documentation](https://blazor.syncfusion.com/documentation/treegrid/data-binding#remote-service-binding) - [Example for remote data binding](https://blazor.syncfusion.com/demos/tree-grid/remote-data) Load large amounts of data 55+ interactive demos ##### Blazor Editable TreeGrid | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-tree-grid/editing ## Overview The Blazor Editable Tree Grid / Table provides full support to create, read, update, and delete operations (CRUD). In addition to built-in editor components to edit a particular column value, using template support users can use custom editor components that suit their application needs. It performs editing operations with list of business objects or remote data service with the help of data manager. ## Edit modes The Blazor Editable Tree Grid / Table supports various edit modes such as cell, dialog, and batch edit. These provide an interactive UI to add and edit records. In addition, editing can be performed programmatically. - [Example for dialog editing](https://blazor.syncfusion.com/demos/tree-grid/dialog-editing) - [Dialog editing documentation](https://blazor.syncfusion.com/documentation/treegrid/editing/dialog-editing) - [Example for batch editing (cell editing)](https://blazor.syncfusion.com/demos/tree-grid/batch-editing) - [Cell editing documentation](https://blazor.syncfusion.com/documentation/treegrid/editing/cell-editing) ## Bulk editing Bulk editing allows you to save the added, edited, and deleted records in a single request. This feature is used in the Tree Grid by enabling the batch editing mode. This provides an Excel-like editing experience and saves all the changes. - [Example for batch editing](https://blazor.syncfusion.com/demos/tree-grid/batch-editing) - [Batch editing documentation](https://blazor.syncfusion.com/documentation/treegrid/editing/batch-editing) ## Custom editor/customizable edit UI The editor for a Tree Grid cell can be specified by providing the edit type. The preferred editor can also be defined for specific columns. - [Custom editor documentation](https://blazor.syncfusion.com/documentation/treegrid/editing/cell-edit-types#cell-edit-template) - [Example for custom editor](https://blazor.syncfusion.com/demos/tree-grid/cell-edit-template?theme=fluent) ## Validation While updating cells or rows, the Tree Grid validates user inputs. This helps users to improve overall data quality by validating user input for accuracy and completion. The users can also customize validation criteria and message according to their requirement. - [Validation documentation](https://blazor.syncfusion.com/documentation/treegrid/column-validation) ## AddRow position New records can be inserted in different positions such as below, above, child to the selected record, and top or bottom of the data source. - [Addrow position documentation](https://blazor.syncfusion.com/documentation/treegrid/editing/edit#adding-row-position) Load large amounts of data 55+ interactive demos ##### Blazor Filterable TreeGrid | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-tree-grid/filtering ## Overview The Blazor Tree Grid filtering helps view particular or related records, which meet a given filtering criteria.It supports various filter types that include powerful Excel-like filter. The Blazor Tree Grid filter allows users to choose appropriate filter type, define their own custom filtering logic, and customize the filtering UI based on their application needs. Filtering with related parent or child records can be defined. ## Powerful excel-like filter The Excel-like filter helps create complex filter criteria for a column by allowing users to select possible filter values from a check box list. Additionally, users can build complex filter criteria using advanced filter option. - [Excel filter example](https://blazor.syncfusion.com/demos/tree-grid/excel-filter?theme=fluent) - [Excel filter documentation](https://blazor.syncfusion.com/documentation/treegrid/filtering/excel-like-filter) ## Custom filter/extensible filter UI Filter UI and logic for a column is applied based on the column type. It is also possible for the users to define their own custom filter UI and filtering logic for a column to suit their application needs. - [Custom filter UI documentation](https://blazor.syncfusion.com/documentation/treegrid/filtering/filter-bar#filter-bar-template-with-custom-component) - [Example for custom filter](https://blazor.syncfusion.com/demos/tree-grid/filter-bar-template?theme=fluent) ## Filter hierarchy modes Allows users to view parent or child records or both relative records along with the filtered records in a Tree Grid component. Helps users to be aware of record’s hierarchy even when filtering. - [Documentation for filtering with hierarchy](https://blazor.syncfusion.com/documentation/treegrid/filtering/filtering#filter-hierarchy-modes) ## Search Search Tree Grid rows using the built-in search box in the toolbar or programmatically. Using the built-in settings, search behavior can be customized. - [Searching example](https://blazor.syncfusion.com/demos/tree-grid/search) - [Searching documentation](https://blazor.syncfusion.com/documentation/treegrid/searching) Load large amounts of data 55+ interactive demos ##### Blazor TreeGrid Paging | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-tree-grid/paging ## Overview Through Blazor Tree Grid paging, a segment of data can be viewed from the assigned data source. The Blazor Tree Grid offers built-in pager UI with options to customize its entire UI. It also has an [on-demand paging](https://blazor.syncfusion.com/documentation/treegrid/data-binding#remote-service-binding) mode for effective data retrieval from remote web services. ## Load On-demand The pager UI of the Blazor TreeGrid requests data on-demand when navigating to another page. Using simple properties, users can customize the pager. ## Page size dropdown Allows you to change the page size on the fly by using the page size dropdown in the pager. The Blazor Tree Grid allows customization of values in the page size dropdown. - [Example for page size dropdown](https://blazor.syncfusion.com/demos/tree-grid/paging) - [Page size drop down documentation](https://blazor.syncfusion.com/documentation/treegrid/paging#pager-with-page-size-dropdown) ## Page Size modes Two behaviors are available in Tree Grid paging to display certain number of records in a current page. It is based on individual records count or the root level records count. - [Page size mode documentation](https://blazor.syncfusion.com/documentation/treegrid/paging#page-size-mode) Load large amounts of data 55+ interactive demos ##### High Performance Blazor TreeGrid | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-tree-grid/performance ## Overview The Blazor Tree Grid has optimized design for high-performance. It loads thousands of records in just a few seconds without any performance degradation with the help of row and column virtualization. ## Virtualization Blazor Tree Grid virtualization is a technique that limits UI rendering to just the parts that are currently visible. This functionality helps improve performance on component’s initial rendering time. ### Row virtualization Row virtualization in Blazor Tree Grid allows loading and rendering rows only in the content viewport. It renders rows dynamically when scrolling vertically. - [Row virtualization documentation](https://blazor.syncfusion.com/documentation/treegrid/virtualization#row-virtualization) - [Example for row virtualization](https://blazor.syncfusion.com/demos/tree-grid/virtual-scrolling?theme=fluent) ### Column virtualization Column virtualization allows the columns of the data source to be virtualized and renders them in the viewport. Scroll horizontally to view more grid columns. - [Column virtualization documentation](https://blazor.syncfusion.com/documentation/treegrid/virtualization#column-virtualization) Load large amounts of data 55+ interactive demos ##### Row | Blazor TreeGrid | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-tree-grid/row ## Overview Rows in Tree Grid represents each task or data object information from the data source. It supports expanding/collapsing child rows, reordering of rows, indent/outdent rows to change its hierarchy levels and much more features. ## Expand and collapse parent rows Users can expand and collapse parent rows at any time to view information when needed. All the rows or only specific rows can be collapsed programmatically at initial rendering. ## Row reordering Rows can be reordered by drag and drop action to change its position and hierarchy levels. A child row from a parent row can be reordered as sibling to the same parent row or as child to any other parent row. - [Example for row reordering](https://blazor.syncfusion.com/demos/tree-grid/row-drag-and-drop) - [Row reordering documentation](https://blazor.syncfusion.com/documentation/treegrid/rows/row-drag-and-drop) ## Row and column spanning The row and column can automatically merges adjacent cells that contain the same value. Identical values are displayed as a single, unified cell across both rows and columns, improving readability and reducing redundancy in hierarchical data. [Blazor demo for Tree Grid with row and column spanning](https://blazor.syncfusion.com/demos/tree-grid/row-and-column-spanning) ## Row template and detail template Users can create custom UI for row elements in the table of a TreeGrid. Alternatively, additional information about a data row can also be displayed beneath each row. - [Example for row template](https://blazor.syncfusion.com/demos/tree-grid/tree-grid-row-template) - [Row template documentation](https://blazor.syncfusion.com/documentation/treegrid/rows/row-template) - [Example for detail template](https://blazor.syncfusion.com/demos/tree-grid/tree-grid-detail-template) - [Detail template documentation](https://blazor.syncfusion.com/documentation/treegrid/rows/detail-template) Load large amounts of data 55+ interactive demos ##### Single, Multi & Checkbox Selection | Blazor TreeGrid | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-tree-grid/selection ## Overview The Blazor Tree Grid allows selecting rows or cells. One or more rows or cells can also be selected by holding Ctrl or Command or Shift, or programmatically. ## Row selection The Blazor Tree Grid allows you to select a range of rows or a single row by just clicking or tapping the row. To perform multi-selection, press and hold CTRL or SHIFT to select the desired row or range of rows. - [Example for row selection](https://blazor.syncfusion.com/demos/tree-grid/selection) - [Row selection documentation](https://blazor.syncfusion.com/documentation/treegrid/selection) ## Cell selection The Blazor Tree Grid allows you to select a range of cells or a single cell by just clicking or tapping the cell. To perform multi-selection, press and hold CTRL or SHIFT to select the desired cell or range of cells. The two types of cell selection modes are flow and box. - [Cell selection documentation](https://blazor.syncfusion.com/documentation/treegrid/selection#cell-selection) - [Example for cell selection](https://blazor.syncfusion.com/demos/tree-grid/selection) ## Drag selection Allows you to select a range of rows or cells by simply dragging the pointer over the cells by mouse or touch. - [Drag selection documentation](https://blazor.syncfusion.com/documentation/treegrid/selection#drag-selection) ## Checkbox selection Users can select multiple Tree Grid records with the help of a checkbox in each row. The selection persists even after performing any action in the Tree Grid. It also provides an option to select or deselect all the rows in a Tree Grid using the checkbox in the corresponding column header. - [Checkbox selection example](https://blazor.syncfusion.com/demos/tree-grid/checkbox-selection) - [Checkbox selection documentation](https://blazor.syncfusion.com/documentation/treegrid/selection#checkbox-selection) Load large amounts of data 55+ interactive demos ##### Blazor Pivot Table | Blazing-Fast Pivot Grid | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-pivot-table # Blazor Pivot Table - Feature-Rich Pivot Table Component - Organize and summarize pivot data in grids and charts. - Load large volumes of data with high performance. - Easily filter, sort, aggregate, and group pivot data. - View detailed or abstract data using drill down or up. - Experience seamless interaction and editing capabilities. ## Overview The Blazor Pivot Table is a powerful control used to organize and summarize business data and display the result in a cross-table format. It includes major functionalities such as data binding, drilling up and down, Excel-like filtering and sorting, editing, Excel and PDF exporting, several built-in aggregations, a field list, and calculated fields. A high volume of pivot data can be loaded without any performance degradation using row and column virtualization. ### High performance This is a powerful data visualization tool designed for fast-paced performance when loading millions of records in just a second. ### Seamless data binding Bind data seamlessly from [local and remote sources](https://blazor.syncfusion.com/documentation/pivot-table/data-binding) including: file formats ([JSON](https://blazor.syncfusion.com/documentation/pivot-table/data-binding#json), [CSV](https://blazor.syncfusion.com/documentation/pivot-table/data-binding#csv)), service protocols ([OData](https://blazor.syncfusion.com/documentation/pivot-table/data-binding#binding-with-odata-services), [RESTful APIs](https://blazor.syncfusion.com/documentation/pivot-table/data-binding#web-api)), SQL databases ([MySQL](https://blazor.syncfusion.com/documentation/pivot-table/connecting-to-data-source/mysql), [Microsoft SQL Server](https://blazor.syncfusion.com/documentation/pivot-table/connecting-to-data-source/microsoft-sql-server), [PostgreSQL](https://blazor.syncfusion.com/documentation/pivot-table/connecting-to-data-source/postgresql), [Oracle](https://blazor.syncfusion.com/documentation/pivot-table/connecting-to-data-source/oracledb)), NoSQL databases ([MongoDB](https://blazor.syncfusion.com/documentation/pivot-table/connecting-to-data-source/mongodb), [Elasticsearch](https://blazor.syncfusion.com/documentation/pivot-table/connecting-to-data-source/elasticsearch)), and cloud data warehouses like [Snowflake](https://blazor.syncfusion.com/documentation/pivot-table/connecting-to-data-source/snowflakedb). ### Flexible editing Users can perform actions on raw data at runtime, including [create, read, update, and delete](https://blazor.syncfusion.com/documentation/pivot-table/editing). Through an interactive user interface, the control provides several edit modes, including inline, dialog, batch, and column. ### Integration with charts Users can easily [integrate the Pivot Table](https://blazor.syncfusion.com/documentation/pivot-table/pivot-chart) with independently rendered pivot data. It has support for more than 20 chart types. ### Conditional formatting Users can easily [change a Pivot Table cell value’s appearance](https://blazor.syncfusion.com/documentation/pivot-table/conditional-formatting)(background color, font color, font family, and font size) as required. ### Adapts to any resolution The Pivot Table has a highly responsive layout and an optimized design for desktops, tablets, and smartphones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Attractive, customizable themes Create cutting-edge design with several built-in themes, such as Fluent, Tailwind CSS, Bootstrap, Material, and Fabric. Utilize the [online Theme Studio tool](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) to customize themes easily. ### Globalization and localization [Enable users from different locales](https://blazor.syncfusion.com/documentation/pivot-table/globalization) to use the component by formatting dates, currency, and numbering to suit preferences. ## Blazor Pivot Table code example Get started with the Blazor Pivot Table using a few simple lines of C# code, as demonstrated in the following. Also, explore this [Blazor Pivot Table example](https://blazor.syncfusion.com/demos/pivot-table/default-functionalities?theme=bootstrap5), which shows you how to render and configure the Pivot Grid in Blazor. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/LtBztWANfmpFgLKx) - razor ## Classic layout The classic (tabular) layout is designed to enhance data visibility by presenting information in a traditional table format. In this layout, each row label is displayed distinctly at various levels across separate columns for clarity and better organization. This structured approach simplifies the analysis of datasets, making it easier to interpret relationships and trends within the data through a detailed, organized, and user-friendly table format. - [Classic layout example](https://blazor.syncfusion.com/demos/pivot-table/classic-layout?theme=fluent2) - [Classic layout documentation](https://blazor.syncfusion.com/documentation/pivot-table/classic-layout) ## Pivot chart A Blazor pivot chart can easily be integrated with pivot data rendered independently. Pivot Table includes functionality for plotting more than 20 types of pivot charts. Features include zooming, panning, crosshairs, trackball, events, selection, and tooltips. Highly interactive field list options are available for generating reports on top of the relational data dynamically. - [More details on pivot chart](https://www.syncfusion.comblazor-pivot-table/pivot-chart) ## Virtual scrolling Large amounts of data can be divided and displayed in the rows and columns of the current viewport using the virtual scrolling feature. Users can navigate to a desired view by scrolling the vertical and horizontal scrollbars. - [Virtual scrolling example](https://blazor.syncfusion.com/demos/pivot-table/virtual-scrolling?theme=bootstrap5) - [Virtual scrolling documentation](https://blazor.syncfusion.com/documentation/pivot-table/virtual-scrolling) ## Paging Large amounts of data can be divided and displayed page by page with the paging feature. The pager UI allows users to navigate to a desired page using the navigation buttons or an input text box. Row and column pager sizes can be changed independently at runtime. Furthermore, users can toggle the position of the row and column pagers, modify their visibility, and visualize them using a compact view mode. - [Paging example](https://blazor.syncfusion.com/demos/pivot-table/paging) - [Paging documentation](https://blazor.syncfusion.com/documentation/pivot-table/paging) ## Pivot Table field list and grouping The Blazor Pivot Table [field list](https://blazor.syncfusion.com/documentation/pivot-table/field-list) and [group fields](https://blazor.syncfusion.com/documentation/pivot-table/grouping-bar) options are automatically populated with fields from the bound data source. They allow end users to drag, filter, and sort fields, as well as create pivot reports at runtime. - [Field list example](https://blazor.syncfusion.com/demos/pivot-table/field-list?theme=bootstrap5) - [Grouping bar example](https://blazor.syncfusion.com/demos/pivot-table/grouping-bar?theme=bootstrap5) ## OLAP data binding The Pivot Table can be connected to an OLAP cube, and its result can be visualized in both tabular and graphical formats. - [More details on OLAP data binding](https://www.syncfusion.comblazor-pivot-table/olap) ## Defer layout update Users can refresh the component on demand instead of during every UI interaction in the Blazor Pivot Table. - [Defer layout update example](https://blazor.syncfusion.com/demos/pivot-table/defer-layout-update?theme=bootstrap5) - [Defer layout update documentation](https://blazor.syncfusion.com/documentation/pivot-table/defer-layout-update) ## Drill down and up The built-in drill-down (expand) and drill-up (collapse) capabilities let users visualize data in detailed views and abstract views, respectively. By default, the data is displayed in a grouped manner. - [Drill operation documentation](https://blazor.syncfusion.com/documentation/pivot-table/drill-down) ## Editing and updating Use create, read, update, and delete operations for raw data at runtime and update changes to the underlying data source, reflecting the information in all corresponding cells. The Blazor Pivot Table component supports various edit modes such as inline, dialog, batch, and column edit through an interactive UI. - [Editing and updating example](https://blazor.syncfusion.com/demos/pivot-table/editing?theme=bootstrap5) - [Editing and updating documentation](https://blazor.syncfusion.com/documentation/pivot-table/editing) ## Filtering Built-in member filtering and Excel-like filters with advanced filtering options can be used to filter and view data as required. It is also possible to filter data programmatically in the Blazor Pivot Table. ## Member filtering Filtering members in a pivot table allows users to filter data displayed based on values in the row or column axes. - [Normal filtering example](https://blazor.syncfusion.com/demos/pivot-table/default-filtering?theme=bootstrap5) - [Normal filtering documentation](https://blazor.syncfusion.com/documentation/pivot-table/filtering#member-filtering) ## Label filtering Use Excel-like filtering options across column and row headers based on label text, date, or number. - [Label filtering example](https://blazor.syncfusion.com/demos/pivot-table/label-filtering?theme=bootstrap5) - [Label filtering documentation](https://blazor.syncfusion.com/documentation/pivot-table/filtering#label-filtering) ## Value filtering Use Excel-like filtering options across column and row headers based on grand total values. - [Value filtering example](https://blazor.syncfusion.com/demos/pivot-table/value-filtering?theme=bootstrap5) - [Value filtering documentation](https://blazor.syncfusion.com/documentation/pivot-table/filtering#value-filtering) ## Sorting Users can use sorting to order rows and columns based on labels or values. ### Header sorting Order the column and row header text in ascending or descending order. - [Header sorting example](https://blazor.syncfusion.com/demos/pivot-table/default-sorting?theme=bootstrap5) - [Header sorting documentation](https://blazor.syncfusion.com/documentation/pivot-table/sorting) ### Column sorting Column sorting, also known as value sorting, orders the column values in ascending or descending order. It is performed by clicking the header of the column to be sorted. - [Column sorting example](https://blazor.syncfusion.com/demos/pivot-table/value-sorting?theme=bootstrap5) - [Column sorting documentation](https://blazor.syncfusion.com/documentation/pivot-table/sorting#value-sorting) ## Aggregation Users can perform calculations on a group of values using the aggregation option. By default, values are added together. The other aggregation types are: average, minimum, maximum, count, distinct count, product, index, population standard deviation, sample standard deviation, population variance, sample variance, running totals, difference from, percent of difference from, and percent of grand total. - [Aggregation example](https://blazor.syncfusion.com/demos/pivot-table/aggregation?theme=bootstrap5) - [Aggregation documentation](https://blazor.syncfusion.com/documentation/pivot-table/aggregation) ## Calculated fields Calculated or unbound fields generate unique fields with users’ calculated values by executing a simple, user-defined formula. - [Calculated field example](https://blazor.syncfusion.com/demos/pivot-table/calculated-field?theme=bootstrap5) - [Calculated field documentation](https://blazor.syncfusion.com/documentation/pivot-table/calculated-field) ## Drill through The drillthrough feature easily obtains a list of raw items for a particular value cell or summary cell. - [Drillthrough example](https://blazor.syncfusion.com/demos/pivot-table/drill-through?theme=bootstrap5) - [Drillthrough documentation](https://blazor.syncfusion.com/documentation/pivot-table/drill-through) ## Totals Subtotals and grand totals are calculated automatically by the pivot engine in the component and displayed in the Pivot Table. This helps users make decisions based on the totals. Also, users can show or hide subtotals and grand totals for rows and columns. - [Show or hide totals example](https://blazor.syncfusion.com/demos/pivot-table/show-hide-totals?theme=bootstrap5) - [Show or hide totals documentation](https://blazor.syncfusion.com/documentation/pivot-table/show-hide-totals) ## Conditional formatting Users can define conditions that, when met, format font style, text color, background color, and font size for values and summary cells. - [Conditional formatting example](https://blazor.syncfusion.com/demos/pivot-table/conditional-formatting?theme=bootstrap5) - [Conditional formatting documentation](https://blazor.syncfusion.com/documentation/pivot-table/conditional-formatting) ## Number and date formatting Number and date formatting help transform the appearance of the actual cell values. - [Number formatting documentation](https://blazor.syncfusion.com/documentation/pivot-table/number-formatting) - [Date formatting documentation](https://blazor.syncfusion.com/documentation/pivot-table/how-to/customize-number-and-date-format#date-and-time-formatting) ## Grouping date and number The Blazor Pivot Table component automatically groups dates and numbers so that the date type can be formatted and displayed based on year, quarter, month, day, and more. The number type can be grouped by range, such as 1–5 or 6–10. - [Grouping documentation](https://blazor.syncfusion.com/documentation/pivot-table/grouping) ## Frozen header Users can freeze row and column headers to retain the context of the cell values in the view. ### Resize Change column width at runtime by simply dragging the right-most boundary of the column header. The scroll bar will appear when the content width exceeds the component width. - [Column resize documentation](https://blazor.syncfusion.com/documentation/pivot-table/row-and-column#column-resizing) ### Reorder Users can reorder columns either through user interaction or programmatically. Simply dragging and dropping a column header into the desired column position will reorder the columns. - [Column reorder documentation](https://blazor.syncfusion.com/documentation/pivot-table/row-and-column#reorder) ### Hyperlinks Users can retrieve information about a particular cell on clicking a hyperlinked cell. It later allows them to perform custom operations programmatically. - [Hyperlink example](https://blazor.syncfusion.com/demos/pivot-table/hyperlink?theme=bootstrap5) - [Hyperlink documentation](https://blazor.syncfusion.com/documentation/pivot-table/hyper-link) ### Cell selection Select a range of cells. - [Cell selection example](https://blazor.syncfusion.com/demos/pivot-table/selection?theme=bootstrap5) - [Cell selection documentation](https://blazor.syncfusion.com/documentation/pivot-table/row-and-column#selection) ### Tooltips A tooltip provides basic information about a cell when hovering over it. - [Tooltips documentation](https://blazor.syncfusion.com/documentation/pivot-table/tool-tip) ### Cell templates With cell templates, users can easily add features like images, checkboxes, and text nodes to any cell. - [Cell template documentation](https://blazor.syncfusion.com/documentation/pivot-table/row-and-column#cell-template) ## Toolbars A toolbar enhances user interaction and provides access to frequently used features. These features can include: new report, save report, save as report, rename report, delete report, report list, show grid, show chart, show or hide totals, export reports, and more. - [Toolbar example](https://blazor.syncfusion.com/demos/pivot-table/toolbar?theme=bootstrap5) - [Toolbar documentation](https://blazor.syncfusion.com/documentation/pivot-table/tool-bar) ## Exporting [Export](https://blazor.syncfusion.com/demos/pivot-table/export?theme=bootstrap5) Blazor Pivot Table data to Excel, PDF, and CSV formats. Users can also customize the exported document by adding header, footer, and cell properties like type, style, and position programmatically. - [Export to Excel documentation](https://blazor.syncfusion.com/documentation/pivot-table/excel-export) - [Export to PDF documentation](https://blazor.syncfusion.com/documentation/pivot-table/pdf-export) ## Export to Native Excel PivotTable Users can export the Syncfusion Pivot Table directly to Microsoft Excel’s native PivotTable format, not just as a static table or flattened data. This ensures that all interactive features are preserved, allowing users to fully utilize Excel’s PivotTable functionalities. ### Key advantages: - Native Excel PivotTable: Exports to the actual PivotTable format used by Excel, preserving rows, columns, values, and filters. - Fully interactive in Excel: Continue to sort, filter, expand/collapse groups, and modify field lists just like in your original table. - Reusable layout: Save time by exporting your configured pivot layout for future use or easy sharing. ### Touch support All features will work on touch devices easily. Features such as drilling up, drilling down, filtering, sorting, and report manipulation can be done on the fly. ### Responsiveness Its responsive design allows the control to be viewed on various devices. ### Keyboard navigation The Pivot Table ensures that every cell is keyboard accessible. Major features like sorting, selection, and editing can be performed using keyboard commands alone; no mouse interaction is required. This helps create highly accessible applications using this component. - [Keyboard navigation documentation](https://blazor.syncfusion.com/documentation/pivot-table/accessibility#keyboard-navigation) ### Right to left (RTL) The Pivot Table supports RTL rendering, allowing the text and layout to be displayed from right to left. - [Right to left documentation](https://blazor.syncfusion.com/documentation/pivot-table/globalization#right-to-left-rtl) ## Other supported frameworks The Pivot Table is also available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React Pivot Table](https://www.syncfusion.com/react-components/react-pivot-table) - [Angular Pivot Table](https://www.syncfusion.com/angular-components/angular-pivot-table) - [JavaScript Pivot Table](https://www.syncfusion.com/javascript-ui-controls/js-pivot-table) - [Vue Pivot Table](https://www.syncfusion.com/vue-components/vue-pivot-table) ## Supported browsers The Blazor Pivot Table works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [Documentation](https://blazor.syncfusion.com/documentation/pivot-table/getting-started) [Feature requests and bug reports](https://www.syncfusion.com/feedback/blazor-components?control=pivot-table) [Boost Your Data Analysis: Best Practices for Optimizing Syncfusion Blazor Pivot Table Performance](https://www.syncfusion.com/blogs/post/tips-optimize-blazor-pivot-table) [How to Customize the Pivot Chart in a Blazor Pivot Table](https://www.syncfusion.com/tutorial-videos/blazor/pivot-table?title=how-to-customize-the-pivot-chart-in-a-blazor-pivot-table) [Easily Perform CRUD Actions in a Blazor Pivot Table with SQL Database & Entity Framework](https://www.syncfusion.com/blogs/post/crud-blazor-pivot-table-sql-entity-framework) [How to bind data to the Blazor Pivot Table Using Expando and Dynamic Objects](https://www.syncfusion.com/tutorial-videos/blazor/pivot-table?title=how-to-bind-data-to-the-blazor-pivot-table-using-expando-and) ##### Blazor Pivot Table component connecting OLAP cube | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-pivot-table/olap # OLAP Browser - Slicing & Dicing Multidimensional Data - Connects multidimensional data (OLAP) provided by Microsoft Analysis Services (SSAS) via XMLA. - Creates a report using dimensions, hierarchies, measures, named sets, calculated members and measures, etc., from OLAP cube at runtime. - Virtual scrolling of large data is possible. [FREE TRIAL](https://www.syncfusion.com/downloads/blazor?tag=es-ft-blazor-pivot-table-banner) ## Overview The Blazor Pivot Table can be connected to multidimensional data (OLAP) that is organized into dimensions, hierarchies, measures, named sets, etc. Its result can be visualized in both tabular (pivot table) and graphical (pivot chart) formats. End users can customize its report on the fly with the help of grouping bar and field list. Reports can be stored for later use. ## OLAP cube An OLAP cube is a multidimensional array of data formed by its elements such as dimensions, hierarchies, levels, members, measures, named sets, etc. With the help of the field list UI, end users can visualize and use the OLAP cube elements at runtime. - [OLAP cube elements documentation](https://blazor.syncfusion.com/documentation/pivot-table/olap#olap-cube-elements) ## Drill down and drill up Use drill-down (expand) and drill-up (collapse) actions to visualize data in both abstract and detailed views. ## Slice and dice With slice and dice, end users can create new views by selecting dimensions and measures from the OLAP cube and filtering them to provide useful information. ## Virtualization The Blazor Pivot Table supports bringing data to the browser with the help of paging MDX queries while scrolling and rendering the component without any performance constraints. ## Calculated members and measures Provides a built-in UI to create and display dimensions and measures according to your requirements. The dynamically created members and measures can be bound to the report and visualized in a pivot table. - [Calculated field documentation](https://blazor.syncfusion.com/documentation/pivot-table/olap#calculated-field) ## Named sets Named sets are dimension members created from predefined MDX expressions in the OLAP cube. - [Named sets documentation](https://blazor.syncfusion.com/documentation/pivot-table/olap#named-set) ## Drillthrough Retrieve the underlying raw data of any aggregated value cell and visualize it in the Pivot Table component. - [Drillthrough documentation](https://blazor.syncfusion.com/documentation/pivot-table/drill-through) ## Measure groups Organize measures belonging to the same underlying fact table in a group. ##### Blazor Pivot Chart - Interactive Graphical Representation | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-pivot-table/pivot-chart # Blazor Pivot Chart - Blazing Fast and Feature-Rich Component - Aggregation, filtering, sorting, and grouping of pivot data with drill-down capability. - More than 20+ chart types along with series, axis, and legend customization. [FREE TRIAL](https://www.syncfusion.com/downloads/blazor?tag=es-ft-blazor-pivot-table-banner) ## Overview The Pivot Chart control organizes and summarizes business data and displays results in a graphic format. It includes major functionalities: data binding, various chart types, drilling up and down, Excel-like filtering and sorting, PDF exporting, several built-in aggregations, pivot table field list, calculated fields, and common chart UI interactions. ## Drill down and drill up Drill-down (expand) and drill-up (collapse) actions visualize pivot information in both abstract and detailed views. By default, data is displayed in a grouped manner. ## Grouping bar and field list The field list and grouping bar options allow users to change reports bound to a pivot chart dynamically. End users can drag, filter, and sort fields, as well as create pivot report at runtime. - [Grouping bar documentation](https://blazor.syncfusion.com/documentation/pivot-table/pivot-chart#grouping-bar) - [Field list documentation](https://blazor.syncfusion.com/documentation/pivot-table/pivot-chart#field-list) ## Chart types The Pivot Chart control includes functionality for plotting more than 20 chart types: Line, Column, Area, Bar, StepArea, StackingColumn, StackingArea, StackingBar, StepLine, Pareto, Bubble, Scatter, Spline, SplineArea, StackingColumn100, StackingBar100, StackingArea100, Polar, Radar, Pie, Doughnut, Funnel, and Pyramid. Each one is easily configurable with built-in support for creating stunning visual effects. Users can switch among different chart types dynamically. - [Chart Types documentation](https://blazor.syncfusion.com/documentation/pivot-table/pivot-chart#chart-types) ## Series customization End users can customize the existing series color, border color, and border width of the pivot chart based on their needs, using several built-in options through code behind. - [Series customization documentation](https://blazor.syncfusion.com/documentation/pivot-table/pivot-chart#series-customization) ## Multiple axes Plot multiple series in a single chart with multiple axes as per the value fields bound with the pivot chart. Users can view more information about the individual series with the help of a tooltip. - [Multiple axes documentation](https://blazor.syncfusion.com/documentation/pivot-table/pivot-chart#multi-axis) ## Legend customization The legend provides information about each series in the pivot chart and users can hide or show any series based on the legend UI at runtime by clicking it. Users can also customize the appearance of legend items in the pivot chart with the help of built-in options like position and shape. - [Legend customization documentation](https://blazor.syncfusion.com/documentation/pivot-table/pivot-chart#legend-customization) ### Marker and cross hair Markers are representations of points in a pivot chart. Users can customize the markers with built-in shapes: circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, and pentagons. In addition, images can be used to make the point more attractive. Crosshairs will return the exact data for the x and y-coordinates under the pointer. - [Marker and cross hair documentation](https://blazor.syncfusion.com/documentation/pivot-table/pivot-chart#marker-and-crosshair) ### Zooming and scrolling Users can take a close-up look at a data point plotted in a series at runtime with the zooming feature. When any part of the chart area is zoomed in, scroll bars will automatically appear to let the user view areas beyond the currently displayed chart area. - [Zooming and scrolling documentation](https://blazor.syncfusion.com/documentation/pivot-table/pivot-chart#zooming-and-panning) ### Panning Users can click and drag the pointer across a zoomed-in chart to navigate to data points for better viewing. - [Panning documentation](https://blazor.syncfusion.com/documentation/pivot-table/pivot-chart#zooming-and-panning) ### Tooltip A tooltip provides basic information about a cell while hovering over it with the pointer. - [Tooltip documentation](https://blazor.syncfusion.com/documentation/pivot-table/pivot-chart#tooltip) ## Exporting The pivot chart can be exported a PDF document or in image formats such as SVG, PNG, and JPEG. - [Exporting documentation](https://blazor.syncfusion.com/documentation/pivot-table/pivot-chart#export) ## Globalization and localization Enables users from different locales to use them by formatting dates, currency, and numbering to suit their preferences. --- title: Blazor Scheduler Component & Event Calendar | Syncfusion description: Blazor Scheduler for event calendars, booking systems, and resource scheduling apps. Supports drag-drop editing, timezone support, and high performance. image: "https://ft.syncfusion.com/featuretour/ft-og-images/blazor/blazor-scheduler.webp" url: "https://www.syncfusion.com/blazor-components/blazor-scheduler" --- # Blazor Scheduler Component for Building Calendar & Scheduling Apps - A Blazor Scheduler is an event calendar UI component that allows you to display, create, edit, and manage appointments, meetings, and events in Blazor applications. - It supports multiple calendar views, recurring events, drag-and-drop scheduling, resource scheduling, and time zone handling. ## Overview The Syncfusion Blazor Scheduler is a flexible and high-performance event calendar component built for managing time-based data and resources in Blazor applications. It is commonly used to build booking systems, appointment scheduling solutions, and resource planning applications where accuracy, usability, and scalability matter. Designed to handle complex scheduling scenarios, it helps teams deliver rich, user-friendly calendar experiences without extensive custom UI work. ### Interact with the Live Blazor Scheduler [View Documentation](https://blazor.syncfusion.com/documentation/scheduler/getting-started-webapp) [Try Live Demo](https://blazor.syncfusion.com/showcase/featurerichscheduler) Runs in-browser. No installation required. ### High performance Optimized rendering and efficient data handling ensure [fast load times](https://blazor.syncfusion.com/documentation/scheduler/virtual-scrolling) and smooth scheduling, even when managing large volumes of events in enterprise applications. ### Flexible data binding [Connect easily](https://blazor.syncfusion.com/documentation/scheduler/data-binding) to REST APIs, JSON, or cloud data sources. Supports real-time updates and seamless integration with modern application backends. ### Accessibility compliant Built with accessibility best practices, including keyboard navigation and screen reader support, ensuring inclusive user experiences. ### Fully responsive [Adaptive layout](https://blazor.syncfusion.com/documentation/scheduler/resources#compact-view-in-mobile) delivers a consistent scheduling experience across desktops, tablets, and mobile devices without additional configuration. ### Customizable themes Personalize the scheduler’s appearance using built-in themes or custom styling to match your application’s design and branding. Utilize the [online Theme Studio tool](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) to customize themes of Scheduler easily. ### Globalization support Supports [multiple languages](https://blazor.syncfusion.com/documentation/scheduler/localization), time zones, and regional formats, enabling developers to build scheduling applications for global users. ## Installation & Quick Start Follow these three steps to integrate the Scheduler component into your Blazor application. ### Install the Scheduler Package Install the [Syncfusion Blazor Scheduler package using NuGet](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule). - bash ### Import Required Namespaces and Register Services Import the required Syncfusion Blazor namespaces in your Imports.razor file and register the Syncfusion Blazor service in Program.cs. Add the required CSS stylesheet and Script resources to the App.razor or index.html file. - import.razor - program.cs - html "_content/Syncfusion.Blazor.Themes/bootstrap5.css" "_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" "text/javascript" ### Initialize the Scheduler Component Import and render the Scheduler component, then bind a datasource with appointment data. Configure the views (Day, Week, WorkWeek, Month, Agenda) to enable users to efficiently schedule and manage events. Also explore our [Blazor Scheduler Example](https://ej2.syncfusion.com/blazor/demos/schedule/overview) that shows you how to render and configure a Scheduler in Blazor. - razor [Get Started Now](https://www.syncfusion.com/downloads/blazor?tag=es-ft-blazor-scheduler-downloads-code-example) [Blazor Scheduler Guide](https://ej2.syncfusion.com/blazor/documentation/schedule/getting-started) ## AI Scheduler for Smarter Planning The AI Scheduler organizes your calendar with ease. Just type instructions like, “Meet the team every Friday at 10 AM”, and it handles the rest. It checks for conflicts, suggests optimal times, and organizes your calendar visually. [Explore the demo for AI-powered scheduling](https://blazor.syncfusion.com/demos/ai-scheduler/smartscheduler?theme=bootstrap5) ## Blazor Scheduler Use Cases Build powerful scheduling and booking applications using the Syncfusion Blazor Scheduler. It supports real-world scenarios such as healthcare scheduling, resource booking, hospitality reservations, and workforce management. ### Healthcare scheduling Manage patient appointments, doctor availability, and recurring visits efficiently. Prevent conflicts and support accurate scheduling across departments and locations. ### Hotel reservations Handle room bookings and guest schedules efficiently. Easily update and reschedule reservations using intuitive scheduling interactions. ## Multiple calendar views A wide variety of built-in view modes are available: day, week, workweek, month, agenda, month-agenda, year, and timeline. Easily configure each individual view with different, view-specific options. ### Day, week, and workweek views Display events and appointments for a single day or across multiple days. ### Month view Display events and appointments on a single day or multiple days for an entire month. ### Agenda view Load events virtually and display them as a list in a sequential order grouped by day. An option exists to specify the number of days to load initially in the agenda view. ### Month agenda view Display the calendar layout and the events of the currently selected date. A round indicator at the bottom of a date shows the presence of one or more events on that day. ### Year view Year view displays all the months of a particular year in a calendar view format. In that calendar view, dates containing events and appointments are highlighted with dots placed under the individual date. When you click on the date, the event pop-up will be displayed and the events will be listed. ### Timeline views Blazor Scheduler provides five built-in [timeline views](https://blazor.syncfusion.com/documentation/scheduler/header-rows) are available: timeline day, timeline week, timeline workweek, timeline month, and timeline year. Each view displays events accurately across a horizontal time axis for a single day or multiple days. To provide better performance, timeline views load resources, events, and appointments virtually on every scroll action. - [More details on timeline scheduling](https://www.syncfusion.com/blazor-components/blazor-scheduler/timeline-views) ## Recurring event scheduling Easily create and manage recurring appointments with flexible recurrence rules. Schedule daily, weekly, monthly, or custom recurring events, and handle exceptions or modifications without affecting the entire series. This makes it ideal for applications such as appointment booking systems, healthcare scheduling, and workforce planning tools. ## Resource scheduling Efficiently manage and schedule multiple resources such as meeting rooms, employees, equipment, or service providers. Group events by resource, track availability, and prevent scheduling conflicts. This is essential for resource planning, workforce management, and reservation systems. - [More details on multiple resources](https://www.syncfusion.com/blazor-components/blazor-scheduler/multiple-resources) ## Drag-and-drop scheduling Enable intuitive scheduling with built-in drag-and-drop and resizing capabilities. Users can quickly move appointments, adjust durations, or update schedules directly from the interface. This improves scheduling efficiency and provides a seamless user experience in calendar and scheduling applications. ## Timezone support Regardless of the system time zone, the Blazor Event Calendar supports setting the required time zone for the control itself, as well as events. ## Real-time data synchronization Real-time appointment data accurately synchronizes with our Blazor Scheduler component. ### Outlook and Google Calendar integration Easily synchronize events between our Blazor Scheduler component and Google or Outlook Calendar via the Google Calendar API or Microsoft Outlook’s object library. ### Real-time updates Bidirectional data communication conveys the server-side appointment updates made on Blazor Scheduler to all the connected clients through SignalR. ## Advanced event-handling options The Scheduler for Blazor provides clear, vibrant, exact representations of events and appointments across the Scheduler timeline, based on their assigned time duration. - [Learn more about event editing options](https://www.syncfusion.com/blazor-components/blazor-scheduler/scheduler-events) ### Add and edit capabilities There is built-in support for better event handling, such as easier appointment creation and editing using the default event editor or through intuitive drag-and-resize actions. In addition, you can add custom data fields to both the events and resource data source. ### Multi-event selection Easily select multiple events at once by pressing and holding the Ctrl key while clicking on events. On mobile devices, do the same by tapping and holding an event, and continue selecting by single-tapping other events. After successfully selecting events, delete or reposition them simultaneously. ### Tooltip The customizable tooltip displays event information while the mouse pointer is hovering over the event. Do the same on mobile devices by tapping and holding an event. ### Appearance customization Change the look and feel of Blazor Scheduler events and appointments by customizing their default appearance and style using templates or CSS. ### Time zone Regardless of the system time zone, the Blazor Scheduler control supports setting the required time zone for the control itself, as well as events. ### Inline appointment With this feature enabled, users can create and edit events and appointments inline with a single click on the schedule cells or on the existing appointment’s subject. Pressing Enter after the new subject text is typed in the inline text box will update and save the appointment appropriately. ## Customizable scheduler views Real-time appointment data accurately synchronizes with our Blazor Scheduler. ### Unique view configurations Easily configure each individual view mode with different calendar settings. For example, you can enable the grouping feature in the month view and apply event templates in the week view. ### Extensible view intervals Display multiple days, weeks, and months by extending each view mode based on the provided interval count. ## Block time interval You can block specific time ranges to prevent the creation of events and appointments in that time slot. ## Prevent overlap events Prevent overlapping events by configuring the scheduler to provide visual cues indicating conflicts. This ensures users can manage their schedules effectively without double-booking. ## Adaptive rows Automatically increase the height of the rows in month and timeline views when new concurrent events or appointments are added. ## Context menu The context menu integrated with the Blazor Scheduler component opens when a cell or appointment is right-clicked. ## Feature-rich calendar options The Blazor Scheduler component inherits almost all the calendar-specific features, such as first day of the week and timescale. ### First day of the week Customize the first day of the week, which defaults to Sunday, as per the default locale. You can utilize this option for individual views also. ### Custom start and end hours Display the event scheduler layout with specific time durations by hiding the unwanted hours. ### Flexible timescale Use [customizable timescale](https://blazor.syncfusion.com/documentation/scheduler/timescale) options to view a timeline of events clearly and set a different duration. ### Working time The active cells of the Blazor Scheduler (displayed in white) visually represent the work days and hours. ### Highlighting current time Indicate the current date with a highlighted date header. Mark accurately the current time on all views. ### Hiding weekend days Hiding weekend days from the Blazor Scheduler allows you to display only working days across all views. ### Week number display Display the week number of the current date range beside the date header in day, week, and workweek views. Also, display the week number in the month view as the first column. The week number is determined by the first day of the week and week rules (first day or first full week, or first four-day week). ### Time mode The Blazor Scheduler control supports both 12-hour and 24-hour time formats. ## Completely customizable UI Customize the appearance of any part of the Blazor Scheduler interface using templates and CSS styles. ### Date header Change the default appearance of the header bar by adding any kind of CSS, custom text, or image. ### Complete Scheduler UI A built-in client-side event allows end users to customize any part of the Scheduler user interface. ### Scheduler cells Out-of-the-box template options allow you to [customize the cells](https://blazor.syncfusion.com/documentation/scheduler/cell-customization) easily by adding any kind of text, image, or CSS. ### Quick pop-ups Easily customize pop-ups that open with a single click on cells, events, or appointments with your own UI or template design. ### Open event editor externally The Blazor Scheduler control offers a built-in method to open the default event editor window programmatically. ## User-friendly interactions The modern and trendy UI design of the Blazor Scheduler component makes user interactions simpler and more efficient. ### Quick event overview Clicking or tapping on events displays important details, such as subject and time, along with edit and delete options. ### Cell selection Click and drag the pointer over the Scheduler cells for multiple-cell selection. Users can do the same with keyboard shortcuts. ### Event container Clicking on the text indicator (+n more) in the month and timeline views will open an event container listing all the hidden event and appointment details of a day. ### Quick navigation Navigate back and forth among the date ranges using an inline calendar and also navigate between different view modes. ## Interactive features The Blazor Scheduler component allows users to export its events as an Excel file or as an ICS file. ### Export to Excel The Blazor Scheduler component allows exporting all its events to an Excel document by default. It also provides additional customization options to export custom event data collections. ### Export ICS The Blazor Scheduler supports exporting all its event data to iCal format. ### Developer-friendly APIs Developers can have full control over the UI and behavior of the event scheduler through its built-in, developer-friendly APIs. It allows you to customize even the complex Scheduler functionalities easily. ## Accessibility The Blazor Scheduler component is easily accessed by screen readers. Complete keyboard interaction support has also been provided. ### Completely accessible The Blazor Scheduler component has complete WAI-ARIA accessibility support. The Scheduler UI includes high-contrast visual elements, giving visually impaired people the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers. ### Keyboard interactive Various keyboard shortcuts are available to perform almost all the Scheduler actions, such as multiple cell or event selection and navigating to other views. ### Right to left (RTL) Render the event scheduler in the right-to-left direction for users working with languages like Hebrew, Arabic, or Persian. [Start with Blazor Server-side Scheduler](https://blazor.syncfusion.com/documentation/scheduler/getting-started) [Start with Blazor WebAssembly Scheduler](https://blazor.syncfusion.com/documentation/scheduler/how-to/blazor-web-assembly-scheduler) [Documentation](https://blazor.syncfusion.com/documentation/scheduler/getting-started) [Load Appointments on Demand in Blazor Scheduler using Entity Framework](https://www.syncfusion.com/blogs/post/blazor-scheduler-entity-framework-on-demand-loading) [How to Enable Adaptive Layout in Blazor Scheduler Component](https://www.syncfusion.com/tutorial-videos/blazor/scheduler?title=how-to-enable-adaptive-layout-in-blazor-scheduler-component) [How to Access Microsoft Graph Calendar Events with Syncfusion Blazor Scheduler](https://www.syncfusion.com/blogs/post/how-to-access-microsoft-graph-calendar-events-with-syncfusion-blazor-scheduler) [How to Perform CRUD Operations Using Entity Framework in Blazor Scheduler](https://www.syncfusion.com/tutorial-videos/blazor/scheduler?title=how-to-perform-crud-operations-using-entity-framework-in) ##### Blazor Scheduler | Resource Grouping | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-scheduler/multiple-resources ## Overview The Blazor Scheduler component comes with a variety of flexible options to group resources based on different criteria. This includes grouping appointments based on resources, grouping resources based on dates, and timeline scheduling. Also, the data for resources bind with Scheduler either as a local collection or URL retrieving data from remote data services. ## Compact layout - Our Blazor Scheduler component arrives with a new compact layout for displaying resources and their relevant events on a mobile screen. - This unique layout brings clear visibility of the resource events by displaying a single resource at a time. ## Resource grouping The Blazor Scheduler component supports four different types of grouping: horizontal, timeline, date-based, and hierarchical (one-to-one). ### Horizontal grouping Group the resources horizontally with a time axis displaying at the left extreme, common for all other resources. Display the appointments of each individual resource in its underlying time slots. - [Horizontal grouping example](https://blazor.syncfusion.com/demos/scheduler/horizontal-grouping?theme=bootstrap4) ### Timeline grouping Display the resources as rows in a hierarchical tree structure based on the grouping levels. Arrange the appointments of a resource horizontally in its appropriate row, against the horizontal time axis. - [Timeline grouping example](https://blazor.syncfusion.com/demos/scheduler/timeline-grouping?theme=bootstrap4) ### Group by date Group the resources under each date column, whereas each date column will have the underlying sub columns to display those resources. ### Hierarchical grouping This feature maps every end-level child resource to each of its top-level parents, thus allowing the one-to-one grouping model. ## Shared events Multiple resources can share the same appointment, thus allowing the action made on it to reflect on all other shared instances simultaneously. - [Shared events example](https://blazor.syncfusion.com/demos/scheduler/shared-events?theme=fluent) ## Different working days for resources Options exist to set different working days and working hours for each resource. ## Resource header customization Enhance the look and feel of the resource header cells by adding text, images, or CSS styles. In addition, you can display customized tooltips with resource information while hovering over the resource header cells. ## Add and remove resources Built-in scheduler methods are available for adding or removing resources dynamically on a scheduler. You can specify the index position, where the add or remove actions are to take place. ##### Blazor Scheduler Events | Calendar Events | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-scheduler/scheduler-events ## Overview The Blazor Scheduler component ships with comprehensive add, edit, and delete event capabilities. You can easily add and edit appointments using the editor window or through intuitive drag-and-resize actions. ## Event creation A quick event window that pops out on a single click over the required cells allows you to create an appointment. Built-in methods are also available to make the event adding process simpler and easier. ## Multi-event deletion Delete multiple selected scheduler events at once. Select the events and simply press the delete key to remove them all. ## Event editor Appointment creation and editing is made easier with the default event editor that includes additional customizing options. Validation options are also available on all the editor fields. ### Built-in editor window The built-in Blazor Scheduler event editor allows you to easily add and edit all kinds of appointment information such as description and recurring options. - [Editor window documentation](https://blazor.syncfusion.com/documentation/scheduler/editor-template#event-editor) ### Custom event editor Customize the default event editor window as per the user’s choice of UI and design template. Additional fields added to it are custom mapped automatically to the event instances. - [Custom editor template example](https://blazor.syncfusion.com/demos/scheduler/editor-template?theme=fluent) - [Custom editor template documentation](https://blazor.syncfusion.com/documentation/scheduler/editor-template#customizing-event-editor-using-template) ### Data validations Built-in and custom validation options are available for the event editor fields to validate the input appointment data. - [Field validation example](https://blazor.syncfusion.com/demos/scheduler/field-validation?theme=fluent) - [Field validation documentation](https://blazor.syncfusion.com/documentation/scheduler/editor-template#field-validation) ## Bulk appointment updates When a recurring appointment undergoes editing actions, a single request will be sent to the server carrying the multiple records. These multiple records include the information about the added, edited, and deleted events. Bulk appointment insertion is applicable when you want to create and assign a same event to multiple resources. Bulk appointment deletion is also possible, when you select and delete multiple appointments all at once. - [CRUD actions on events documentation](https://blazor.syncfusion.com/documentation/scheduler/data-binding#scheduler-crud-actions) ## Intuitive drag-and-drop action - Reschedule appointments easily by dragging them onto the required time slots. You can also see the live time updates over the dragged appointments. - In mobile devices, tap holding an event and then moving it over the scheduler cells will allow you to drag and drop the events. - Auto-scrolls the view port area while dragging events over the scheduler extremities. ## Event resizing - Easily extend a scheduler event’s time by resizing either its start or end handlers. - You can also see the live time updates over the resized appointments. - Auto-scrolls the view port area while resizing events over the scheduler extremities. ## External drag and drop Drag unscheduled events from an external source onto the scheduler. You can also drag and drop appointments among multiple schedulers placed on the same page. - [External drag and drop example](https://blazor.syncfusion.com/demos/scheduler/external-drag-and-drop?theme=fluent) ## Read-only mode Read-only mode set on the Scheduler allows you to disable the add and edit actions on events. You can also programmatically control the read-only mode on specific scheduler events alone. - [Readonly mode documentation](https://blazor.syncfusion.com/documentation/scheduler/appointments#readonly) ## Event restriction With the built-in scheduler methods, you can restrict each timeslot to hold only a single appointment during add or edit actions. ##### Blazor Scheduler Component - Timeline Views | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-scheduler/timeline-views ## Overview Timeline scheduling plays a major role in the Blazor Scheduler component, as it displays the timeline scheduler views for multiple resources. Its feature-rich calendar options, compact resource scheduling, and clear event representation allows you to employ it in various real-time applications. The events of timeline views support an intuitive drag-and-drop feature and a resize action. ## Multiple timeline views Five built-in timeline views are available: timeline day, timeline week, timeline work week, timeline month, and timeline year. All these views carry a common horizontal time axis and inherit almost all the calendar-specific features. ### Timeline day, week, and work week views Display appointments accurately across a common horizontal time axis for a single day or multiple days. ### Timeline month view Display appointments across multiple days of a month on a horizontal axis where each column represents a single day. ### Timeline year view Display multiple months on both horizontal and vertical axes, where each cell represents a single day. ## Extensible custom views - Display multiple days, weeks, and months across a timeline scheduler by extending each view’s interval count. - For example, you can display a complete year, say from January 2022 to December 2022, in timeline month view by setting its interval value to 12. This allows the timeline scheduler to load 12 months from the current date (the current date being in January in this example) in timeline month view. ## Header rows - A timeline scheduler usually displays additional header rows on timeline views alone. - You can display the year, month, and week number text labels on each individual row with out-of-the-box templates. ## Event handling options There is built-in support for better event handling, such as easier appointment creation and editing using the default event editor or through intuitive drag-and-resize actions. In addition, you can add custom data fields to both the events and resource data source. - [Learn more about event editing options](https://www.syncfusion.comscheduler-events) ## Resource grouping Display the resources as individual rows. Arrange the appointments of a resource horizontally in its appropriate row against the horizontal time axis. ## Grouping with multiple levels - Display resources in rows in a hierarchical tree-like structure with expand and collapse options. - More importantly, the parent-level resources, too, will display appointments in their individual rows. - [Resource grouping with multi-levels example](https://blazor.syncfusion.com/demos/scheduler/timeline-grouping?theme=bootstrap4) ## Virtual scrolling The Blazor Timeline Scheduler provides better performance by instantly loading large sets of resources and appointments virtually on every scroll action. ## Shared events Multiple resources can share the same appointment, thus allowing the action made on it to reflect on all other shared instances simultaneously. ## Customizing resource columns Enhance the look and feel of the resource header cells by adding text, images, or CSS styles. You can display customized tooltips with resource information while hovering over the resource header cells. ## Add and remove resources Built-in scheduler methods are available for adding or removing resources dynamically on a scheduler. You can specify the index position, where the add or remove actions are to take place. --- title: Blazor Gantt Chart Library | Timeline Chart | Syncfusion description: The Blazor Gantt Chart is a project management tool that provides a Microsoft Project-like interface for scheduling and managing projects. image: "https://ft.syncfusion.com/featuretour/ft-og-images/blazor/blazor-gantt-chart.webp" url: "https://www.syncfusion.com/blazor-components/blazor-gantt-chart" --- # Blazor Gantt Chart: A Tool for Scheduling Projects with Ease - A complete project management tool to schedule and plan projects. - You can manage and monitor specific tasks and resources in a project. - An intuitive user interface lets you manage complex projects on the go. ## Overview The Blazor Gantt Chart is a project planning and management tool that provides a Microsoft Project-like interface to display and manage hierarchical tasks with timeline details. Its intuitive user interface lets you visually manage tasks, resources, and task relationships in a project. ### High performance [Virtual scrolling in the Blazor Gantt Chart](https://blazor.syncfusion.com/demos/gantt-chart/load-on-demand?theme=bootstrap5) allows you to load large amounts of data without performance degradation. ### Seamless data binding [Bind data seamlessly with various local and remote data](https://blazor.syncfusion.com/documentation/gantt-chart/data-binding) sources such as JSON, OData, WCF, and RESTful web services with the help of a data manager. ### Adapts to any resolution The Gantt Chart has a highly responsive layout and an optimized design for desktops, tablets, and phones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Elegant animation The Gantt Chart for Blazor provides fluid animation to present data with smooth transitions. ### Create your own templates Use template support to customize taskbars and grid columns. Customize the timeline header for a better view of the data. ### Timeline zooming Increase or decrease the width of timeline cells and change the timeline units dynamically with [zooming](https://blazor.syncfusion.com/documentation/gantt-chart/zooming). This lets you clearly view tasks in a project, from minute to decade. ### Attractive, customizable themes Create cutting-edge design with built-in themes: Fluent, Tailwind CSS, Bootstrap, Material, and Fabric. Utilize the [online Theme Studio tool](https://blazor.syncfusion.com/themestudio?theme=fluent) to customize themes in the Gantt Chart easily. ### Globalization and localization [Enable users from different locales](https://blazor.syncfusion.com/documentation/gantt-chart/globalization) to use the control by formatting dates, currency, and numbering to suit preferences. ## AI-driven Gantt Chart for intelligent project management Simplify project planning with the AI-enhanced Blazor Gantt Chart. Prioritize tasks, predict timelines, and manage resources effectively to boost team performance. - Optimize resource allocation: Use AI to detect overallocation and intelligently redistribute workloads, ensuring balanced task assignments across your team. - [Learn how to add resource allocation](https://blazor.syncfusion.com/demos/gantt-chart/ai-resource-manager?theme=bootstrap5) - Timeline prediction: Forecast key dates and milestones using AI insights. - [Learn how to integrate timeline forecasting](https://blazor.syncfusion.com/demos/gantt-chart/ai-progress-predictor?theme=bootstrap5) ## Blazor Gantt Chart code example Easily get started with the Blazor Gantt Chart using a few simple lines of C# code, as demonstrated below. Also explore this [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap5), which shows you how to render and configure the Gantt Chart in Blazor. - razor ## Timeline views The Blazor Gantt Chart supports different, configurable timeline views: hour, day, week, month, and year. - [More details on timeline](https://www.syncfusion.com/blazor-components/blazor-gantt-chart/timeline) ## Task relationships Create relationships among different tasks to determine the execution order using finish-to-start, start-to-finish, start-to-start, and finish-to-finish task link types. - [More details on task scheduling](https://www.syncfusion.com/blazor-components/blazor-gantt-chart/scheduling) ## Critical path The Blazor Gantt Chart supports critical paths, which represent a series of tasks that directly influence the calculated finish date of a project. If any task within the critical path is delayed, it leads to a delay in the timeline. This feature is particularly useful for managing projects with fixed deadlines, allowing users to identify and prioritize tasks crucial for timely delivery. ## Split and merge tasks Users can split a task or interrupt the work during planned or unforeseen circumstances. This makes the view dynamic and interactive, improving the visualization of the project taskbar. Multiple segments can be split and merged within a taskbar. ## Resource allocation Allocate multiple resources like staff, equipment, and materials to each task in the project view of the Gantt Chart. ## Resource view Visualize the list of tasks assigned to each resource hierarchically. This view represents resources as parent records and their corresponding tasks as child records, providing a clear and structured overview of resource allocation and task assignments within the project. ## Work breakdown structure (WBS) column The WBS column organizes project tasks into a multilevel hierarchy by assigning unique codes to each task. This structure improves visibility and control over complex task relationships, making it well-suited for projects such as construction, enterprise systems, and large-scale. ## Baselines Compare the current task’s progress with the planned timeline using baselines. ## Editing Edit the task fields in their respective cells using a dialog or interactively using taskbars. Enable and disable the Gantt editing operations with the read-only option. - [More details on editing features](https://www.syncfusion.com/blazor-components/blazor-gantt-chart/editing) ## Filtering Data in all columns can be filtered using the menu filtering and toolbar search options. - [More details on filtering feature](https://www.syncfusion.com/blazor-components/blazor-gantt-chart/filtering) ## Undo and redo Navigate changes with confidence using intuitive undo and redo controls: - Revert recent changes with the Undo function. - Restore reversed actions using the Redo function. - Use for task edits, dependencies, and more. ## Auto scroll to taskbar on row selection Focus on tasks that are not visible but scheduled later along the timeline by selecting their rows in the grid section. ## Highlight days and events Highlight important days or events in a project using event markers. ### Data markers Display events for a specific task that can be placed on the timeline on any given date. ### Time zones Regardless of the system time zone, the Blazor Gantt Chart control supports configuring a custom time zone for task scheduling. ### Holidays Display nonworking days by using the holidays feature. ### Tooltip The tooltip displays task information while the pointer hovers over a task and displays editing actions while the pointer hovers over taskbar and connector lines. ### Row height and taskbar height Row height is a major factor when displaying records in the view port and it can be customized effortlessly. The height of child taskbars and parent taskbars can be customized using the taskbarHeight property. ### Context menu The context menu improves user interaction with the Blazor Gantt Chart component using a pop-up menu. It appears when a cell or header is right-clicked. It allows you to add custom context menu items to default menu items. ### Exporting Easily export the Blazor Gantt Chart component in file formats such as Excel, CSV, and PDF. ### Keyboard navigation The Blazor Gantt Chart ensures that every cell is accessible using the keyboard. Major features like sorting, selection, and editing can be performed using keyboard commands alone; no mouse interaction required. This helps in creating highly accessible applications using this component. ### Screen reader The Blazor Gantt Chart has complete WAI-ARIA accessibility support. Its UI includes high-contrast visual elements, helping visually impaired people have the best viewing experience. Also, the valid UI descriptions are easily accessible through assistive technologies such as screen readers. ## Mobile-optimized and touch-friendly The Blazor Gantt Chart has a highly responsive layout and fine touch support for desktops, tablets, and smartphones. ### Touch support User-friendly touch gestures and an interactive UI design help produce the best user experience. All Gantt Chart features work on touch devices with zero configuration. ### Responsive The Blazor Gantt Chart can be viewed on various devices cleanly with its responsive layout. It is also possible to hide specific columns for particular screen sizes using column-based media query support. ## Other supported frameworks The Gantt Chart is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React Gantt Chart](https://www.syncfusion.com/react-components/react-gantt-chart) - [Angular Gantt Chart](https://www.syncfusion.com/angular-components/angular-gantt-chart) - [JavaScript Gantt Chart](https://www.syncfusion.com/javascript-ui-controls/js-gantt-chart) - [Vue Gantt Chart](https://www.syncfusion.com/vue-components/vue-gantt-chart) ## Supported browsers The Blazor Gantt Chart works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [Documentation](https://blazor.syncfusion.com/documentation/gantt-chart/getting-started) [Features and bugs](https://www.syncfusion.com/feedback/blazor-components?control=gantt-chart) [Boosting Performance of Blazor Gantt Chart Using Virtualization](https://www.syncfusion.com/blogs/post/boosting-performance-of-blazor-gantt-chart-using-virtualization) [Task Scheduling and Markers in Blazor Gantt Chart](https://www.syncfusion.com/blogs/post/boosting-performance-of-blazor-gantt-chart-using-virtualization) ##### Data Binding | Blazor Gantt Chart | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-gantt-chart/data-binding ## Overview The Blazor Gantt Chart data binding feature supports binding data seamlessly with various local and remote data sources such as IEnumerable/List, RESTful services, OData services, and WCF services. It uses the data manager to handle data, and supports customizing data requests and processing. ## List binding Bind the Gantt Chart with a list of business objects or IEnumerable collection. The Blazor Gantt Chart is a generic component that needs a model type to bind data. In case the model type is unknown during compiling, it binds the list using ExpandoObject or DynamicObject. - [List binding documentation](https://blazor.syncfusion.com/documentation/gantt-chart/data-binding#list-binding) ## Remote data binding Binding the Blazor Gantt Chart with RESTful services allows data from the services to be consumed using the data manager. It supports various data adaptors such as OData, ODataV4, URL, and Web API for working with a particular data service - [Web API binding documentation](https://blazor.syncfusion.com/documentation/gantt-chart/data-binding#web-api) ##### Blazor Editable Gantt Chart | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-gantt-chart/editing ## Overview The Blazor Gantt Chart provides full support to create, read, update, and delete operations (CRUD). In addition to built-in editor components to edit a particular column value, with template support users can use custom components that suit their application needs. Users can interact with taskbars in timeline to update its corresponding task values. It performs editing operations with the list data or remote service data. - [Example for editing](https://blazor.syncfusion.com/demos/gantt-chart/editing) ## Grid editing Blazor Gantt supports cell and dialog edit modes in its grid area. It provides an interactive UI to add and edit records. In addition, editing and deletion of tasks can be performed programmatically. - [Documentation for grid editing](https://blazor.syncfusion.com/documentation/gantt-chart/managing-tasks#cell-editing) ## Custom editor/customizable edit UI The editor for a grid cell can be specified by providing the edit type. The preferred editor can also be defined for specific columns. - [Custom editor documentation](https://blazor.syncfusion.com/documentation/gantt-chart/managing-tasks#cell-edit-template) ## Taskbar editing Users can interact with the taskbar by resizing or dragging it, and based on the new position of the taskbar in timeline, the task values are updated. - [Taskbar editing documentation](https://blazor.syncfusion.com/documentation/gantt-chart/managing-tasks#taskbar-editing) ## Dependency validation Dependencies between tasks can be updated either through the Dependency Column in the grid area or by drawing dependency connector lines in the chart area. Dependencies can be viewed and updated using a dialog. With dependency connection, the modified data by a user has to be validated based on the predecessor values before saving. Predecessor validation can also be customized as per application needs. - [Validation documentation](https://blazor.syncfusion.com/documentation/gantt-chart/predecessor-validation) ##### Blazor Filterable Gantt Chart | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-gantt-chart/filtering ## Overview The Blazor Gantt Chart filtering helps view specific or related records, which meet a given filtering criteria. It supports various filter types that include powerful Excel-like filter. Allows users to choose appropriate filter type, define their own custom filtering logic, and customize the filtering UI based on their application needs. Filtering with related parent or child records can be defined. ## Filter hierarchy modes Allows users to view parent or child records or both relative records along with the filtered records in a Gantt chart. Helps users to be aware of record’s hierarchy even when filtering. - [Documentation for filtering with hierarchy](https://blazor.syncfusion.com/documentation/gantt-chart/filtering#filter-hierarchy-modes) ## Search Search Gantt Chart rows using built-in search box in the toolbar or programmatically. Using built-in settings, search behavior can be customized. - [Searching documentation](https://blazor.syncfusion.com/documentation/gantt-chart/filtering#search) ##### High Performance Blazor Gantt Chart | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-gantt-chart/performance ## Overview The Blazor Gantt Chart has optimized design for high-performance. It loads thousands of records in just a few seconds without any performance degradation with the help of row and column virtualization. ## Virtualization Blazor Gantt Chart virtualization is a technique that limits UI rendering to just the parts that are currently visible. This functionality helps improve performance on component’s initial rendering time. ### Row virtualization Row virtualization in Blazor Gantt allows loading and rendering rows only in the content viewport. It renders rows dynamically when scrolling vertically. - [Row virtualization documentation](https://blazor.syncfusion.com/documentation/gantt-chart/virtual#row-virtualization) ### Column and timeline virtualization Column virtualization allows the columns of the data source to be virtualized and renders them in a viewport. Scroll horizontally to view more grid columns. Timeline virtualization allows users to load project tasks with longer timelines in the Gantt Chart. Renders only the timeline cells in the current viewport, while other timeline cells are rendered dynamically on horizontal scrolling. - [Column virtualization documentation](https://blazor.syncfusion.com/documentation/gantt-chart/virtual#column-virtualization) - [Timeline virtualization documentation](https://blazor.syncfusion.com/documentation/gantt-chart/virtual#timeline-virtualization) ##### Row | Blazor Gantt Chart | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-gantt-chart/row ## Overview Rows in Gantt Chart represents each task or data object information from the data source. It supports expanding/collapsing child rows, reordering of rows, indent/outdent rows to change its hierarchy levels and much more features. ## Expand and collapse parent rows Users can expand and collapse parent rows at any time to view information when needed. All the rows or only specific rows can be collapsed programmatically at initial rendering. ## Row reordering Rows can be reordered by drag and drop action to change its position and hierarchy levels. A child row from a parent row can be reordered as sibling to the same parent row or as child to any other parent row. - [Example for row reordering](https://blazor.syncfusion.com/demos/gantt-chart/row-drag-and-drop) ## Indent and outdent Indent and outdent operations can be performed on rows to change its hierarchy levels. On indenting a row, it moves as the last child of its previous row. On outdenting a row, it moves as sibling to its parent row. - [Example for indent and outdent](https://blazor.syncfusion.com/demos/gantt-chart/editing) ##### Tasks sheduling | Blazor Gantt Chart | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-gantt-chart/scheduling ## Overview Each task in the data source is validated based on the child tasks with some factors like working time, holidays, weekends, and predecessors, and then rendered under the Gantt chart timeline within its time period as a bar chart. The start date, end date, progress, and duration of a task are depicted as horizontal rectangular bars. ## Baseline Baseline visualizes the difference between the original scheduled date and the current scheduled date of a task in a project. Each task has two taskbars rendered on the same row for comparison of dates to help understand the overall progression of the project. - [Example for baseline](https://blazor.syncfusion.com/demos/gantt-chart/baseline) ## Unscheduled tasks The Blazor Gantt Chart with its rich UI provides built-in support for unscheduled tasks. These are tasks that are not scheduled with proper dates or duration at the start of the project, but which can be scheduled properly at any time during project implementation based on factors such as resource availability and dependent tasks. - [Example for unscheduled task](https://blazor.syncfusion.com/demos/gantt-chart/unscheduled-task) ## Dependency tasks Blazor Gantt chart shows the dependency relationship between tasks in the project. These tasks have an effect on one another and illustrate when a task should begin or end in relation to other tasks. - [Example for dependency tasks](https://blazor.syncfusion.com/demos/gantt-chart/editing) ##### Single, Multiple, & Drag Selection | Blazor Gantt Chart | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-gantt-chart/selection ## Overview The Blazor Gantt Chart control allows users to select rows or cells. One or more rows or cells can be selected programmatically or by holding Ctrl, Command, or Shift. ## Row selection Select a range of rows or a single row by just clicking or tapping the row. To perform multiple selection, press and hold CTRL or Shift while selecting the desired range of rows. - [Example for row selection.](https://blazor.syncfusion.com/demos/gantt-chart/selection) - [Row selection documentation.](https://blazor.syncfusion.com/documentation/gantt-chart/selection#row) ## Cell selection Select a range of cells or a single cell by just clicking or tapping the cell. To perform multi-selection, press and hold CTRL or SHIFT to select the desired cell or range of cells. The two types of cell selection modes are flow and box. - [Cell selection documentation.](https://blazor.syncfusion.com/documentation/gantt-chart/selection#cell) ## Drag selection Select a range of rows or cells by simply dragging the pointer over the cells by mouse or touch. - [Drag selection documentation.](https://blazor.syncfusion.com/documentation/gantt-chart/selection#drag-selection) ##### Timeline | Blazor Gantt Chart | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-gantt-chart/timeline ## Overview A timeline is used to represent the project duration as individual cells with defined units and formats. It displays project tasks in chronological order with progress, tasks dependencies, and more. ## Tier Layout The Blazor Gantt Chart component has a two-tier layout: top tier and bottom tier. The two tiers allow users to view two different timescales at once. The units and labels of both tiers are customizable to meet any application requirement. - [Example for tier layout.](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities) ## Timeline modes The Blazor Gantt Chart timeline supports various built-in view modes modes: hour, week, month, and year. Modes are chosen based on the timescale of the project. - [Example for timeline modes.](https://blazor.syncfusion.com/demos/gantt-chart/timeline) - [Timeline modes documentation.](https://blazor.syncfusion.com/documentation/gantt-chart/time-line#timeline-view-modes) ## Zooming Users can view the tasks in a project clearly in timespans from minutes to years using built-in zooming actions. Also the zoom-to-fit option allows users to view all the tasks in a single view port. - [Example for zooming.](https://blazor.syncfusion.com/demos/gantt-chart/zooming) ## Working days and holidays Nonworking days such as holidays and weekends can be customized. Working hours in a day for a project can be defined. This helps users keep track of each task and resource task status based on the working time of the company. - [Example for working days and holidays.](https://blazor.syncfusion.com/demos/gantt-chart/work-week) ## Event markers Highlight important events in a project. For all the tasks in a project or a particular task, an event can be highlighted to indicate an important activity or day. - [Example for event markers.](https://blazor.syncfusion.com/demos/gantt-chart/eventmarkers) ##### Blazor Calendar - Display & Select Special Dates | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-calendar # Blazor Calendar - Elegant, Customizable Calendar Component - A lightweight and easily configurable calendar component. - Next-level features such as multiple date selection, date range restriction, week numbers, and configurable first day of the week. - Modern themes, including Material design. ## Overview The Blazor Calendar component used to display the date and days of the week or month. It provides month, year, and decade view options to navigate quickly to a desired date. The Blazor Calendar supports minimum dates, maximum dates, and disabled dates to restrict the date selection. ### Easy to interact The user can be [restricted to choosing a date](https://blazor.syncfusion.com/documentation/calendar/date-range) from a predetermined range of dates. Any date in the Blazor calendar can be disabled to make it inactive. ### Calendar views The Blazor Calendar has [predefined views](https://blazor.syncfusion.com/documentation/calendar/calendar-views) that provide a flexible approach to navigate back and forth when selecting dates. ### Special Dates The Blazor Calendar component allows you to customize or disable [special dates](https://blazor.syncfusion.com/documentation/calendar/special-dates). ### Adapts to any resolution Calendar has a highly responsive layout and an optimized design for desktops, touchscreens, and smart phones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Attractive, customizable themes Cutting-edge design with several built-in themes, such as Fluent, Tailwind CSS, Bootstrap, Material, and Fabric. Utilize the [online Theme Studio tool](https://blazor.syncfusion.com/documentation/calendar/style-appearance) to customize themes easily. ### Globalization and localization With built-in globalization options, a culture-specific date format and the first day of the week can be chosen. The text of the month, day, and today button can be [translated to any supported language](https://blazor.syncfusion.com/documentation/calendar/globalization). ## Blazor Calendar Code Example Easily get started with the Blazor Calendar using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor Calendar Example](https://blazor.syncfusion.com/demos/calendar/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Calendar in Blazor. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/BtVptCACAbdpmzCM) - razor ## Month or year picker Select only the month or year as a value (month picker or year picker) in the Blazor Calendar component. - [Custom view documentation](https://blazor.syncfusion.com/documentation/calendar/calendar-views) ## Date selection within a date range You can restrict the Blazor Calendar component so that only a date value within a specific range of dates can be entered or selected by specifying the minimum and maximum date options. - [Date range documentation](https://blazor.syncfusion.com/documentation/calendar/date-range) ## Multiple date selection Configure the Blazor Calendar component to allow users to select single or multiple date values (sequence or random date selection). - [Multiple date selection](https://blazor.syncfusion.com/documentation/calendar/multi-select) ## Multi-language calendar Change the date format, set the first day of the week, and translate the text of the month, day, and today buttons to any supported language using the built-in globalization tools. - [Globalization documentation](https://blazor.syncfusion.com/documentation/calendar/globalization) ## Change first day of week Automatically change the first day of the week by specifying a culture or change it based on your application requirements. - [First day of week documentation](https://blazor.syncfusion.com/documentation/calendar/how-to/change-the-first-day-of-week) ## Disabled dates Disable any date in the React Calendar to make it inactive. The selection of weekends and holidays is easily prevented by disabling them. - [Disabled dates example](https://blazor.syncfusion.com/demos/calendar/disabled-dates?theme=bootstrap5) - [Disabled dates documentation](https://blazor.syncfusion.com/documentation/introduction#disable-weekends) ## Custom calendar The Blazor Calendar component has a standard, built-in theme but provides complete control over its appearance, allowing you to customize the style to suit your application. ## Highlight weekends Highlight any date in a year or every weekend in a month as special days using custom styling. - [Highlight weekends documentation](https://blazor.syncfusion.com/documentation/introduction#highlight-weekends) ## Week number Show the week number of a selected date by enabling the week number option in the Blazor Calendar. - [Week number documentation](https://blazor.syncfusion.com/documentation/calendar/how-to/render-the-calendar-with-week-numbers) ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility guidelines that allow calendars to be accessed by screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing keyboard interaction. - Uses [WCAG 2.0](https://www.w3.org/TR/WCAG20/)-based design for UI element visuals such as foreground color, background color, line spacing, text, and images. - Supports right-to-left (RTL) rendering for users working in right-to-left languages like Hebrew and Arabic. ### Keyboard navigation The Blazor Calendar component ensures that every cell is accessible using the keyboard. Major features like sort, select, and edit can be performed using keyboard commands alone; no mouse interaction is required. This helps in creating highly accessible applications using this component. - [Keyboard navigation documentation](https://blazor.syncfusion.com/documentation/calendar/accessibility#keyboard-navigation) ### Screen reader The Blazor Calendar view has complete WAI-ARIA accessibility support. The Calendar UI includes high-contrast visual elements that help visually impaired people to have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers. ### Right to left (RTL) Right-to-left rendering allows displaying the text and layout of the Calendar from right to left. This improves the user experience and accessibility for RTL languages. - [RTL documentation](https://blazor.syncfusion.com/documentation/calendar/globalization#right-to-left) ## Other supported frameworks The Calendar is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React Calendar](https://www.syncfusion.com/react-components/react-calendar) - [Angular Calendar](https://www.syncfusion.com/angular-components/angular-calendar) - [JavaScript Calendar](https://www.syncfusion.com/javascript-ui-controls/js-calendar) - [Vue Calendar](https://www.syncfusion.com/vue-components/vue-calendar) ## Supported browsers The Blazor Calendar works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [Documentation](https://blazor.syncfusion.com/documentation/calendar/getting-started) --- title: Blazor Rich Text Editor | WYSIWYG Editor | Syncfusion description: Blazor Rich Text Editor component is a feature-rich, WYSIWYG HTML and Markdown editor that provides the best user interface for editing content. image: "https://ft.syncfusion.com/featuretour/ft-og-images/blazor/blazor-rich-text-editor.webp" url: "https://www.syncfusion.com/blazor-components/blazor-rich-text-editor" --- # Blazor Rich Text Editor - Markdown Editor Component - Edit WYSIWYG HTML with rich tools for web and mobile apps. - Integrate into blogs, messaging apps, email composers, and forums. - Use as an inline editor for in-place editing of any editable element. - Enjoy a cutting-edge UI and toolbar customization. ## Overview The Blazor Rich Text Editor is a feature-rich WYSIWYG HTML editor and WYSIWYG Markdown editor. It is used to create blogs, forum posts, notes sections, support tickets (incidents), comment sections, messaging applications, and more. The control provides an efficient user interface for a better editing experience with mobile support. It has various of tools to edit and format rich content and returns valid HTML markup or Markdown (MD) content. It allows users to insert images, links, tables, and lists with modular architecture. ### WYSIWYG editor The Blazor Rich Text Editor component can be used as a [WYSIWYG HTML editor](https://blazor.syncfusion.com/documentation/rich-text-editor/editor-modes#html-editor) or a [Markdown editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor/wysiwyg-markdown-editor), and it also supports [iframe](https://blazor.syncfusion.com/documentation/rich-text-editor/iframe) editing with configurable iframe characteristics. ### Easy interaction Users can [easily format the text and paragraphs](https://blazor.syncfusion.com/documentation/rich-text-editor/style). Set the foreground and background colors, font type, italicization, underlining, strikethrough, and bolding. You can also add ordered (numbered) or unordered (bulleted) lists and change the editor’s size. ### Flexible editing For a better editing experience, the Blazor Rich Text Editor component offers a variety of tools and choices. Users can quickly insert [images](https://blazor.syncfusion.com/documentation/rich-text-editor/tools/insert-image), [videos](https://blazor.syncfusion.com/documentation/rich-text-editor/tools/video), [hyperlinks](https://blazor.syncfusion.com/documentation/rich-text-editor/tools/link-manipulation), and [tables](https://blazor.syncfusion.com/documentation/rich-text-editor/tools/table-manipulation); merge [table cells](https://blazor.syncfusion.com/documentation/rich-text-editor/tools/table-manipulation#cell-merge-and-split); and [configure keys](https://blazor.syncfusion.com/documentation/rich-text-editor/enter-key). ### Preview the HTML code Examine and edit the HTML code directly in the source code and [view the preview result](https://blazor.syncfusion.com/demos/rich-text-editor/default-functionalities?theme=bootstrap5) in the (HTML live editor). ### Toolbar with rich set of tools The WYSIWYG Rich Text Editor for Blazor offers a [variety of toolbar](https://blazor.syncfusion.com/demos/rich-text-editor/types?theme=bootstrap5) options that are fully customizable, such as multirow, expanding, quick, and floating toolbars. The tool commands are grouped based on related functionality. ### Adapts to any resolution The Rich Text Editor has a highly responsive layout and an optimized design for desktops, tablets, and smartphones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Integrate with third-party libraries It’s easy to integrate third-party libraries like a spell checker, code mirror, etc., with the Rich Text Editor to improve the content. ### Globalization and localization [Enable users from different locales](https://blazor.syncfusion.com/documentation/rich-text-editor/globalization) to use the Rich Text Editor by formatting dates, currency, and numbering to suit preferences. ## Smart Rich Text Editor with AI integration Empower your writing with the AI-enhanced Blazor Rich Text Editor. Correct grammar, rephrase sentences, translate languages, and summarize content instantly, all within your app. [Smarter writing starts here](https://blazor.syncfusion.com/demos/ai-richtexteditor/ai-assistant?theme=bootstrap5) ## Blazor Rich Text Editor code example [Get started with the Blazor Rich Text Editor](https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started) using a few simple lines of C# code, as demonstrated below. Also, explore this [Blazor Rich Text Editor example](https://blazor.syncfusion.com/demos/rich-text-editor/default-functionalities?theme=bootstrap5), which shows how to render and configure the editor in Blazor. - razor ## HTML editor toolbar The Blazor WYSIWYG text editor toolbar provides a variety of commands for editing and formatting the content. You can format text and paragraphs and insert images, hyperlinks, tables, and lists, etc. The tool commands are grouped based on related functionality. ### Multi-row toolbar The overflow toolbar commands are wrapped into following rows within the toolbar. ### Expand toolbar The overflow toolbar commands hidden in the next row become visible when the toolbar is expanded via the expand icon. ### Quick toolbar This toolbar contains frequently used commands related to text, images, tables, and links. It helps access and format these elements quickly. You can customize the toolbar itself. ### Floating toolbar The HTML WYSIWYG editor toolbar does not stick to the top of the editor, but floats within the editor area while scrolling the editor page. ### Fully customizable The toolbar buttons of the Blazor Rich Text Editor component are fully customizable. Add or remove buttons and group commands into categories. Users can design the toolbar based on application needs, like an HTML blog editor or HTML email composer. ### Custom tool Add your own commands (tools) with actions to the toolbar alongside the built-in commands. ## Inline mode Make the editor show up when you click or select the content in an editable area. ## Mention and hashtag When composing content in the Blazor Rich Text Editor, users or groups can be tagged or selected from the suggestion list. ## Editing experience The Blazor Rich Text Editor provides a wide range of tools and options for a better editing experience. ### Insert images You can insert images in your content from a local path or server path with image captions and then link URLs to the images. You can upload images to a server with drag-and-drop or file upload. Additionally, the editor offers options to insert images in BLOB or Base64 formats. ### Insert hyperlinks You can insert or change hyperlinks with customization options such as display text, tooltip, and links to be opened in a new window. ### Insert tables You can insert and edit HTML tables to display grid-like tabular data in the Rich Text Editor. Manipulate a table and its elements dynamically: insert or remove rows and columns, resize the whole table or specific rows or columns, remove a table. ### Table cell merge and split Merge two or more row or column cells into a single cell with their contents. Also, a single cell can be split both horizontally and vertically. ### Text alignment Align your content to the left, center, or right, or justify it. ### Enter and Shift+Enter key configuration The Rich Text Editor allows users to customize the tag inserted when pressing the Enter key and Shift+Enter keys. The following tags can be configured: - P: When ‘P’ is configured, pressing Enter or Shift+Enter will create a ‘p’ tag. - DIV: When ‘DIV’ is configured, pressing Enter or Shift+Enter will create a ‘div’ tag. - BR: When ‘BR’ is configured, pressing Enter or Shift+Enter will create a ‘br’ tag. ## Formatting text - Format the selected content, whole paragraphs, or specific words or characters. - Format headings, quotations, code, paragraphs, etc. - Bold, italicize, underline, strikethrough, or capitalize letters and words. - Change paragraph indentation and spacing. - Select fonts and sizes. - Use subscripts and superscripts. - Select font color and the background color for the content. ## Auto formatting for Markdown syntax Autoformat enables quick content formatting using Markdown-like shortcodes. This eliminates the need for toolbar buttons or dropdowns for common formatting. As Markdown syntax such as # for headings, ** for bold, and * for italics are typed, the editor automatically converts it into HTML elements. ## Checklists Checklists (to-do lists) can be created directly within the Rich Text Editor. Users can easily add interactive checkbox items to their content, enabling task tracking and management within documents. ## Adding custom lists Create ordered (numbered) or unordered (bulleted) lists to organize the content in the Blazor Rich Text Editor. Change the bullet appearance for the unordered lists to circles or squares. Use different numbering formats for ordered lists such as lowercase Greek or uppercase Roman. ## Quick insert for table rows and columns Users can insert rows and columns into a table quickly. When hovering the mouse near the table edges, a “+” icon appears, enabling users to add rows or columns with a single click. ## Line height Users can adjust vertical spacing between lines of text, giving them control over how tightly or loosely the text is packed within paragraphs. This helps improve readability and visual balance in the content layout. ## Full screen text editor This built-in option makes the WYSIWYG HTML editor full screen (a full-page editor) for editing the content. ## Paste from Microsoft Word and Excel The Blazor Rich Text Editor offers built-in options to paste content with images from Microsoft Word, Microsoft Outlook, and Microsoft Excel by filtering out tags, attributes, and styles. Additionally, choose whether the content should be pasted as plain text, with cleaned styles, or with source formatting. ## Auto hyperlink to URL The control turns text into a hyperlink automatically when a user types a URL as plain text. ## Form validations The RTE seamlessly supports forms and obtains values on form submission. The two types of validation are: - Required validation - Maximum length validation ## Limit content length Users can restrict the number of characters in a particular section. ## Resizable editor The Blazor Rich Text Editor can be resized, allowing users to widen or shrink the content area. ## Format painter Use the format painter to copy formatting and apply it to your content, eliminating the need for tedious reformatting. Access the format painter through the toolbar or keyboard shortcuts for quick and easy application. Take advantage of the sticky mode by double-clicking the toolbar button, which allows you to apply formats to multiple locations. ### Cut, copy, and paste The Blazor Rich Text Editor component supports clipboard operations (cut, copy, and [paste](https://blazor.syncfusion.com/documentation/rich-text-editor/paste-cleanup)). ### Undo redo manager The Blazor Rich Text Editor manages the history of [undo and redo](https://blazor.syncfusion.com/documentation/rich-text-editor/miscellaneous#undoredo-manager) actions, enabling users to experiment with editing. ### Print the text editor content Print the WYSIWYG Rich Text Editor content either by using the print option from the toolbar or programmatically with applied formats. ### Touch-friendly and responsive WYSIWYG editor The Blazor Rich Text Editor (mobile HTML editor) recognizes touch gestures, allowing users to swipe left or right to move the toolbar. The responsive, mobile-friendly design provides the best user experience on all mobiles, tablets, and desktop form factors. ### Built-in and customizable themes The Blazor Rich Text Editor is shipped with several built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. ### Developer-friendly APIs There are sufficient client-side APIs available to enhance the process of content editing. ### Keyboard navigation The RTE ensures that every cell is accessible using the keyboard. Major features like sort, select, and edit can be performed using keyboard commands alone; no mouse interaction is required. This helps in creating highly accessible applications using this component. ### Screen reader The editor view has complete WAI-ARIA accessibility support. The Rich Text Editor UI includes high-contrast visual elements that help visually impaired people to have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers. ### Right to left (RTL) The RTE supports right-to-left rendering, allowing the text and layout of the text editor to be displayed from right to left. This improves the user experience and accessibility for users of RTL languages such as Arabic, Farsi, and Hebrew. Edit HTML with WYSIWYG tools 25+ interactive demos ## Other supported frameworks The Rich Text Editor is also available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React Rich Text Editor](https://www.syncfusion.com/react-components/react-rich-text-editor) - [Angular Rich Text Editor](https://www.syncfusion.com/angular-components/angular-wysiwyg-rich-text-editor) - [JavaScript Rich Text Editor](https://www.syncfusion.com/javascript-ui-controls/js-rich-text-editor) - [Vue Rich Text Editor](https://www.syncfusion.com/vue-components/vue-wysiwyg-rich-text-editor) ## Supported browsers The Blazor Rich Text Editor works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [Get started with the Blazor server-side Rich Text Editor](https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started) [Start with Blazor WebAssembly Rich Text Editor](https://blazor.syncfusion.com/documentation/rich-text-editor/how-to/blazor-web-assembly) [Get started with the Blazor WebAssembly Rich Text Editor](https://blazor.syncfusion.com/documentation/rich-text-editor/how-to/blazor-web-assembly) [Documentation](https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started) [Features and bugs](https://www.syncfusion.com/feedback/blazor-components?control=rich-text-editor) These Blazor Rich Text Editor blog and tutorial videos posts will guide you in building your first app with this Blazor component. They provide problem-solving strategies, describe features and functionalities, announce new feature releases, explain best practices, and showcase example scenarios. Explore our latest posts on our blog and tutorial video channels for Blazor Rich Text Editor updates. [Blazor AI Integration: How to Use OpenAI (ChatGPT) in Syncfusion Rich Text Editor](https://www.syncfusion.com/blogs/post/blazor-ai-integration-openai-rich-text-editor) [Export Blazor Rich Text Editor Content to PDF](https://www.syncfusion.com/tutorial-videos/blazor/rich-text-editor?title=export-blazor-rich-text-editor-content-to-pdf) [Seamlessly Import and Export in Blazor Rich Text Editor](https://www.syncfusion.com/blogs/post/import-export-blazor-rich-text-editor) [Import and Export RTF in Blazor Rich Text Editor](https://www.syncfusion.com/tutorial-videos/blazor/rich-text-editor?title=import-and-export-rtf-in-blazor-rich-text-editor) ##### Blazor Markdown Editor | WYSIWYG MD Editor | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-rich-text-editor/wysiwyg-markdown-editor ## Markdown Editor Blazor Markdown Editor is a lightweight, intuitive component designed for seamless Markdown-to-HTML conversion. It empowers users to create and edit content in Markdown format easily. Paired with a third-party plugin, the editor offers real-time previews of typed Markdown syntax, blending simplicity with functionality. ## Markdown syntax The Markdown editor supports customizable Markdown syntax (MD syntax), allowing users to tailor rules and extend functionality. Integrated with built-in commands, it ensures a flexible, personalized editing experience while harmonizing with the editor’s formatting capabilities. - [Blazor Markdown editor with custom format example](https://blazor.syncfusion.com/demos/markdown-editor/custom-format?theme=tailwind3) - [Custom markdown syntax documentation](https://blazor.syncfusion.com/documentation/markdown-editor/custom-format) ## Toolbar with rich set of tools The Markdown editor toolbar provides a variety of commands for editing and formatting the content. Users can format text, insert images, add headers, insert hyperlinks, create lists, and preview results. The commands are grouped together based on related functionality. - [Markdown editor supported tools documentation](https://blazor.syncfusion.com/documentation/markdown-editor/supported-markdown) ### Multi-row toolbar The excess toolbar commands are wrapped in the next rows within toolbar in the Markdown text editor. ### Expand toolbar The overflow toolbar commands hidden in the next row become visible when the toolbar is expanded via the expand icon. ### Floating the toolbar The Markdown editor toolbar doesn’t stick with top of the editor, but floats within the editor area while scrolling the editor page. - [Floating toolbar documentation](https://blazor.syncfusion.com/documentation/markdown-editor/toolbar#creating-a-sticky-toolbar) ### Custom tools Users can also add their own commands (tools) with actions to the toolbar along with the built-in commands to enhance the markdown text editor. - [Custom toolbar documentation](https://blazor.syncfusion.com/documentation/markdown-editor/toolbar#custom-toolbar-items) ## Editing experience The Markdown editor component offers a comprehensive set of tools and options to enhance the editing experience, enabling users to apply rich text formatting such as bold, italics, underline, and strikethrough. It also supports inserting images, tables, and links, ensuring a seamless and efficient content creation process with Markdown syntax. ### Formatting commands Users can apply formatting to the selected content, whole paragraphs, or specific words or characters: - Apply formatting to headings, quotations, code, paragraphs. - Bold, italicize, underline, or strikethrough selected words. ### Insert images Users can insert images in the Markdown editor from a local path or server path with image alt text and then link URLs to the images. - [Blazor Markdown insert images example](https://blazor.syncfusion.com/demos/markdown-editor/overview?theme=tailwind3) ### Markdown links Insert or change the hyperlinks with display text in markdown syntax. ## Insert markdown table Users can insert tables with rows and columns in the Markdown editor to display grid-like tabular data. ## Adding lists Create ordered (numbered) or unordered (bulleted) lists to organize content markdown syntax. ## Markdown to HTML Integrating third-party Markdown parsers like marked or remark allows users to preview Markdown content as an HTML view in a Rich Text Editor by converting Markdown syntax into formatted HTML in real time. This allows users to write Markdown on one side of the editor while instantly viewing the rendered output, improving readability and editing efficiency. - [Markdown to HTML conversion documentation](https://blazor.syncfusion.com/documentation/markdown-editor/markdown-preview) ## @Mention Integration Engage collaborators effortlessly with built-in @mention support, fostering seamless interaction within the editor. - [Markdown mention integration documentation](https://blazor.syncfusion.com/documentation/markdown-editor/mention-support) ## Localization Enabling localization in a Markdown editor allows users from different locales to customize text direction, language, and numbering formats based on their preferences. ## Adapts to any resolution The Markdown editor has a highly responsive layout and an optimized design for desktops, touch screens, and smart phones. It works well on all mobile phones that use iOS, Android, or Windows OS. ## Built-in and customizable themes The Markdown editor is shipped with several built-in themes such as Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. ## Accessibility The Markdown editor view has complete WAI-ARIA accessibility support. The Rich Text Editor UI includes high-contrast visual elements that help visually impaired people to have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers. Edit HTML with WYSIWYG tools 25+ interactive demos ##### Blazor DatePicker - Visual Calendar Date Picker | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-datepicker # Blazor DatePicker - A Responsive Calendar Picker Component - A lightweight, feature-rich, and easily configurable text-input datepicker component. - Built-in features such as validation, custom date formats, range restriction, and disabling of dates enhance the progressive usage. - Flexibility to use a month or year date picker. ## Overview The Blazor DatePicker is a lightweight and mobile-friendly component that allows end users to enter or select a date value. It has month, year, and decade views to navigate quickly to a desired date. It supports minimum dates, maximum dates, and disabled dates to restrict the date selection. ## Month or year picker Select only a month or year as a value (month picker or year picker) from a pop-up calendar. ## Custom date format Change the default culture’s date format in the text box to improve readability or to enter the date properly. ## Date selection within a date range You can restrict the Blazor DatePicker component so that only a date value within a specific range of dates can be entered or selected by specifying the minimum and maximum dates. ## Disabled dates Disable any date in a date picker to show it as an inactive date. Easily prevent weekends and holidays from selection by disabling them in the pop-up calendar. ## Form support and date validation Date values are validated within a minimum and maximum range. Strict mode behavior is used to enforce entering only a valid date value. In a form component, integrate the form validation plugin to perform custom validation in the date text box. ## DatePicker with multiple language Change the culture-specific date format and first day of the week. Translate the names of months, days, and the today button text to any supported language with our globalization features. ## Custom DatePicker The Blazor DatePicker component has a standard, built-in theme but provides you with complete control over its appearance, letting you customize its style to suit your application. ## Highlight weekends Highlight any date in a year or every weekend in a month as special days using custom styling. ## Change first day of week Auto-update the first day of the week by specifying the culture or change it based on your application. ## Week number Show the week number of the selected day in the pop-up calendar by enabling the week number option. ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility that helps the DatePicker be accessed by on screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing keyboard interaction. - Uses [WCAG 2.0](https://www.w3.org/TR/WCAG20/)-based design for UI element visuals such as foreground color, background color, line spacing, text and images - Supports right-to-left (RTL) direction for users working in right-to-left languages like Hebrew and Arabic. ## Mobile-friendly responsive DatePicker UI The Blazor DatePicker component provides a responsive mode that gives an adaptive, redesigned UI appearance for mobile devices. ## Developer-friendly API’s You have control over all the UI elements and behaviors of the components with a rich set of developer-friendly APIs so that you can provide the best experience to your end users. ## Built-in themes The Blazor DatePicker component supports several built-in themes: Tailwind CSS, Fluent, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, and high contrast. Users can customize any one of these built-in themes or create new themes to achieve their own desired look and feel either by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio Application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Other supported frameworks DatePicker is also available in JavaScript, Angular, React and Vue frameworks that are built from their own TypeScript libraries. Check out the different DatePicker platforms from the links below, - [JavaScript DatePicker](https://www.syncfusion.com/javascript-ui-controls/js-datepicker) - [Angular DatePicker](https://www.syncfusion.com/angular-components/angular-datepicker) - [React DatePicker](https://www.syncfusion.com/react-components/react-datepicker) - [Vue DatePicker](https://www.syncfusion.com/vue-components/vue-datepicker) ## Blazor DatePicker Code Example Easily get started with the Blazor DatePicker using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor DatePicker Example](https://blazor.syncfusion.com/demos/datepicker/default-functionalities?theme=fluent) that shows you how to render and configure the DatePicker in Blazor. - razor [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor DateRangePicker | Rich UI for Date Ranges | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-daterangepicker # Blazor DateRangePicker - Highly Configurable Component - An advanced DateRangePicker component with highly customizable options. - A first Material-designed DateRangePicker for all devices. - A rich feature set including spans of days, range restriction, predefined dates (like last 30 days), validation, and automatic formatting takes this component to the next level of usage. ## Overview The Blazor DateRangePicker is a lightweight and mobile-friendly component that allows end users to select start and end dates as a range from a calendar pop-up or by entering the value directly in an HTML input text box. ### Customizable date formats The Blazor DateRangePicker component’s input value can be customized in addition to the default [culture-specific date format](https://blazor.syncfusion.com/demos/daterangepicker/format?theme=bootstrap5). ### Preset range Define [preset ranges](https://blazor.syncfusion.com/demos/daterangepicker/preset-ranges?theme=bootstrap5) (like last 30 days or last week) to set date ranges frequently used by the end users. ### Adapts to any resolution The Date Range Picker has a highly responsive layout and an optimized design for desktops, touch screens, and smart phones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Specific date restrictions [Restricts dates](https://blazor.syncfusion.com/documentation/daterangepicker/range-restriction) outside the min and max date ranges, allowing only valid dates to be entered. Users cannot enter or choose restricted dates. ### Attractive customizable themes Cutting edge design with 5+ built-in themes such as Fluent, Tailwind CSS, Bootstrap, Material, Fabric, and more. Utilize the [online Theme Studio tool](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) to customize themes of Date Range Picker easily. ### Globalization and localization [Enables users from different locales](https://blazor.syncfusion.com/documentation/daterangepicker/globalization) to use the DateRangePicker by formatting dates, currency, and numbering to suit preferences. ## Blazor DateRangePicker Code Example Easily get started with the Blazor DateRangePicker using a few simple lines of C# code example as demonstrated below, Also explore our [Blazor DateRangePicker Example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap5) that shows you how to render the DateRangePicker component in Blazor. - razor ## DateRangePicker with multiple language Globalization translates the names of months, days, and the today button text to any supported language. The date format and first day of the week are set to specific cultures. - [Globalization documentation](https://blazor.syncfusion.com/documentation/daterangepicker/globalization) ## Date selection within a range Enter or select a value within a specific range of dates by defining the min and max properties. - [Date selection example](https://blazor.syncfusion.com/demos/daterangepicker/date-range?theme=bootstrap5) ## Date-range validation The Blazor Date Range Picker allows display of date ranges. When the date value is out of this range, validation error is triggered. The invalid and out-of-date-range values are set in a disabled state to prevent users from entering them or selecting them. - [Example of date range validation](https://blazor.syncfusion.com/demos/daterangepicker/forms-validation?theme=bootstrap5) ## Customize DateRangePicker The appearance of the component can be completely changed. Customize the application’s look and feel according to the requirement. - [Customization documentation](https://blazor.syncfusion.com/documentation/daterangepicker/customization) ## Week number Show the week numbers in the pop-up calendar. - [Week number documentation](https://blazor.syncfusion.com/documentation/daterangepicker/week-number) ## First day of week Change the first day of the week for every month. - [First day of week documentation](https://blazor.syncfusion.com/documentation/daterangepicker/customization#first-day-of-week) ### Keyboard navigation The Blazor DateRangePicker component ensures that every cell is accessible using the keyboard. Major features like sort, select, and edit can be performed using keyboard commands alone; no mouse interaction is required. This helps in creating highly accessible applications using this component. - [Keyboard navigation documentation](https://blazor.syncfusion.com/documentation/daterangepicker/accessibility#keyboard-navigation) ### Screen reader The Blazor DateRangePicker view has complete WAI-ARIA accessibility support. The DateRangePicker UI includes high-contrast visual elements that help visually impaired people to have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers. ### Right to left (RTL) Right-to-left rendering allows displaying the text and layout of the DateRangePicker from right to left. This improves the user experience and accessibility for RTL languages. - [RTL documentation](https://blazor.syncfusion.com/documentation/daterangepicker/globalization#right-to-left) Customizable date formats Specific date restrictions Inline and pop-up modes ## Other supported frameworks The DateRangePicker is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React Date Range Picker](https://www.syncfusion.com/react-components/react-date-range-picker) - [Angular DateRangePicker](https://www.syncfusion.com/angular-components/angular-daterangepicker) - [JavaScript DateRangePicker](https://www.syncfusion.com/javascript-ui-controls/js-daterangepicker) - [Vue DateRangePicker](https://www.syncfusion.com/vue-components/vue-date-range-picker) ## Supported browsers The Blazor DateRangePicker works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [Documentation](https://blazor.syncfusion.com/documentation/daterangepicker/getting-started) ##### Blazor DateTime Picker | Customizable Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-datetime-picker # Blazor DateTime Picker - Responsive DateTime Picker Component - A user-friendly and advanced text input datetime picker. - Built-in validation, auto date and time format, range restriction and three different standard themes, including Material design. - Highly customizable interface. ## Overview The Blazor DateTime Picker is a lightweight and mobile-friendly component that allows users to enter or select date and time values from a pop-up calendar and drop-down time list. It provides month, year, and decade views for quick navigation to the desired date. ## Blazor DateTime Picker Code Example Easily get started with the Blazor DateTime Picker using a few simple lines of C# code as demonstrated below. Also explore our [Blazor DateTime Picker Example](https://blazor.syncfusion.com/demos/datetime-picker/default-functionalities?theme=bootstrap5) that shows you how to render and configure the DateTime Picker in Blazor. - razor ## Custom date and time format Change the default culture’s specific date and time format in the text box to improve readability. ## Date and time range You can restrict the DateTime Picker, so that only date and time values within a specific range can be entered or selected by specifying the min and max date time options. - [Date and time range documentation](https://blazor.syncfusion.com/documentation/datetime-picker/date-time-range) ## Disable dates The DateTimePicker allows you to disable specific days. Easily prevent weekends and holidays from selection by disabling them in the pop-up calendar. - [Disable dates documentation](https://blazor.syncfusion.com/documentation/datetime-picker/date-time-format#display-date-and-time-format) ## DateTime Picker in multiple languages Update the culture-specific datetime format and first day of the week, and translate the names of months, days, and today button text to any supported language with our globalization feature. - [Globalization documentation](https://blazor.syncfusion.com/documentation/datetime-picker/globalization) ## Date and time validation Allow only valid values to be entered in the DateTime Picker control’s input by validating them with disabled, out-of-min, and out-of-max date-time. ## Custom DateTime Picker In addition to the standard built-in themes, Blazor DateTime Picker allows complete customization of its appearance to suit your application. ## Highlight weekends Highlight any date in a year or every weekend in a month as special days using custom styling. ## Change the first day of the week Auto-update the first day of the week based on the specified culture or change it based on your application. ## Week number in popup calendar Show the week number of the selected day in the pop-up calendar by enabling the week number option. - [Week number documentation](https://blazor.syncfusion.com/documentation/datetime-picker/week-number) ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility that allows the DateTime Picker to be accessed by screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing keyboard interaction. - Uses [WCAG 2.0](https://www.w3.org/TR/WCAG20/) based design for UI element visuals such as foreground color, background color, line spacing, text, and images - Supports right-to-left (RTL) direction for users working with right-to-left languages like Hebrew and Arabic. - [Web accessibility documentation](https://blazor.syncfusion.com/documentation/datetime-picker/accessibility) ## Responsive UI The Blazor DateTime Picker provides a responsive mode that gives an adaptive UI appearance for mobile devices. ## Developer-friendly APIs You can control all UI elements and their behaviors according to the end user’s requirements using a rich set of developer-friendly APIs. ## Built-in themes The Blazor DateTime Picker supports built-in themes such as Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, and High Contrast. Users can customize these built-in themes or create new themes to achieve the desired look and feel either by simply overriding SASS variables or using the Theme Studio application. - [Theme Studio Application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Other supported frameworks The DateTime Picker is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React DateTime Picker](https://www.syncfusion.com/react-components/react-datetime-picker) - [Angular DateTime Picker](https://www.syncfusion.com/angular-components/angular-datetime-picker) - [JavaScript DateTime Picker](https://www.syncfusion.com/javascript-ui-controls/js-datetime-picker) - [Vue DateTime Picker](https://www.syncfusion.com/vue-components/vue-datetimepicker) ## Supported browsers The Blazor DateTime Picker works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [Documentation](https://blazor.syncfusion.com/documentation/datetime-picker/getting-started) ##### Blazor TimePicker - Display & Select Time | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-timepicker # Blazor TimePicker - Responsive & Customizable Time Format Component - A lightweight and advanced drop-down menu timepicker to interact with time. - Out-of-the-box, built-in features such as validation, custom time formatting, inactive times, time ranges, and step intervals. - Industry standard themes are included: Material, Fabric, and Bootstrap. ## Overview Blazor Time Picker is a lightweight and mobile-friendly component that allows end users to select a time value either from a pop-up time list or by entering the value directly in the text box. ## Time formatting The Blazor TimePicker component has a default, culture-specific time format, but it can be custom formatted. ## Disabled time Disable any of the time values in a pop-up list to prevent the selection of those times. ## Time range Restrict the entry or selection of a time value within a specific range of time by using min and max properties. ## Globalization The Blazor TimePicker component supports globalization like internationalization and localization that updates the time format value in the pop-up list to match a specified culture. ## Time interval Increment or decrement each time value of the selection list by one step at a time. You can change the steps based on your needs. ## UI customization The appearance of the Blazor TimePicker component can be customized completely based or your modern web and mobile applications. ## Time list with duration Customize the pop-up list items with time duration. ## HTML form validation HTML form validation allows only a valid value to be entered in the TimePicker control’s text box. Disabled ranges or out-of-range times are validated. ## Scroll position Set the scroll position to a custom time value if no value is selected. ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility that helps the timepicker component be accessed by on-screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing keyboard interaction. - Follows the [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standard in the design of the UI element visuals such as foreground color, background color, line spacing, text, and images. - • Supports right-to-left (RTL) direction for users working in right-to-left languages like Hebrew and Arabic. ## Mobile-friendly UI The Blazor TimePicker control’s responsive mode has an adaptive, redesigned UI appearance for mobile devices. ## Developer-friendly APIs End users receive the best experience thanks to the full UI component granted by developer-friendly APIs. ## Built-in themes The Blazor TimePicker supports several built-in themes such as Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, and High Contrast. Users can customize any one of these built-in themes or create new themes to achieve their own desired look and feel either by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio Application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Blazor TimePicker Code example Easily get started with the Blazor TimePicker using a few simple lines of C# code, as demonstrated below. Also, explore our [Blazor TimePicker Example](https://blazor.syncfusion.com/demos/timepicker/default-functionalities?theme=fluent2), which shows you how to include the Blazor TimePicker component with highlight customization. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/rZVyDCXxzeldjeqk) - razor ## Other supported frameworks TimePicker is also available in Angular, React, Vue and JavaScript frameworks that are built from their own TypeScript libraries. Check out the different TimePicker platforms from the links below, - [JavaScript TimePicker](https://www.syncfusion.com/javascript-ui-controls/js-timepicker) - [Angular TimePicker](https://www.syncfusion.com/angular-components/angular-timepicker) - [React TimePicker](https://www.syncfusion.com/react-components/react-timepicker) - [Vue TimePicker](https://www.syncfusion.com/vue-components/vue-timepicker) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Button | Customizable Design and Function | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-button # Blazor Button - Simple, Perfect Image Button Component - Fully customizable buttons with icon support to visually represent button actions. - Different types of buttons like outline, primary, link, and toggle. - Built-in support for success, warning, info, and danger button styles. ## Overview The Blazor Button is a custom HTML5 button control. It has several built-in features such as support for icons, predefined styles, different button types, different button sizes, and UI customization. Toggle and repeat button functionality can be achieved by handling a click event. ## Icon button Users tend to perceive visual information more readily than text. To this end, an icon button has been designed to include an icon to the right or left of the button text or provide an icon-only button. - [Icon button documentation](https://blazor.syncfusion.com/documentation/button/types-and-styles#icons) ## Action or link button The Blazor Button Component can be used to visually represent a hyperlink with both an icon and text. ## Outline button The Blazor Button can be styled with a border and a transparent background. ## Predefined styles Several predefined styles of Blazor button are available: - Primary - Success - Info - Warning - Danger - Link You can use theme based on the context of your application. - [Blazor Button style documentation](https://blazor.syncfusion.com/documentation/button/types-and-styles) ## Button size You can choose from different button sizes, default and small, as required in your application. - [Blazor Button size documentation](https://blazor.syncfusion.com/documentation/button/types-and-styles#button-size) ## Disable button The Blazor disabled button is used to indicate the inactive state of a button. It can be enabled or disabled by using the [disabled](https://help.syncfusion.com/cr/blazor/syncfusion.blazor.buttons.sfbutton.html#Syncfusion_Blazor_Buttons_SfButton_Disabled) property. - [Disabled button Documentation](https://blazor.syncfusion.com/documentation/button/how-to/set-the-disabled-state) ## Button UI customization You can choose from built-in Blazor button types such as outline, block, and round buttons. Also, you can customize the Blazor button’s appearance. ## Built-in themes The Blazor Button supports several built-in themes such as Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize one of these built-in themes or create new themes to achieve their desired look and feel by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#button) accessibility practices to work with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#button) best practices for implementing keyboard interaction. - Based on [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, we designed the UI element visuals such as foreground color, background color, line spacing, text, and images. - Supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian. ## Blazor Button Code Example Easily get started with the Blazor Button using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor Button Example](https://blazor.syncfusion.com/demos/buttons/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Blazor buttons. - razor ## Other supported frameworks Button is also available in Angular, React, Vue and JavaScript frameworks that are built from their own TypeScript libraries. Check out the different Button platforms from the links below, - [JavaScript Button](https://www.syncfusion.com/javascript-ui-controls/js-button) - [Angular Button](https://www.syncfusion.com/angular-components/angular-button) - [React Button](https://www.syncfusion.com/react-components/react-button) - [Vue Button](https://www.syncfusion.com/vue-components/vue-button) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Dropdown Menu | Rich UI Customization | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-dropdown-menu # Blazor Dropdown Menu - An Highly Customizable Templates - Built-in support for Success, Warning, Info, and Danger button styles. - Automatic collision detection and handling with pop-up menu flip-and-fit. - Quick configuration for popup menu item customization. ## Overview The Blazor Dropdown Menu is a graphical user interface component that lets users choose from a list of actions that can be triggered. It has built-in support for icons and their positioning, various sizes, separators, RTL, and UI customization. ## Blazor Dropdown Menu Code Example Easily get started with the Blazor Dropdown Menu using a few simple lines of C# code as demonstrated below. Also explore our [Blazor Dropdown Menu Example](https://blazor.syncfusion.com/demos/buttons/dropdown-menu?theme=bootstrap5) that shows you how to render and configure the Dropdown Menu in Blazor. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/hjLfXMgCVVySOSOn) - razor ## Dropdown Button size You can make use of different dropdown button sizes (default and small). ## Menu items with icons Users tend to perceive visual information better than text. The Blazor Dropdown Menu has built-in options to include an icon to the left or above the text, or provide an icon-only button. ## Popup menu The Blazor popup menu is a toggleable container that holds a list of action items or custom content that will open or close when the button is clicked. You can customize all the items in a dropdown menu. - [Blazor Popup menu documentation](https://blazor.syncfusion.com/documentation/drop-down-menu/popup-items) ## Appearances The appearance of a dropdown menu is highly customizable. Change the look and feel of Dropdown Menu by customizing its default appearance and style using HTML and CSS. - [Blazor Styles and Appearances documentation](https://blazor.syncfusion.com/documentation/drop-down-menu/style-and-appearance) ## Menu divider and separator You can use a horizontal line separator to represent similar action items as a group within the list of available items. ## Icon-only Dropdown Button You can make use of the icon-only Dropdown Button without button text. ## Dropdown Menu position Customize position values to display the Blazor Dropdown Menu above, to the right, or to the left of the dropdown button. ## UI Customization You can customize the dropdown button size, appearance, and feel. The Blazor dropdown menu popup element is completely customizable. ### Dropdown Button without arrow icon You can configure a dropdown to open the popup menu without the arrow icon. ### Popup menu with multilevel submenu You can configure context menu control to add submenu items in Blazor Dropdown Menu. ## Themes Blazor Dropdown menu Component supports built-in themes such as Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize any one of these built-in themes or create new themes with ease to achieve their own desired look and feel either by simply overriding SASS variables or using our Theme Studio application. - [Theme studio Application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility to work with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing keyboard interaction. - Follows [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards in the design of UI element visuals such as foreground color, background color, line spacing, text and images. - Supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian. ## Developer-friendly APIs In Blazor Dropdown Menu, you have control over all the UI elements and their behaviors. It provides the best user experience to users through a rich set of developer-friendly APIs. - [Blazor Dropdown Menu API reference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html) ## Other supported frameworks The Dropdown Menu is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React Dropdown Menu](https://www.syncfusion.com/react-components/react-dropdown-menu) - [Angular Dropdown Menu](https://www.syncfusion.com/angular-components/angular-dropdown-menu) - [JavaScript Dropdown Menu](https://www.syncfusion.com/javascript-ui-controls/js-dropdown-menu) - [Vue Dropdown Menu](https://www.syncfusion.com/vue-components/vue-dropdown-menu) ## Supported browsers The Blazor Dropdown Menu works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [Documentation](https://blazor.syncfusion.com/documentation/drop-down-menu/getting-started) ##### Blazor Progress Button – Rich Progress Indicator | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-progress-button # Blazor Progress Button - A Rich Animated Component - Built-in support for different types, styles, and icons. - Seamless support for spinners and progress visuals with built-in animations. - Flexible UI customization of spinners and progress visuals with fluent APIs. ## Overview The Blazor Progress Button is a graphical user interface component used to visualize the progression of an operation in the background. It has built-in features such as predefined styles, different button types, and spinner and UI customization. ## Progress Button icons Users tend to perceive visual information more easily than text. Include an icon to the right, left, top, or bottom of text in a button or provide an icon-only button. ## Predefined styles The Blazor Progress Button control has the following predefined styles: - Primary - Success - Info - Warning - Danger ## Custom Progress Button Progress buttons can be customized in multiple ways. You can choose from default and small button sizes. - [Custom Blazor Progress Button documentation](https://blazor.syncfusion.com/documentation/progress-button/how-to/customize-progress-using-cssclass) ## Themes The Blazor Progress Button control supports several built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, and high contrast. Users can customize any of these built-in themes or create new themes to achieve their desired look and feel either by simply overriding Sass variables or using the Theme Studio application. - [Theme Studio application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility to work with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing keyboard interaction. - Follows [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards in the design of the UI element visuals such as foreground color, background color, line spacing, text, and images. - Supports right-to-left (RTL) text direction for users working with right-to-left languages like Hebrew, Arabic, or Persian. ## Developer-friendly APIs Developers can customize all the UI elements and behaviors of the Blazor Progress Button control using its rich set of client-side APIs. ## Blazor Progress Button code example Easily get started with the Blazor Progress Button using a few simple lines of C# code as demonstrated below. Also explore our [Blazor Progress Button example](https://blazor.syncfusion.com/demos/buttons/progress-button?theme=bootstrap5) that shows you how to render and configure the Progress Button in Blazor. - razor ## Other supported frameworks Progress Button is also available in JavaScript, Angular, React, and Vue frameworks that are built from their own TypeScript libraries. Check out the different Progress Button platforms from the links below: - [JavaScript Progress Button](https://www.syncfusion.com/javascript-ui-controls/js-progress-button) - [Angular Progress Button](https://www.syncfusion.com/angular-components/angular-progress-button) - [React Progress Button](https://www.syncfusion.com/react-components/react-progress-button) - [Vue Progress Button](https://www.syncfusion.com/vue-components/vue-progress-button) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Split Button - Most Popular Menu Button | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-split-button # Blazor Split Button - Interactive Menu Component - Built-in support for success, warning, info, and danger button styles. - Automatic collision detection and handling with pop-up menu flip-and-fit. - Quick configuration for pop-up menu item customization. ## Overview The Blazor Split Button triggers a default action when the primary button is clicked and provides a list of actions when the dropdown button is clicked. It has built-in support for icons and their positioning, varied sizes, disabling items, separators, RTL, and UI customization. ## Blazor Split Button code example Easily get started with the Blazor Split Button using a few simple lines of C# code, as demonstrated in the following. Also explore our [Blazor Split Button example](https://blazor.syncfusion.com/demos/buttons/split-button?theme=bootstrap5) that shows you how to render and configure the Split Button in Blazor. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/LZrpDWAsVgqfosbm) - razor ## Split Button size You can make use of different split button sizes, default and small. ## Menu items with icons Users tend to perceive visual information better than text. The Blazor Split Button has built-in options to include an icon to the left of or above the text and provide an icon-only button. - [Pop-up with icons documentation](https://blazor.syncfusion.com/documentation/split-button/icons#split-button-icons) ## Pop-up menu The pop-up is a toggleable container that holds a list of action items or custom content that will open or close when the button is clicked. You can customize all the items in a pop-up. ## Menu divider and separator You can use a horizontal line separator to represent similar action items as a group within the list of available items. - [Pop-up menu with separator documentation](https://blazor.syncfusion.com/documentation/split-button/icons#separator) ## Built-in themes The Blazor Split Button supports built-in themes such as Bootstrap 5, Tailwind CSS, Fluent, high contrast, and more. Users can customize these built-in themes or create new themes to achieve the desired look and feel either by simply overriding SASS variables or using the Theme Studio application. - [Theme Studio Application](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility to work with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing keyboard interaction. - Follows [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards in design of the UI element visuals such as foreground color, background color, line spacing, text, and images. - Supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian. ## Developer-friendly APIs In the Blazor Split Button, you have control over all the UI elements and behaviors. You can provide the best user experience to users through a rich set of developer-friendly APIs. - [API reference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.html) ## Other supported frameworks The Split Button is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React Split Button](https://www.syncfusion.com/react-components/react-split-button) - [Angular Split Button](https://www.syncfusion.com/angular-components/angular-split-button) - [JavaScript Split Button](https://www.syncfusion.com/javascript-ui-controls/js-split-button) - [Vue Split Button](https://www.syncfusion.com/vue-components/vue-split-button) ## Supported browsers The Blazor Split Button works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [I’d love to read it now.](https://blazor.syncfusion.com/documentation/split-button/getting-started) [Documentation](https://blazor.syncfusion.com/documentation/split-button/getting-started) ##### Blazor Toast - Notification Pop-up | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-toast # Blazor Toast - A Beautiful Notification Pop-up - Animated notification pop-up that is small and nonblocking. - Fully customizable notification with timing and a progress bar. - Predefined standard notification types such as success, error, warning, and information. ## Overview Blazor Toast is a small, nonblocking notification pop-up. A Blazor toast is shown to users with readable message content at the bottom of the screen or at a specific target and disappears automatically after a few seconds (time-out) with different animation effects. The control has various built-in options for customizing visual elements, animations, durations, and dismissing toasts. ## Positioning notifications The Blazor toast notifications component is easily positioned wherever you want using built-in positions or custom axis values (X, Y). ## Animation Users can configure different animations to show or hide the Blazor Toast, and configure the animation duration based on the content length of the notification message and reading time. ## Dismiss toasts Users can dismiss all Blazor toast notification messages through user input or time-outs. Or they can be dismissed by swiping or tapping on notifications. ## Toast message types Users can easily design common Blazor toast notifications using built-in classes such as success, warning, information, and error. ## Timing (duration) The Blazor toast notification component can be configured with a duration time for the complete message to be read in before it is hidden. You can extend the timeout dynamically after focusing on it. ## Progress bar Users can enable a progress bar inside the toast to track the progress of an operation and the expiration of a toast message. ## Toast message validation Users can validate duplicate toast notifications and allow only distinct toast messages on the screen. They can restrict the maximum number of toasts that are displayed. Also, users can prevent toast messages from hiding and make them stick with the screen. ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#tabpanel) accessibility that makes toast accessible to on-screen readers and assistive devices. - Follows the [WCG 2.0 standard](https://www.w3.org/TR/WCAG20/) in the design of the UI visual elements such as foreground color, background color, line spacing, text, and images. ## Other supported frameworks Toast is also available in JavaScript, Angular, React and Vue frameworks that are built from their own TypeScript libraries. Check out the different Toast platforms from the below links, - [JavaScript Toast](https://www.syncfusion.com/javascript-ui-controls/js-toast) - [Angular Toast](https://www.syncfusion.com/angular-components/angular-toast) - [React Toast](https://www.syncfusion.com/react-components/react-toast) - [Vue Toast](https://www.syncfusion.com/vue-components/vue-toaster) ## Blazor Toast Code Example Easily get started with the Blazor Toast using a few simple lines of Razor code example as demonstrated below. Also explore our [Blazor Toast Example](https://blazor.syncfusion.com/demos/toast/default-functionalities?theme=fluent) that shows you how to render and configure the Blazor Toast. - razor [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor AutoComplete Component | Auto suggest TextBox | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-autocomplete # Blazor AutoComplete - A Flexible Dropdown Component - High-performance loading and searching for huge volumes of data. - Easy integration with other controls such as the DataGrid for modern web and mobile applications. - Built-in support for autofill (auto-suggest), hierarchical data binding, highlighted search, and custom search (fuzzy search). ## Overview The Blazor AutoComplete (or typeahead) is a text box component that provides a list of suggestions to select from as the user types. It has several out-of-the-box features such as data binding, filtering, grouping, UI customization, and accessibility. ## Blazor AutoComplete Code Example Easily get started with the Blazor AutoComplete using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor AutoComplete Example](https://blazor.syncfusion.com/demos/autocomplete/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Blazor AutoComplete component. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/rXBfZBtWpTiyQDNT) - razor ## Filtering Built-in filtering support in the Blazor AutoComplete dropdown includes a rich set of filtering options to meet all your application needs. - [Filtering documentation](https://blazor.syncfusion.com/documentation/autocomplete/filtering) ### Filter type Filter data based on starts with, ends with, and contains predicates. ### Custom filtering You can customize the built-in filter query or use your own custom filter libraries to populate the data. ### Diacritic-sensitive search The typeahead component supports diacritic character-sensitive searching. This behavior can be turned on or off. ### Limit suggestion items Limit the number of suggestions to be displayed in the filtered data list. ### Ignore filter text casing You can filter data with or without using case sensitivity for typed characters. ### Minimum filter characters Set the number of characters required to begin filtering and populating the data. ## Highlight matched text The high-performance Blazor AutoComplete control lets you configure different visual appearances for the matching text of each suggestion. - [Blazor AutoComplete highlight matched text example](https://blazor.syncfusion.com/demos/autocomplete/highlight) ## Autofill search The Blazor AutoComplete component has an autofill search option that completes the word the user types based on the suggestion text, allowing the end user to search for items easily. - [Autofill search example](https://blazor.syncfusion.com/demos/autocomplete/data-binding?theme=bootstrap5) ## Grouping Group the suggestions based on logically grouped categories with individual headers. - [Blazor AutoComplete grouping example](https://blazor.syncfusion.com/demos/autocomplete/grouping-icon?theme=bootstrap5) - [Blazor AutoComplete grouping documentation](https://blazor.syncfusion.com/documentation/autocomplete/grouping) ## Suggestion list Generate a suggestion list for users as they type in the input text box. ### Dimension customization The width and height of the suggestion list is adjustable. - [Blazor AutoComplete dimension customization documentation](https://blazor.syncfusion.com/documentation/autocomplete/getting-started#configure-the-suggestion-list) ### Hide or avoid suggestion list It is possible to hide the default suggestion list and bind the search result to some other component, such as a DataGrid. ## Floating labels Developers can control whether the placeholder should float. ## Forms support The C# Blazor AutoComplete control seamlessly supports HTML5 forms, Angular template-driven forms, and Angular reactive forms. ## Mobile-friendly, responsive UI The Blazor AutoComplete control provides a responsive mode that displays an adaptive, redesigned UI for mobile devices that recognizes touch gestures. ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#combobox) accessibility standards that make the AutoComplete component accessible to screen readers and assistive devices. - Follows [WAI-ARIA best practices](https://www.w3.org/WAI/ARIA/apg/#combobox) for implementing keyboard interaction. - Designs the UI element visuals such as foreground color, background color, line spacing, text, and images based on the [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standard. - Supports right-to-left (RTL) rendering for users working in right-to-left languages like Hebrew, Arabic, or Persian. ## Developer-friendly APIs Developers can customize all UI elements and control their behaviors according to the end user’s requirements using the rich set of client-side APIs. ## Other supported frameworks The AutoComplete is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React AutoComplete](https://www.syncfusion.com/react-components/react-autocomplete) - [Angular AutoComplete](https://www.syncfusion.com/angular-components/angular-autocomplete) - [JavaScript AutoComplete](https://www.syncfusion.com/javascript-ui-controls/js-autocomplete) - [Vue AutoComplete](https://www.syncfusion.com/vue-components/vue-autocomplete) ## Supported browsers The AutoComplete works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [Documentation](https://blazor.syncfusion.com/documentation/autocomplete/getting-started) ##### Blazor ComboBox - Editable Input Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-combobox # Blazor ComboBox - An Editable Input Component with UI Customization - A great alternative to the HTML select tag, with a modern look and feel. - Editable combo box with advanced features, including auto suggestion, grouping, sorting, cascading, and more. - Supports complete customization of the UI and pop-up list through different template options. ## Overview The Blazor ComboBox component is a dropdown list with an editable option that also allows users to choose an option from a predefined pop-up list. It can be used as an alternative to the HTML select tag and has several out-of-the-box features such as data binding, filtering, grouping, cascading, templates, UI customization, pop-up list and customization. ## Custom value This editable combo box in Blazor allows the entry of a custom value when the option the user searched for is not available in the pop-up list. You can also set a value for the combo box or get the selected value from the combo box at any time through the interactive APIs. ## Filtering Built-in filtering support with a rich set of filtering configurations is available to meet all your application needs. - [Filtering example](https://blazor.syncfusion.com/demos/combobox/filtering) - [Filtering documentation](https://blazor.syncfusion.com/documentation/combobox/filtering) ### Custom filtering Filter queries are customizable, and you can use your own filter libraries to filter data. ### Diacritic sensitivity The Blazor ComboBox component supports diacritic character sensitivity. This behavior can be turned on or off. ### Filter settings The filter search can be customized with case sensitivity and can be performed with minimum query string characters. ## Grouping with categories Group the pop-up list items with a corresponding category that makes it easy for users to pick an item quickly from the dropdown and also improves the visual experience for users. - [Blazor ComboBox grouping example](https://blazor.syncfusion.com/demos/combobox/grouping-icon) ## Autofill The autofill option allows users to easily search through options in the combo box. When a user is typing a query string to search, the available matching options will be filled automatically. - [Blazor ComboBox autofill option example](https://blazor.syncfusion.com/demos/combobox/data-binding) ## Cascading combo boxes Provides an option to create multiple cascading combo boxes in Blazor, which helps users populate data for a child combo box based on the current selected value of the parent combo box. - [How to configure cascading combo boxes in Blazor?](https://blazor.syncfusion.com/demos/combobox/cascading) ## Forms support Since the ComboBox is a form component, it supports HTML forms, template-driven forms (Angular), and reactive forms. ## Mobile responsive UI The Blazor ComboBox component supports a responsive mode that provides an adaptive, redesigned UI appearance for mobile devices and touch actions. ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#combobox) accessibility guidelines to work with screen readers and assistive devices. - Follows [WAI-ARIA best practices](https://www.w3.org/TR/wai-aria-practices/#combobox) for implementing keyboard interaction. - Follows WCAG 2.0 standard in UI element visual design such as for foreground color, background color, line spacing, text, and images. - Supports right-to-left (RTL) rendering for users working in right-to-left languages like Hebrew, Arabic, or Persian. ## Developer-friendly APIs Developers can customize all UI elements and control their behaviors according to the end user’s requirements using the control’s rich set of client-side APIs. ## Blazor ComboBox Code Example Easily get started with the Blazor ComboBox using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor ComboBox Example](https://blazor.syncfusion.com/demos/combobox/default-functionalities) that shows you how to render and configure the Blazor ComboBox component. - razor ## Other supported frameworks The ComboBox control is also available in our Angular, React, Vue, and JavaScript frameworks, which were built from their own TypeScript libraries. Check out the ComboBox control in these different platforms from the following links. - [JavaScript ComboBox](https://www.syncfusion.com/javascript-ui-controls/js-combobox) - [Angular ComboBox](https://www.syncfusion.com/angular-components/angular-combobox) - [React ComboBox](https://www.syncfusion.com/react-components/react-combobox) - [Vue ComboBox](https://www.syncfusion.com/vue-components/vue-combobox) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Dropdown List | Customizable Templates | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-dropdown-list # Blazor Dropdown List - Rich UI Dropdown List Templates - An alternative to HTML select tags. - Built-in support for filtering, hierarchical data binding, grouping, and UI customization with templates. - Ability to create a cascading drop-down list to populate data to the next level drop-down based on the selected value of the parent. ## Overview The Blazor Dropdown List is a dynamic replacement of HTML select tags. It has a rich appearance and allows users to select a single value that is non-editable from a list of predefined values. It has several out-of-the-box features, such as data binding, filtering, grouping, UI customization, accessibility, and preselected values. ## Filtering and searching drop-down lists The Blazor Dropdown List component has built-in filtering support with filtering configurations to match all your application needs. Enable the filtering functionality to show the search input box in the drop-down pop-up list. - [Blazor Dropdown List filtering example](https://blazor.syncfusion.com/demos/dropdown-list/default-functionalities?theme=bootstrap5) ### Custom filtering Blazor filter queries can be customized. You can also use your own filter libraries to filter data like the fuzzy search. ### Diacritic sensitive search The high performance Blazor dropdown list has built-in diacritic sensitivity support. This can be turned on or off. ### Filter settings The filtered search can be customized with case sensitivity, and you can set the number of characters required to make a filtered search using the Blazor select list. ## Cascading drop-down list Create a Blazor cascading dropdown to help the user populate data to the next-level drop-downs based on the selected value of the parent. - [Cascading Dropdown List example](https://blazor.syncfusion.com/demos/dropdown-list/cascading) ## Grouping with category Group the pop-up list items with the corresponding category, making it easy to pick an item quickly from the select drop-down. - [Blazor Dropdown List grouping example](https://blazor.syncfusion.com/demos/dropdown-list/grouping-icon) - [Blazor Dropdown List grouping documentation](https://blazor.syncfusion.com/documentation/dropdown-list/grouping) ## HTML form support The Blazor Dropdown List is a form component that seamlessly supports HTML forms and obtains values on form submission. ## Dropdown List pop-up dimension The width and height of the pop-up option list is customizable. ## Sortable list items You can display items in ascending or descending order in a pop-up select option list. ## Drop-down floating label The Blazor Dropdown List component placeholder can float like a material design with impressive animation. ## Responsive drop-down list The component provides a responsive mode that gives an adaptive, redesigned UI appearance to mobile devices and is at ease with touch actions. ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#combobox) accessibility that makes a list view accessible to on-screen readers and assistive devices. - Follows [WAI-ARIA best practices](https://www.w3.org/WAI/ARIA/apg/#combobox) for implementing keyboard interaction. - Designed with UI element visuals such as foreground color, background color, line spacing, text, and images based on the [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standard. - Supports right-to-left (RTL) direction for users working in with languages like Hebrew, Arabic, or Farsi. ## Developer-friendly APIs Developers can customize all UI elements and control their behaviors according to the end user’s requirement using the control’s rich set of client-side APIs. ## Blazor Dropdown List Code Example Easily get started with the Blazor Dropdown List using a few simple lines of C# code example, as demonstrated below. Also, explore our [Blazor Dropdown List Example](https://blazor.syncfusion.com/demos/dropdown-list/default-functionalities), that shows you how to render and configure the Blazor Dropdown List. - razor ## Other supported frameworks Blazor bootstrap Dropdown List is also available in Angular, React, Vue and JavaScript frameworks that are built from their own TypeScript libraries. Check out the different Dropdown List platforms from the links below, - [Angular Dropdown List](https://www.syncfusion.com/angular-components/angular-dropdown-list) - [React Dropdown List](https://www.syncfusion.com/react-components/react-dropdown-list) - [Vue Dropdown List](https://www.syncfusion.com/vue-components/vue-dropdown-list) - [JavaScript Dropdown List](https://www.syncfusion.com/javascript-ui-controls/js-dropdown-list) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor MultiSelect Dropdown - Customizable Templates | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-multiselect-dropdown # Blazor MultiSelect Dropdown - Customizable UI with Checkbox Support - A replacement of the HTML select element with multiple selection. - Built-in check box support with a Select All option for easy interactions. - Built-in support for filtering, hierarchical data binding, grouping, tagging, selection limits, and UI customization with templates. ## Overview The Blazor MultiSelect Dropdown is a dynamic replacement for the HTML select tag for selecting multiple values. The HTML MultiSelect Dropdown is a textbox component that allows the user to type or select multiple values from a list of predefined options. It has several out-of-the-box features such as data binding, filtering, grouping, tagging with custom values, and checkbox mode. ## Render modes Various render modes are available to visualize selected items in Blazor Multi Select Dropdown. - [MultiSelect render mode example](https://blazor.syncfusion.com/demos/multiselect-dropdown/default-functionalities) ### Chip mode (box mode) Selected items are displayed as chips in the multiselect input box. ### Delimiter mode The selected items are displayed with delimiters in the multiselect input box. ### Hybrid mode(default mode) By default, the selected items are displayed as chips when the component is in focus. Otherwise, they are displayed with a delimiter. ## Filtering and searching The Blazor MultiSelect Dropdown has built-in filtering support with a rich set of filtering configurations available. - [Blazor MultiSelect Dropdown filtering example](https://blazor.syncfusion.com/demos/multiselect-dropdown/filtering) ### Custom filtering Filter queries can be customized. You can also use your own filter libraries to filter data like the fuzzy search. ### Diacritic sensitive search The Blazor MultiSelect Dropdown component has built-in diacritic sensitivity support. This can be turned on or off. ### Filter settings The filter search can be customized with case sensitivity, and the number of characters needed to make the filter search can be set. ## MultiSelect Dropdown check box The MultiSelect Dropdown in Blazor has check box support. Enabling a check box on each item helps the user handle multiple selected values. - [Blazor MultiSelect Dropdown with check box example](https://blazor.syncfusion.com/demos/multiselect-dropdown/checkbox) - [Blazor MultiSelect Dropdown with check box documentation](https://blazor.syncfusion.com/documentation/multiselect-dropdown/multiple-selection-display-mode#checkbox-mode) ## Selection limit You can limit the number of items that can be selected in a drop-down. - [Selection limit example](https://blazor.syncfusion.com/demos/multiselect-dropdown/selection-limit) ## Chip customization You can customize the selected chip (value) element’s appearance on value selection. ## Tagging custom value Tag new values that are not present in the predefined list. - [MultiSelect tagging example](https://blazor.syncfusion.com/demos/multiselect-dropdown/custom-value) ## Grouping with category Group the popup list items with the corresponding category which makes it easy to pick the item quickly from the dropdown. - [Blazor MultiSelect Dropdown grouping example](https://blazor.syncfusion.com/demos/multiselect-dropdown/grouping) ## Pop-up dimension The width and height of a pop-up option list are customizable with this easily customized Blazor Multiselect dropdown. ## HTML form support The Blazor MultiSelect Dropdown is a form component that seamlessly supports HTML forms and obtains values on form submission. ## Sortable list items You can display items in the ascending or descending order in a popup list. ## Responsive MultiSelect Dropdown A responsive mode gives an adaptive, redesigned UI appearance for mobile devices and recognizes touch gestures. ## Developer-friendly APIs Developers can customize all UI elements and control their behaviors using the control’s rich set of client-side APIs. ## Built-in themes The Blazor bootstrap MultiSelect component is shipped with several built-in themes such as Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, and High Contrast. Customize any one of these built-in themes or create new themes by simply overriding SASS variables or using our [Theme Studio](https://ej2.syncfusion.com/themestudio/?theme=material) application. ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#combobox) accessibility that makes list view accessible to on-screen readers and assistive devices. - Follows [WAI-ARIA best practices](https://www.w3.org/WAI/ARIA/apg/#combobox) best practices for implementing keyboard interaction. - Blazor Multiselect dropdown follows follows [WCAG 2.0](https://www.w3.org/TR/WCAG20/#)standard in design for the UI element visuals such as foreground color, background color, line spacing, text, and images. - Supports right-to-left (RTL) direction for users working in with languages like Hebrew, Arabic, or Persian. ## Other supported frameworks MultiSelect Dropdown is also available in Angular, React, Vue and JavaScript frameworks that are built from their own TypeScript libraries. Check out the different MultiSelect Dropdown platforms from the links below, - [JavaScript MultiSelect Dropdown](https://www.syncfusion.com/javascript-ui-controls/js-multiselect-dropdown) - [Angular MultiSelect Dropdown](https://www.syncfusion.com/angular-components/angular-multiselect-dropdown) - [React MultiSelect Dropdown](https://www.syncfusion.com/react-components/react-multiselect-dropdown) - [Vue MultiSelect Dropdown](https://www.syncfusion.com/vue-components/vue-multiselect-dropdown) ## Blazor MultiSelect DropDown Code Example Easily get started with the Blazor MultiSelect DropDown using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor MultiSelect DropDown Example](https://blazor.syncfusion.com/demos/multiselect-dropdown/default-functionalities) that shows you how to render and configure the BlazorMultiSelect DropDown. - razor [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Accordion - Responsive Collapsible Panel | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-accordion # Blazor Accordion - Custom Collapse Menu Component - Fully featured, responsive collapsible panels (panel bar) with stacked headers. - Beautiful animations when expanding and collapsing panels. - Flexibility to make standalone panels or panel groups. ## Overview The Blazor Accordion is a container-based component with vertically collapsible panels (vertical accordion) and stacked headers that expand or collapse one or more items at a time within the available space. ## Expand and collapse The Blazor Accordion component allows you to customize the expand and collapse actions. ### Expand mode Expand or collapse a single panel or multiple panels (panel toggle) at a time by clicking the panel header or programmatically. ### Collapsible mode Collapse all the panels at once. With customization options, a specific panel is set to be in an open state while the rest of the panels are collapsed. ## Accordion templates The Blazor Accordion component allows you to customize the header and content panel’s appearance using the given template elements. ## Nested accordions Add nested levels of collapsible panels within the parent accordion. ## Accordion navigation menu The Blazor Accordion component can use a nested vertical (hierarchical) navigation menu with links, including external links, in the accordion header. ## Icon support Add prefix icons or images to the panel header. The default expand and collapse icon used in the header is customizable. - [Blazor Accordion icons example.](https://blazor.syncfusion.com/demos/accordion/icons/?theme=bootstrap4) ## Responsive accordion The Blazor Accordion component adapts responsively in devices based on the available space for modern web and mobile applications. ## Animation Blazor Accordion with rich UI supports several types of built-in, fancy animations for panel expanding and collapsing actions. - [Blazor Accordion Animation documentation](https://blazor.syncfusion.com/documentation/accordion/animations) ## Developer-friendly APIs Developers can control the appearance and behavior of accordions using a rich set of APIs. ## State persistence During browser navigation, the expanded or collapsed state of an accordion persists. ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#tabpanel) accessibility, which helps the on-screen readers and assistive devices to access Blazor Accordion component . - Follows [WAI-ARIA Best Practices](https://www.w3.org/WAI/ARIA/apg/#tabpanel) for implementing keyboard interactions. - UI visual elements such as foreground color, background color, line spacing, text, and images were designed based on [WCG 2.0 standards](https://www.w3.org/TR/WCAG20/). ## Built-in themes The Blazor Accordion component is shipped with several built-in themes such as Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, and High Contrast. Users can customize any one of these built-in themes or create new themes by simply overriding SASS variables or using our [Theme Studio](https://ej2.syncfusion.com/themestudio/?theme=material) application. ## Blazor Accordion Code Example Easily get started with the Blazor Accordion using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor Accordion Example](https://blazor.syncfusion.com/demos/accordion/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Accordion in Blazor. - razor ## Other supported frameworks Accordion is also available in JavaScript, Angular, React and Vue frameworks that are built from their own TypeScript libraries. Check out the different Accordion platforms from the below links, - [JavaScript Accordion](https://www.syncfusion.com/javascript-ui-controls/js-accordion) - [Angular Accordion](https://www.syncfusion.com/angular-components/angular-accordion) - [React Accordion](https://www.syncfusion.com/react-components/react-accordion) - [Vue Accordion](https://www.syncfusion.com/vue-components/vue-accordion) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Context Menu - Flexible Graphical UI Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-context-menu # Blazor Context Menu - Responsive Graphical UI Component - The Blazor Context Menu is easily configurable with other controls using fluent API. - Automatic collision detection and handling with submenu flip-and-fit. - Option to customize menu items for templating or include other controls like Checkbox, Radio Button, etc. ## Overview The Blazor Context Menu is a graphical user interface component that appears when users right-clicks or performs a touch and hold action. You can add a list of items to the context menu, create multilevel menus, and attach event handlers to the menu items for seamless integration with other controls. ## Multi-level nesting Define multiple levels of items inside the menu. You can browse the sub menus by mouse hover/clicking the menu items. The appearance of context menu varies for desktop and mobile apps. In mobile devices, users can view multilevel nested items in a single layer with a provision for backtracking to parent node. [Menu Multi-Level nesting documentation](https://blazor.syncfusion.com/documentation/context-menu/customizing-and-multilevel-nesting) ## Menu item icons You can add icons or sprite images to menu items easily to visually represent actions in the context menu. [Menu Item Icons documentation](https://blazor.syncfusion.com/documentation/context-menu/icons-and-navigations#icons) ## Context menu templates Templates are used to customize the content, items, and appearance for a great user experience. You can create context menu by using a template for each element. ## Navigation The Context Menu component is used to navigate to the other webpages when a menu item is clicked. [Navigation documentation](https://blazor.syncfusion.com/documentation/context-menu/icons-and-navigations#navigation) ## Integration with other controls The Blazor context menu can be integrated with any control. Adding a context menu to other controls require a simple configuration. ## Built-in themes The Blazor Context Menu supports built-in themes such as Bootstrap 5, Tailwind CSS, Fluent, high contrast, and more. Users can customize these built-in themes or create new themes to achieve the desired look and feel either by simply overriding SASS variables or using the Theme Studio application. - [Theme Studio Application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) for working with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing keyboard interaction. - Based on [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, UI visual elements such as foreground color, background color, line spacing, text, and images are designed. - Supports right-to-left text direction for users working with RTL languages like Hebrew, Arabic, or Persian. ## Blazor Context Menu Code Example Easily get started with the Blazor Context Menu using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor Context Menu Example](https://blazor.syncfusion.com/demos/context-menu/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Context Menu in Blazor. - razor ## Other supported frameworks Context Menu is also available in Angular, React, Vue and JavaScript frameworks that are built from their own TypeScript libraries. Check out the different Context Menu platforms from the links below, - [Angular Context Menu](https://www.syncfusion.com/angular-components/angular-context-menu) - [React Context Menu](https://www.syncfusion.com/react-components/react-context-menu) - [Vue Context Menu](https://www.syncfusion.com/vue-components/vue-context-menu) - [JavaScript Context Menu](https://www.syncfusion.com/javascript-ui-controls/js-context-menu) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Menu Bar | Responsive Nav Menu | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-menu-bar # Blazor Menu - Highly Customizable Nav Menu Component - Display a multilevel menu with smooth animation that is dockable in the header and footer. - Customize menu items for templating or include other controls like Checkbox, Radio Button, and more. - Utilize automatic collision detection and handling with submenu flip-and-fit. ## Overview The Blazor Menu Bar is a graphical user interface component that serves as a navigation header for your web application or site. It supports data binding, templates, icons, multilevel nesting, and horizontal and vertical menus. ## Data binding Blazor Menu can be bound to data in the form of JavaScript object array collection. It supports self-referential or hierarchical structure of data. - [Blazor Menu data binding documentation](https://blazor.syncfusion.com/documentation/menu-bar/data-source-binding-and-custom-menu-items#data-binding) ## Menu Item Icons Users tend to perceive visual information better than text. Include icons or sprite images to the Blazor menu items easily to provide a visual representation of the actions. ## Menu Templates Templates is used to create custom user experience. Blazor Menu provides template for each menu item to customize the entire Menu UI. ## Vertical Menu Blazor Menu supports its alignment in either vertical or horizontal orientation. ## Multi-level nesting Blazor Menu supports multi-level nested items. You can browse the sub-menu by hovering or clicking a parent item. ## Integration with other controls Blazor Menu can be used with other controls. Adding a menu to other controls only requires simple configuration. ## Built-in themes Blazor Menu control supports built-in themes such as Bootstrap 5, Tailwind CSS, Fluent, high contrast, and more. Users can customize these built-in themes or create new themes to achieve the desired look and feel either by simply overriding SASS variables or using the Theme Studio application. - [Theme Studio Application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Hamburger mode The Blazor Menu component adapts to devices of different sizes. By default, it shows the header with the hamburger icon in horizontal orientation. ## Web Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) for working with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing keyboard interaction. - Based on [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, we designed the UI element visuals such as foreground color, background color, line spacing, text and images - Supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian. ## Blazor Menu Code example Easily get started with the Blazor Menu using a few simple lines of C# code, as demonstrated below. Also, explore our [Blazor Menu Example](https://blazor.syncfusion.com/demos/menu-bar/default-functionalities?theme=fluent2), which shows you how to include the Blazor Menu component with highlight customization. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/BjheNMZwVJLBQclg) - razor ## Other supported frameworks Menu is also available in Angular, React, Vue and JavaScript frameworks that are built from their own TypeScript libraries. Check out the different Menu platforms from the links below, - [Angular Menu](https://www.syncfusion.com/angular-components/angular-menu-bar) - [React Menu](https://www.syncfusion.com/react-components/react-menu-bar) - [Vue Menu](https://www.syncfusion.com/vue-components/vue-menu-bar) - [JavaScript Menu](https://www.syncfusion.com/javascript-ui-controls/js-menu-bar) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Sidebar - Interactive & Rich UI Side Menu | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-sidebar # Blazor Sidebar - Responsive, Customizable Navigation Panel for Apps - A simple and highly customizable sidebar with docking options. - A progressive layout can be built by pushing, sliding, or overlaying the sidebar content. - A responsive design with touch-friendly gestures for easy interaction. ## Overview The Blazor Sidebar is an expandable and collapsible component that typically acts as a side container in which to place primary or secondary content alongside the main content. It provides a flexible container that can be expanded or collapsed based on user interactions. Any type of HTML content or component can be placed in the Blazor Sidebar control for quick access and for easy navigation, like quick references, menus, lists, and tree views. ## Blazor Sidebar Code Example Easily get started with the Blazor Sidebar using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor Sidebar Example](https://blazor.syncfusion.com/demos/sidebar/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Blazor Sidebar. - razor ## Transitions and animation Different types of slide-out content in the Blazor Sidebar component give users the flexibility to view or hide content over or above the main content by pushing, sliding, or overlaying it. ## HTML side content position The Blazor Sidebar component positions its content to the left or right side of the main content area. This allows the placement of two sidebars in a page, both at the left and right, to show primary and secondary content simultaneously. ## Dock the HTML side panel content When you dock the side content to give the main content more space, the navigation text is represented as a shortened view of icons. - [Docking sidebar documentation](https://blazor.syncfusion.com/documentation/sidebar/docking-sidebar) ## Toggle sidebar menu Bind custom actions to any element (hamburger menu or buttons) to toggle a sidebar. ## Responsive sidebar Auto closing the Blazor Sidebar component’s content allows the main content area to be more readable. - [Responsive sidebar documentation](https://blazor.syncfusion.com/documentation/sidebar/auto-close) ## Mobile-friendly side navigation menu The Blazor Sidebar component’s responsive mode gives an adaptive, redesigned UI appearance for mobile devices. ## Other supported frameworks The Sidebar is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React Sidebar](https://www.syncfusion.com/react-components/react-sidebar) - [Angular Sidebar](https://www.syncfusion.com/angular-components/angular-sidebar) - [JavaScript Sidebar](https://www.syncfusion.com/javascript-ui-controls/js-sidebar) - [Vue Sidebar](https://www.syncfusion.com/vue-components/vue-sidebar) ## Supported browsers The Blazor Sidebar works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [Documentation](https://blazor.syncfusion.com/documentation/sidebar/getting-started) ##### Blazor Tab - Rich UI for Layout & Navigations | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-tabs # Blazor Tab - Responsive and Scrollable Tabs - Provides a simple user interface (UI) to group related content in a compact space. - Manage more number of tabs with scrollable and pop-up modes. - Effective and user-friendly component for quick navigation and fast content loading with animation when transitioning between tabs. ## Overview The Blazor Tab component is a simple user interface (tabs UI) for organizing content in a compact space. The Blazor tabs are aligned horizontally, and each tab is associated with its header. One of the tabs must always be selected and visible. It has a rich set of features such as animation, orientation, templating, header styles, a close button for each tab, a scrollbar or pop-up when there are many tabs, and more. ## Blazor Tabs Code Example Easily get started with the Blazor Tabs using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor Tabs Example](https://blazor.syncfusion.com/demos/tabs/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Tabs in Blazor. - razor ## Scrollable tabs The Blazor Tab component manages tabs efficiently using scrollable tabs when there are a greater number of tabs than can be shown. This simplifies the design and aligns the tabs in a single line. Users can swipe left or right to clearly view the out-of-sight tabs in mobile devices. ## Pop-up mode The pop-up mode is another type of overflow mode in which a pop-up holds additional tabs when there are a greater number of tabs than can be shown. You can view the out-of-sight tabs by exploring the pop-up mode. ## Nested tabs Users can nest one tab within another tab to design a complex layout. ## Drag and drop The Blazor Tabs component allows users to drag and drop tabs to easily re-prioritize the tab item order. - [Draggable tabs example](https://blazor.syncfusion.com/demos/tabs/drag-and-drop?theme=bootstrap4) - [Draggable tabs documentation](https://blazor.syncfusion.com/documentation/tabs/drag-and-drop) ## Tab headers The tab bar visually represents active and inactive tabs. It has a clear interaction area for navigation in mobile tab view. The tab headers can be icons, plain text, or both. The position of the icons can be changed to the left, right, top, and bottom inside tab headers. ## Header placement A row of tabs can be aligned horizontally on the top or bottom of the tab content to make a top-to-bottom or bottom-to-top hierarchy in a tab bar. ## Header styles The Blazor Tab component with rich UI provides various built-in styles to customize the headers easily. ## Remove button on tabs Users can configure the Remove button for each tab or specific tabs to remove them dynamically. ## Animation Navigate the tabs with built-in animation effects (e.g., slide animation) when you click or tap a tab. The tab navigation happens on swiping the content or tapping a tab header in a mobile tab view. ## Easy integration It is easy to integrate other Blazor components as content of the tab’s pane. The Blazor Tab component can also be integrated with other components such as Dialog and Card. ## Wizard-like application The easy-to-use Blazor Tab component design forms wizard-like applications that are used to perform multi-step processes. ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#tabpanel) accessibility, which makes the Blazor Tab component accessible to on-screen readers and assistive devices. - Follows [WAI-ARIA Best Practices](https://www.w3.org/WAI/ARIA/apg/#tabpanel) for implementing keyboard interaction. - UI visual elements such as foreground color, background color, line spacing, text, and images are designed based on [WCG 2.0 standard](https://www.w3.org/TR/WCAG20/). ## Developer-friendly API Developers can control the appearance and behavior of the Blazor Tab component using a rich set of APIs, such as those for adding a new tab or removing a tab. ## Themes The Blazor Tab has several built-in themes such as Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, and High Contrast. They help to design material tabs, bootstrap tabs, etc. Users can customize these built-in themes or create new themes to achieve the desired look and feel, by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio application.](https://blazor.syncfusion.com/documentation/appearance/theme-studio) ## Other supported frameworks The Tabs is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React Tabs](https://www.syncfusion.com/react-components/react-tabs) - [Angular Tabs](https://www.syncfusion.com/angular-components/angular-tabs) - [JavaScript Tabs](https://www.syncfusion.com/javascript-ui-controls/js-tabs) - [Vue Tabs](https://www.syncfusion.com/vue-components/vue-tabs) ## Supported browsers The Blazor Tabs works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Toolbar - Navigation Bar | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-toolbar # Blazor Toolbar - Responsive Navigation Bar - Responsive Blazor Toolbar with scrollable and pop-up modes for accommodating many commands. - Better user experience for navigating through standard toolbar commands. - Built-in features for aligning commands with different priorities, templating, orientation, and more. ## Overview The Blazor Toolbar is a feature-rich component that provides an interface for selecting a command from a collection of commands. Its rich set of features include different orientations, responsive modes (scrollable and pop-up), templating, and button alignment based on priority. ### Template rendering The Blazor Toolbar component allows you to customize the appearance with HTML elements like images, text buttons, [toggle buttons](https://www.syncfusion.com/blazor-components/blazor-toggle-switch-button), select boxes, text boxes, and [autocomplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete). This helps you make toolbar search boxes and toolbar menu-like applications. - [Blazor Toolbar template documentation](https://blazor.syncfusion.com/documentation/toolbar/how-to/add-toggle-button) ### Item rendering The Blazor Toolbar component with a rich UI provides data-binding support, rendered based on text, type, and alignment properties. - [Item-based rendering example.](https://blazor.syncfusion.com/demos/toolbar/default-functionalities/?theme=bootstrap4) ## Responsive The Blazor Toolbar component adapts to the available space with scrollable and pop-up display modes, in modern web and mobile applications. - [Responsive Blazor toolbar documentation](https://blazor.syncfusion.com/documentation/toolbar/responsive-mode) ## Scrollable Scrollable display mode displays toolbar commands in a single line with horizontal scrolling enabled when the items overflow the visible space. You can swipe over the toolbar commands to scroll. ## Pop-up menu The pop-up menu is another type of overflow mode in which the toolbar container holds the items that can be placed within the available space. Items that do not fit the viewing area moves to the overflow pop-up container. You can view the overflow tab headers by clicking the pop-up icon. - [Pop-up menu example](https://blazor.syncfusion.com/demos/toolbar/overflow-modes?theme=bootstrap4) ### Commands display priority You can prioritize the commands to be displayed in the pop-up or toolbar when minimum space is available to view them. ### Pin items in pop-up You can set specific items to be displayed in the pop-up always regardless of the available space on the toolbar. ## Multiple rows Display the overflow toolbar items as an inline of a Blazor toolbar. ## Extended toolbar Hide the overflowing toolbar items in the next row and display them when you click the expand icons. If the pop-up content overflows the height of the page, the rest of the elements will be hidden. ## Commands alignment The Blazor toolbar commands are aligned to the left, right, or center in the toolbar area. ## Buttons The Blazor Toolbar component’s default command is a button type, and it can be rendered with the given text input. ### Icons and images support You can add icons or images with or without text to the buttons. The icons can be positioned to the left or right. ### Text mode You can add button text when necessary. You can decide to show text in the pop-up alone, toolbar alone, or in both. ## Integration with other components The Blazor Toolbar can be easily integrated with other components such as [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid), [Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler), and [Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor). ## Tooltip To describe the actions of the command, a tooltip can be added. By default, HTML is supported, but the Blazor Tooltip component can also be used. - [Tooltip integration documentation](https://blazor.syncfusion.com/documentation/toolbar/how-to/set-tool-tip-to-the-commands) ## Command customization The Blazor Toolbar provides customizable commands with styles such as CSS classes and HTML attributes like ID, class, and styles. ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#toolbar) accessibility, which makes the toolbar accessible to on-screen readers and assistive devices. - Follows [WAI-ARIA best practices](https://www.w3.org/WAI/ARIA/apg/#toolbar) for implementing keyboard interaction. - Follows [WCG 2.0 standard](https://www.w3.org/TR/WCAG20/) in design of UI element visuals such as foreground color, background color, line spacing, text, and images. ## Developer-friendly API Developers can control the appearance and behavior of the Blazor toolbar using a rich set of APIs. ## Built-in themes The Blazor Toolbar component is shipped with several built-in themes such as Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, and High Contrast. Users can customize these built-in themes or create new themes by simply overriding SASS variables or using the [Theme Studio](https://ej2.syncfusion.com/themestudio/?theme=material) application. ## Blazor Toolbar Code Example Easily get started with the Blazor Toolbar using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor Toolbar Example](https://blazor.syncfusion.com/demos/toolbar/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Toolbar in Blazor. - razor ## Other supported frameworks Toolbar is also available in JavaScript, Angular, React and Vue frameworks that are built from their own TypeScript libraries. Check out the different Toolbar platforms from the below links, - [JavaScript Toolbar](https://www.syncfusion.com/javascript-ui-controls/js-toolbar) - [Angular Toolbar](https://www.syncfusion.com/angular-components/angular-toolbar) - [React Toolbar](https://www.syncfusion.com/react-components/react-toolbar) - [Vue Toolbar](https://www.syncfusion.com/vue-components/vue-toolbar) [Documentation](https://blazor.syncfusion.com/documentation) --- title: Blazor File Manager | File Explorer Component | Syncfusion description: Blazor File Manager (File Explorer) component is a Windows-Explorer-like component that allows you to effectively manage a file and folders on the client side. image: "https://ft.syncfusion.com/featuretour/ft-og-images/blazor/blazor-file-manager.webp" url: "https://www.syncfusion.com/blazor-components/blazor-file-manager" --- # Blazor File Manager - Responsive File Explorer Component - A modern user interface for easy and effective management of files and folders in the file system. - Performs all file operations like upload, download, delete, create, sort, search, and rename along with preview images. - Adaptive and responsive design built to be touch-friendly for easy interactions. ## Overview The Blazor File Manager (a.k.a. File Explorer) is a graphical user interface component for managing the file system that allows users to perform most common file operations like accessing, editing, and sorting files or folders. This component also provides easy navigation to select a file or folder from the file system. ### Easy to customize With customization options, the entire layout can be customized and modified easily, and initial views switched. ### Built-in file operations Provides a wide range of built-in file operations including copying, moving, renaming, and deleting files, drag-and-drop, image preview, and more. ### Easy to interact An intuitive and easy-to-interact interface that includes a toolbar, treeview, breadcrumb, and menu. ### Localization Localize the text values of the context menu and tooltips displayed in the user interface using the localization library. ### Integration with other components Integrate with Syncfusion’s PDF Viewer, Word Editor, and Spreadsheet component to open and view PDF, Excel, and Word files. ### Connect with cloud storage services Easily connect and manage data stored in a various storage services, including local, cloud, and database. ### Adapts to any resolution The File Manager is designed to be responsive and adaptable, with a layout that works well on devices including desktops, touch screens, and smart phones. ### Attractive, customizable themes Cutting edge design with 5+ built-in themes such as Fluent, Tailwind CSS, Bootstrap, Material, Fabric, and more. Utilize the [online Theme Studio tool](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) to customize themes easily. ## Blazor File Manager Code Example Easily [get started with the Blazor File Manager](https://blazor.syncfusion.com/documentation/file-manager/getting-started-with-web-app) using a few simple lines of C# code as demonstrated below. Also explore our [Blazor File Manager Example](https://blazor.syncfusion.com/demos/file-manager/overview?theme=bootstrap5) that shows you how to render and configure the Blazor File Explorer. - razor ## Flat data rendering The Blazor File Manager component includes the support for rendering the flat data objects, eliminating the need for HTTP client requests and back end URL configuration. All file operations seamlessly unfold within the component itself through dedicated file action events. ## Virtualization The Blazor File Manager component supports UI virtualization, enabling dynamic loading of large numbers of directories and files. This feature improves performance by only rendering the files and directories that are visible, ensuring smooth interaction even when managing extensive file systems. ## Pagination The pagination feature in the File Manager component improves the application’s performance by loading only the necessary files and folders for the currently visible layout. As you navigate through pages, additional items are dynamically loaded, ensuring efficient usage and faster load times. ## Customizable layout design The Blazor File Manager UI consists of a toolbar, navigation pane, and content pane through which the files or folders in the file system can be accessed and managed. The entire layout can be customized with features like right-to-left alignment, enabling or disabling the toolbar and navigation pane, and switching between views. ## Toolbar The toolbar contains a list of tools for performing various operations like upload file, download file, and switch views. The toolbar can be configured with any custom functionality to be performed on the file system. ## Navigation pane The navigation pane allows quick and direct access to a file or folder in a file system where the entire folder hierarchy is listed using a tree view. This can be made visible or hidden as needed. ## Content pane The content pane displays the files and folders in the file system. The files in the content pane can be displayed in either a large icon view or a details view. ## File operations The Blazor File Manager component includes all the common operations needed for managing a file system, such as copying, moving, uploading, downloading, editing, creating, deleting, and sorting. ## File upload and download The Blazor File Manager component allows easy file uploading and downloading in a file system. ## Sorting Files and folders in the file system can be sorted in ascending or descending order by clicking the column header. Files and folders can be sorted based on name, date created, size, and other details. The default sorting functionality can also be customized in the File Manager. ## Searching The Blazor File Manager control contains built-in search functionality that allows you to search for and access a file or folder in the current path and its child folders. ## Moving files and folders with drag and drop Files and folders can be moved within the file system by dragging and dropping them. Drag-and-drop support can be turned on or off. ## Access control restriction The Blazor File Manager with its rich UI restricts access to files and folders by defining a set of rules for them. Only authorized users will be able to access them. ## Restrict upload file types Users can specify the types of files that can be uploaded in the File Manager. ## Multiple file selection The Blazor File Manager component has built-in support for the selection of multiple files or folders. Multiple file selection is effective when a single operation like download or delete needs to be performed for multiple files in the file system. ## Directory upload The Blazor File Manager control has support to upload a directory (folder) with its subfolders and files. ## Chunk upload The File Manager supports the chunk upload feature, which allows large files to be split into smaller chunks based on the specified chunk size and uploaded sequentially to the server. This improves reliability and performance when handling massive file uploads. ## Quick access menu The Blazor File Manager control provides a context menu support to list the operations that can be performed with files and folders. It appears when a file or folder is right-clicked. Context menu items can be customized according to user preferences. ## Manage storage service providers The File Manager control allows users to manage data from storage services. ### Local storage [ASP.NET Core physical file provider](https://github.com/SyncfusionExamples/ej2-aspcore-file-provider) [ASP.NET MVC physical file provider](https://github.com/SyncfusionExamples/ej2-aspmvc-file-provider) [Node.js file system](https://www.npmjs.com) ### Cloud storage [Amazon S3 bucket cloud storage file provider](https://github.com/SyncfusionExamples/amazon-s3-aspcore-file-provider) [Microsoft Azure cloud storage file provider](https://github.com/SyncfusionExamples/azure-aspcore-file-provider) [Google Drive cloud storage file provider](https://github.com/SyncfusionExamples/google-drive-aspcore-file-provider) [Firebase Realtime Database cloud storage file provider](https://github.com/SyncfusionExamples/firebase-realtime-database-aspcore-file-provider) [IBM Cloud Object Storage file provider](https://github.com/SyncfusionExamples/filemanager-ibm-cos-node-file-provider) ### Database storage [SQL Server database file provider](https://github.com/SyncfusionExamples/sql-server-database-aspcore-file-provider) ### Network protocol service (FTP) [File Transfer Protocol (FTP) file provider](https://github.com/SyncfusionExamples/ftp-aspcore-file-provider) ### Keyboard navigation The Blazor File Manager control ensures that every cell is accessible using the keyboard. Major features like sort, select, and edit can be performed using keyboard commands alone; no mouse interaction is required. This helps in creating highly accessible applications using this control. ### Developer-friendly APIs Developers have control over all the UI elements and behaviors of the components to provide the best experience to end users. ### Right to left (RTL) Supports right-to-left (RTL) direction for users working in right-to-left languages like Hebrew and Arabic. Built-in file operations Role-based access control ## Other supported frameworks The File Manager is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React File Explorer](https://www.syncfusion.com/react-components/react-file-manager) - [Angular File Explorer](https://www.syncfusion.com/angular-components/angular-file-manager) - [JavaScript File Explorer](https://www.syncfusion.com/javascript-ui-controls/js-file-manager) - [Vue File Explorer](https://www.syncfusion.com/vue-components/vue-file-manager) ## Supported browsers The Blazor File Manager works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [Documentation](https://blazor.syncfusion.com/documentation/file-manager/getting-started-with-web-app) The Blazor File Manager blog posts will guide you in building your first app with this Blazor components. They provide problem-solving strategies, describe features and functionalities, announce new feature releases, explain best practices, and showcase example scenarios. Explore our latest posts on our blog channels for Blazor File Manager updates. [Introducing Pagination in Blazor File Manager](https://www.syncfusion.com/blogs/post/blazor-file-manager-pagination) [Effortlessly Manage Large File Uploads with Blazor File Manager](https://www.syncfusion.com/blogs/post/chunk-upload-in-blazor-file-manager) ##### Blazor In-place Editor | Edit-in-Place | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-in-place-editor # Blazor In-place Editor - Quickly Edit a Value - Quickly and easily edit a value/text in a component. - Built-in support for DatePicker, DropDown List, TextBox, Rich Text Editor, and more. - Highly customizable display mode, action events, buttons, template, and more. ## Overview The Blazor In-Place Editor component is most useful for editing a value dynamically in context (in-place). It has built-in support to handle all the form controls, including TextBox, Dropdown List, DatePicker, and Rich Text Editor. It features inline and pop-up modes, and a customizable user interface (UI) and events. ## Inline editor Users can quickly edit a text/value in the same place using Blazor In-place Editor. ## Pop-up editor The Blazor In-place Editor component allows the editing of values or text with a small [tooltip](https://www.syncfusion.com/blazor-components/blazor-tooltip) (popover). The position of the tooltip is adjustable. ## Built-in form components Users can easily configure form components such as DropDown List, DatePicker, TimePicker, Numeric TextBox, AutoComplete, and MultiSelect Dropdown within the Blazor In-place Editor component. - [Built-in form components](https://blazor.syncfusion.com/documentation/in-place-editor/controls) ## Quick edit and save The editor allows you to directly manipulate the field value and save the modified value in a server instantly. ## In-place Editor with Rich Text Editor Users can integrate the WYSIWYG Rich Text Editor component within the Blazor In-place Editor component, which helps manage CMS-type applications. ## Customizable UI Users can enable box model or dashed line editor based on their application needs. ## Action buttons The editor provides built-in prominent save and cancel buttons for edit actions that are customizable with HTML markup. ## Auto save or cancel Flexible options are available to decide what should happen when the user leaves the editor without using save or cancel. ## Editing events Users can decide whether editing happens on clicking, double-clicking, or only by clicking the editing icon. ## Themes The Blazor In-place Editor component has several built-in themes such as Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, and high contrast. Users can customize any of these built-in themes or create new themes either by overriding Sass variables or using our Theme Studio application. - [Theme Studio application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Developer-friendly APIs Developers can control the appearance and behaviors of the Blazor In-place Editor component, including its display modes, component integration, etc. using a rich set of APIs. ## Other supported frameworks In-place Editor is also available in JavaScript, Angular, React and Vue frameworks that are built from their own TypeScript libraries. Check out the different In-place Editor platforms from the below links, - [JavaScript In-place Editor](https://www.syncfusion.com/javascript-ui-controls/js-in-place-editor) - [Angular In-place Editor](https://www.syncfusion.com/angular-components/angular-in-place-editor) - [React In-place Editor](https://www.syncfusion.com/react-components/react-in-place-editor) - [Vue In-place Editor](https://www.syncfusion.com/vue-components/vue-in-place-editor) ## Blazor In Place Editor Code Example Easily get started with the Blazor In Place Editor using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor In Place Editor Example](https://blazor.syncfusion.com/demos/in-place-editor/overview?theme=fluent) that shows you how to render and configure the In Place Editor in Blazor. - razor [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Query Builder - Simplify SQL Query Building | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-query-builder # Blazor Query Builder - A User-Friendly Filter UI - Easy to use with data visualization controls like Grid, Charts, etc. - Outputs structured JSON filters that can be parsed to create SQL queries. - Fully customizable to include other controls like Checkbox, Slider, and Dropdown List by using templates. ## Overview The Blazor Query Builder is a rich and responsive UI for filtering large amounts of data by creating or editing conditions that can be combined with data visualization controls like DataGrid and Charts to view the filtered data. It outputs structured JSON filters that can be easily parsed to create SQL queries. It allows you to create conditions and group them using AND/OR logic. ### Seamless data binding Bind data seamlessly with various [local and remote data sources](https://blazor.syncfusion.com/documentation/query-builder/data-binding) such as JSON, OData, WCF, and RESTful web services with the help of a data manager. ### Importing and exporting You can [import or export filter](https://blazor.syncfusion.com/documentation/query-builder/import-export) from or to the Query Builder in structured formats like JSON and SQL. ### Adapts to any resolution Query Builder has a highly responsive layout and an optimized design for desktops, touchscreens, and smartphones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Create your own template designs You can add checkboxes, sliders, and dropdown lists to the Query Builder [using three different templates](https://blazor.syncfusion.com/documentation/query-builder/templates) options. ### Attractive, customizable themes Cutting-edge design with several built-in themes, such as Fluent, Tailwind CSS, Bootstrap, Material, and Fabric. Utilize the [online Theme Studio tool](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) to customize themes easily. ### Globalization and localization [Enables users from different locales](https://blazor.syncfusion.com/documentation/query-builder/localization) to use the component by formatting strings to suit preferences. ## Blazor Query Builder Code Example Easily get started with the Blazor Query Builder using a few simple lines of C# code as demonstrated below. Also, explore our [Blazor Query Builder Example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Query Builder component in Blazor. - razor ## Integration with data manager Integrating the Data Manager control with the Query Builder control simplifies communication with a data source and returns the desired result based on the provided filters. - [Grid integration example](https://blazor.syncfusion.com/demos/query-builder/grid?theme=bootstrap5) - [Data manager integration documentation](https://blazor.syncfusion.com/documentation/query-builder/data-binding) ## UI customization with templates Add controls like Checkbox, Slider, and Dropdown List to the Blazor Query Builder using templates. Use these controls to customize the query builder. - [Template example](https://blazor.syncfusion.com/demos/query-builder/header-template?theme=bootstrap5) ### Header template Users can define their own widgets to customize the elements such as and/or/not connectors and add rules/groups buttons using the header template. - [Header template documentation](https://blazor.syncfusion.com/documentation/query-builder/templates#header-template) ### Column template Users can define their own widgets to customize the entire column elements such as fields, operators, and values using the rule template. - [Column template documentation](https://blazor.syncfusion.com/documentation/query-builder/templates#column-template) ### Value template Users can define their own widgets to customize the elements for values using the value template. - [Value template documentation](https://blazor.syncfusion.com/documentation/query-builder/templates#value-template) ## Model binding Model binding binds properties for the components used in field, operator, and value columns. To implement model binding, assign fieldModel, operatorModel, and valueModel properties in the Query Builder. ## Summary view The Blazor Query Builder supports a summary view that outputs the filter query in SQL format. ## Complex data binding Complex data binding allows users to create subfields within the main fields. This can be useful for representing hierarchical or multilevel data in a more organized and structured way. To create subfields, users can either specify the complex data in nested columns or specify a complex data source and separator. - [Complex data binding documentation](https://blazor.syncfusion.com/documentation/query-builder/data-binding#complex-data-binding) ## Column binding The column definitions are used as the data source schema in the Query Builder UI. This plays a vital role in rendering column values. The query builder operations, such as create or delete conditions and create or delete groups, are based on column definitions. - [Column binding documentation](https://blazor.syncfusion.com/documentation/query-builder/columns-binding) ## Filtering Users can create a filter by adding or deleting conditions or groups. Users can get a created filter as SQL query, JSON, and data manager predicates. - [Filtering documentation](https://blazor.syncfusion.com/documentation/query-builder/filtering) ## Appearance customization Change the look and feel of the Blazor Query Builder UI by customizing its default appearance and style using HTML or CSS. - [Appearance documentation](https://blazor.syncfusion.com/documentation/query-builder/style-and-appearance) ## Lock groups or rules Ensure data integrity by locking groups or rules to prevent unintended interactions. Use the lockRule and lockGroup methods for this purpose. ## Clone groups or rules Effortlessly create duplicates of rules or groups within the Query Builder with the clone support feature. This creates an exact replica next to the original using the cloneRule and cloneGroup methods. ## Drag and drop Users can reposition rules or groups within the component by just dragging and dropping them. This provides an intuitive, flexible way to construct and modify queries. ## Separate connector Users can integrate standalone connectors between rules or groups within the same group. This allows for greater flexibility, as users can connect rules or groups using different connectors, enhancing the complexity and precision of query construction. Simplify SQL query building Customizable query rules ## Other supported frameworks The Query Builder is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React Query Builder](https://www.syncfusion.com/react-components/react-query-builder) - [Angular Query Builder](https://www.syncfusion.com/angular-components/angular-query-builder) - [JavaScript Query Builder](https://www.syncfusion.com/javascript-ui-controls/js-query-builder) - [Vue Query Builder](https://www.syncfusion.com/vue-components/vue-query-builder) ## Supported browsers The Blazor Query Builder works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [Documentation](https://blazor.syncfusion.com/documentation/query-builder/getting-started) [Advanced Query Building Techniques: Connecting Tables with Joins using Blazor Query Builder](https://www.syncfusion.com/blogs/post/advanced-query-building-blazor-connecting-tables-joins) [Quick Overview of Blazor Query Builder Component](https://www.youtube.com/watch?v=SHBj8fQUaIY&t=10s) ##### Blazor TextBox - Multiline TextBox | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-textbox # Blazor TextBox - Multiline TextBox with Floating Label - An advanced version of the HTML input element, supporting both pure-CSS and Blazor versions. - Easily create input groups with icons, buttons, help text, and validation messages. - Add a modern look to your entered text and display floating labels using Blazor. ## Overview Blazor TextBox is a component for editing, displaying, or entering plain text on forms to get. username, phone numbers, email, and more. This component is an advanced version of the HTML5 TextBox (input type text) component with icons, floating labels, different sizing, grouping, validation states, and more. It is available in HTML5/CSS version and JavaScript version. ## Blazor TextBox The Blazor TextBox component provides a floating label with minimal configuration. It supports most of the features that are available in the pure HTML5/CSS version. - [Blazor TextBox component example](https://blazor.syncfusion.com/demos/textbox/default-functionalities) ## HTML5/CSS TextBox The simple TextBox component renders using pure CSS and HTML. It supports all the essential features, such as input groups with icons, floating labels, multiline text, different sizing, validation states, and more. - [HTML5 TextBox component example](https://blazor.syncfusion.com/demos/textbox/default-functionalities) ## Input group Easily create input groups by prepending or appending icons, buttons, or text with floating labels . For example, you can prepend text with the dollar symbol ($) for price input or at sign (@) for username. - [Input group example](https://blazor.syncfusion.com/demos/textbox/default-functionalities) ## Floating label (placeholder text) Floats placeholder text at the top of the input box with animation when the input receives focus or the input has a value. The floating label is also known as the Blazor input text placeholder and ensures that the input value and label are always visible. - [Floating label TextBox component example](https://blazor.syncfusion.com/demos/textbox/default-functionalities) ## Input sizing The Blazor TextBox component has built-in sizing support (normal and small modes) to fit the input box’s size with sufficient padding and spacing. - [Blazor TextBox Input sizing documentation](https://blazor.syncfusion.com/documentation/textbox/sizing) ## Input validation with HTML forms The Blazor TextBox component can validate the input value and apply the corresponding validation styles for success, error, and warning states used in most standard HTML forms. - [Input validation styles example](https://blazor.syncfusion.com/demos/textbox/default-functionalities) ## Multiline TextBox Blazor TextBox is capable of handling multiple lines of text with floating label that helps you to accept address, description, comments, feedback, and more. - [Multiline TextBox documentation](https://blazor.syncfusion.com/documentation/textbox/multiline) ## Get and set text box value Easily set or retrieve values in the Blazor TextBox component to process it. Enable a clear button to reset the input value. ## Right-to-left (RTL) rendering The Blazor TextBox component supports right-to-left rendering. Users can change the text direction and layout of the TextBox component from right to left. This improves user experience and accessibility for users of RTL languages. ## Themes The Blazor Text Box component has several built-in themes such as Tailwind CSS, Fluent, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, and High Contrast. Users can customize these built-in themes or create new themes by overriding Sass variables or using our Theme Studio application. ## Developer-friendly APIs Developers can control the appearance and behaviors of the Blazor Text Box component, including its floating label, using a rich set of APIs. ## Blazor TextBox Code Example Easily get started with the Blazor TextBox using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor TextBox Example](https://blazor.syncfusion.com/demos/textbox/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Blazor textbox. - razor ## Other supported frameworks TextBox is also available in JavaScript, Angular, React and Vue frameworks that are built from their own TypeScript libraries. Check out the different TextBox platforms from the links below, - [JavaScript TextBox](https://www.syncfusion.com/javascript-ui-controls/js-textbox) - [Angular TextBox](https://www.syncfusion.com/angular-components/angular-textbox) - [React TextBox](https://www.syncfusion.com/react-components/react-textbox) - [Vue TextBox](https://www.syncfusion.com/vue-components/vue-textbox) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Input Mask | Masked Textbox Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-input-mask # Blazor Input Mask - A Custom Masking Component - Allows users to enter valid data only through the input mask. - Supports custom mask formats with regular expressions (regex) to validate application-specific data. - Allows the validation of specific data formats such as phone numbers and date masks with different mask combinations. ## Overview The Blazor Input Mask is a component that provides an easy and reliable way to collect user input based on a standard mask. It allows you to capture phone numbers, date values, credit card numbers, and other standard format values. ## Standard mask The Blazor Input Mask component supports the standard masks listed on [MSDN](https://learn.microsoft.com/en-us/dotnet/api/system.windows.forms.maskedtextbox.mask?view=windowsdesktop-7.0&viewFallbackFrom=net-5.0). ## Custom mask Other than the standard mask elements, any custom character also can be a mask element by defining rules for it. ## Regular expression The mask elements can be regular expressions, which is useful when defining user-specific data such as IP addresses. ## Mask input combinations The Blazor Input Mask component allows different mask combinations based on the standard and custom masks. So, you can form different mask formats based on your application scenarios. ### Number mask From the standard mask elements, form a number mask for capturing any finite-length number to get number inputs such as phone numbers and credit card numbers. ### String mask In the case of a country code or product key input, where the input string requires uppercase characters, the string mask format will enforce this. ### Date mask The mask can form any date format to get similarly formatted date values. This is helpful in getting culture-specific date values by defining the corresponding date mask. - [Number, string, and date mask example](https://blazor.syncfusion.com/demos/input-mask/default-functionalities) ## Form support and validation As a form component, the captured value of a masked textbox component proceeds in the raw format when submitting the form. You can also integrate the form validator plugin to perform any custom validation. ## HTML5 input type support You can create the masked textbox component from the HTML5 [tel](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel) input. It opens the numeric keypad on mobile devices, which is useful for obtaining phone numbers or any other number-only inputs. ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility to work with screen readers and assistive devices. - Follows [WAI-ARIA best practices](https://www.w3.org/WAI/ARIA/apg/) for implementing keyboard interaction. - Designs the UI element visuals such as foreground color, background color, line spacing, text, and images based on [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standard. ## Developer-friendly APIs Developers can customize all UI elements and control behaviors of the Blazor Input Mask according to the end user’s requirements using its rich set of client-side APIs. ## Blazor Input Mask Code example Easily get started with the Blazor Input Mask using a few simple lines of C# code, as demonstrated below. Also, explore our [Blazor Input Mask Example](https://blazor.syncfusion.com/demos/input-mask/default-functionalities?theme=fluent2), which shows you how to include the Blazor Input Mask component with highlight customization. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/LZroXsZxfRTHFBGI) - razor ## Other supported frameworks Input Mask is also available in JavaScript, Angular, React and Vue frameworks that are built from their own TypeScript libraries. Check out the different Input Mask platforms from the links below, - [JavaScript Input Mask](https://www.syncfusion.com/javascript-ui-controls/js-input-mask) - [Angular Input Mask](https://www.syncfusion.com/angular-components/angular-input-mask) - [React Input Mask](https://www.syncfusion.com/react-components/react-input-mask) - [Vue Input Mask](https://www.syncfusion.com/vue-components/vue-input-mask) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Numeric Textbox | Responsive Currency Textbox | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-numeric-textbox # Blazor Numeric Textbox - Responsive and Interactive Component - A great alternative for HTML5 input-type numbers with a modern look. - Input can be automatically formatted as percentages or currency. - Input values are handled with a min and max range validation as well as decimal validation. ## Overview The Blazor Numeric Textbox component is a quick replacement for the number-type HTML input element. It’s used to get number inputs from users. It has several out-of-the-box features such as number format support, precision, and spin buttons. ## Number formats Format a Blazor Numeric Textbox component with one of the number formats listed on [MSDN](https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-numeric-format-strings?redirectedfrom=MSDN) or [Custom](https://docs.microsoft.com/en-us/dotnet/standard/base-types/custom-numeric-format-strings?redirectedfrom=MSDN) numeric format strings. Through number formatting, you can achieve percentage and currency text box behavior. ## Custom formats The Blazor Numeric Textbox component supports any custom format. A custom format allows you to place any symbol or character as a prefix or suffix to the input number format. ## Number precision You can control the precision of the input number value. And you can limit the precision to any length while the value is being typed. ## Spin buttons Spin buttons provide a flexible option for interacting with the Numeric Textbox. So you can increase or decrease the input value easily. You can customize the appearance of the spin buttons. And you can hide the buttons from the component if they are not needed. ## Incremental steps Increment or decrement a value based on a predefined step value. This can help users input large values. ## Form support and validation The Blazor Numeric Textbox component has min-max range validation support. This prevents your users from entering out-of-range values. You can integrate the form validator plugin to perform any custom validation. ## HTML5 input type support The Blazor Numeric Textbox component can be extended from the HTML5 [tel](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel) input. This opens the numeric keypad on mobile devices, which makes it easy to enter numeric values. ## Globalization The Blazor Numeric Textbox component comes with built-in globalization support. It adapts to any supported culture through simple settings. ## Right-to-left (RTL) The component supports right-to-left (RTL) rendering for users working in right-to-left languages like Hebrew, Arabic, or Persian. ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#spinbutton) accessibility to work with screen readers and assistive devices. - Follows [WAI-ARIA best practices](https://www.w3.org/WAI/ARIA/apg/#spinbutton) for implementing keyboard interaction. - Follows the [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standard in the design of the UI element visuals such as foreground color, background color, line spacing, text, and images. ## Developer-friendly APIs The Blazor Numeric Textbox component has a rich set of developer-friendly APIs. So you can handle all UI elements and behaviors of the control to provide the best experience to your end users. ## Other supported frameworks Numeric Textbox is also available in JavaScript, Angular, React and Vue frameworks that are built from their own TypeScript libraries. Check out the different Numeric Textbox platforms from the links below, - [JavaScript Numeric Textbox](https://www.syncfusion.com/javascript-ui-controls/js-numeric-textbox) - [Angular Numeric Textbox](https://www.syncfusion.com/angular-components/angular-numeric-textbox) - [React Numeric Textbox](https://www.syncfusion.com/react-components/react-numeric-textbox) - [Vue Numeric Textbox](https://www.syncfusion.com/vue-components/vue-numeric-textbox) ## Blazor Numeric TextBox Code Example Easily get started with the Blazor Numeric TextBox using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor Numeric TextBox Example](https://blazor.syncfusion.com/demos/numeric-textbox/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Numeric TextBox in Blazor. - razor [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor File Upload | Advanced InputFile Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-file-upload # Blazor File Upload - An Advanced Input File Component - Displays the file upload progress bar and also the flexible UI file list. - Multiple-file upload with form support, drag and drop, progress bar, folder upload, and more. - Large file upload with pause, resume, retry, and cancel options using chunking. ## Overview The Blazor File Upload is a component for uploading files, images, documents, and audio and video files to a server. The File Upload works in both WebAssembly and Server-side Blazor apps, and also supports a rich set of features that include multiple file selection, progress bars, auto-uploading, drag and drop, folder (directory) uploading, file validation, and more. ### Multiple-file upload Select [multiple files and upload](https://blazor.syncfusion.com/documentation/file-upload/async#multiple-file-upload) them to a server at the same time. This is useful for uploading images to a gallery and for file-sharing applications. ### Drag and drop Upload multiple files by simply [dragging them from the file explorer to the drop area](https://blazor.syncfusion.com/documentation/file-upload/file-source#drag-and-drop) (drop zone), which is a more user-friendly way to select and upload multiple files. ### Folder upload [Accepts a folder](https://blazor.syncfusion.com/documentation/file-upload/file-source#directory-upload) (directory) as a file source for uploading all the files (including subfolders) of the selected folder. ### AJAX file uploader Using the AJAX library, the Blazor File Upload component easily [uploads files in asynchronous mode](https://blazor.syncfusion.com/documentation/file-upload/async). ### Utilize chunk upload for large files Manage upload of [large file uploads efficiently using chunk upload](https://blazor.syncfusion.com/documentation/file-upload/chunk-upload) that slices a large file into smaller chunks and uploads to the server in a sequential order asynchronously. ### Create your own template designs Allows users to create a custom UI in the Blazor File Upload based on their application need using a wide range of template options. ### Attractive customizable themes Cutting edge design with 5+ built-in themes such as Fluent, Tailwind CSS, Bootstrap, Material, Fabric, and more. Utilize the [online Theme Studio tool](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) to customize themes of File Upload easily. ### Globalization and localization [Enables users from different locales](https://blazor.syncfusion.com/documentation/file-upload/localization) to use the File Upload by formatting dates, currency, and numbering to suit their preferences. ## Blazor File Upload Code Example Easily get started with Blazor File Upload using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor File Upload Example](https://blazor.syncfusion.com/demos/file-upload/default-functionalities) that shows you how to render the uploader component. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/rZVTthMrJQqQXhQx) - razor ## Resumable upload A built-in feature to pause, resume, retry, and cancel a file upload. This helps users upload high-resolution images, videos, and other large files safely. Additionally, it provides an option to pause and resume automatically based on server connection. - [Resumable upload documentation](https://blazor.syncfusion.com/documentation/file-upload/chunk-upload#resumable-upload) ## Custom file upload button The action buttons of the Blazor File Upload component are completely customizable, including its file list, which allows users create their own design for the Blazor File Upload UI. - [Custom File Upload button documentation](https://blazor.syncfusion.com/documentation/file-upload/style-appearance#customizing-the-file-upload-browse-button) ## File types (file extensions) Upload various file types and impose restrictions to allow only valid types of files from the client-side, which is mandatory before uploading a file in the web application. - [File types documentation](https://blazor.syncfusion.com/documentation/file-upload/validation#file-type) ## File validation (filter) Users can add validation to check file size limits with minimum and maximum ranges, number of files required, total size, and MIME type before uploading a file to a server. - [File validation documentation](https://blazor.syncfusion.com/documentation/file-upload/validation#file-size) - [File validation example.](https://blazor.syncfusion.com/demos/file-upload/file-validation) ## Paste image to upload The Blazor File Upload component processes images from the clipboard, also. Simply copy and paste the images to be uploaded to a server. ## Delete uploaded files Blazor File Upload provides a simple interface to delete wrongly uploaded files from a server. ## Preload uploaded files Users can configure previously uploaded files from the server with a success state, which is useful for viewing, removing, and manipulating them. - [Preload uploaded files example](https://blazor.syncfusion.com/demos/file-upload/preload-files?theme=bootstrap5) - [Preload uploaded files documentation](https://blazor.syncfusion.com/documentation/file-upload/async#preload-files) ## Auto-upload Users can initiate an automatic upload to upload files immediately upon adding them to the upload queue. - [Auto-upload documentation](https://blazor.syncfusion.com/documentation/file-upload/async#auto-upload) ## Right-to-left (RTL) The Blazor File Upload component supports right-to-left rendering, which improves the user experience and accessibility for those who work with languages like Hebrew, Arabic, or Persian. ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility, which allows the Blazor File Upload component to be accessed by on-screen readers and assistive devices. - Follows the [WAI-ARIA Best Practices](https://www.w3.org/WAI/ARIA/apg/) for implementing keyboard interaction. - The UI element visuals, such as foreground color, background color, line spacing, text, and images, were designed based on the [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standard. ## Touch support The Blazor File Upload component provides the best user experience across phone, tablet, and desktop form factors. ## Standard HTML forms The Blazor File Upload component has form support (synchronous mode) to work with native HTML forms. - [Form validation](https://blazor.syncfusion.com/documentation/file-upload/validation#file-validation-within-edit-form) ## Developer-friendly APIs Developers can control the appearance and behaviors of the Blazor File Upload, including its file list, using a rich set of APIs. - [API documentation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html) Multiple File Upload Asynchronous upload Chunked upload support ## Other supported frameworks The File Upload is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React File Upload](https://www.syncfusion.com/react-components/react-file-upload) - [Angular File Upload](https://www.syncfusion.com/angular-components/angular-file-upload) - [JavaScript File Upload](https://www.syncfusion.com/javascript-ui-controls/js-file-upload) - [Vue File Upload](https://www.syncfusion.com/vue-components/vue-file-upload) ## Supported browsers The Blazor File Upload works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [Start with Blazor Server-side File Upload](https://blazor.syncfusion.com/documentation/file-upload/getting-started) [Start with Blazor WebAssembly File Upload](https://blazor.syncfusion.com/documentation/file-upload/how-to/getting-started-with-blazor-webassembly) [Documentation](https://blazor.syncfusion.com/documentation/file-upload/getting-started) ##### Blazor Radio Button | Highly Customizable Option Button | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-radio-button # Blazor Radio Button - A Custom Component with Option Button - The Radio Button Component is an extension of the standard HTML Radio Button with different themes. - The label content can be customized with built-in APIs. - Flexible UI customization. ## Overview The Blazor Radio Button is a custom radio-type HTML5 input component for selecting one option from a list of predefined choices. It supports different states, sizes, labels, label positions, and UI customizations. ## Radio Button Sizes You can make use of the different sizes of radio button (default and small) as required in your application. - [Radio Button Size documentation](https://blazor.syncfusion.com/documentation/radio-button/label-and-size#size) ## Radio Button label The label used to define the Blazor Radio Button caption. You can caption the radio button and position the label either before or after the radio button. - [Radio Button Caption documentation](https://blazor.syncfusion.com/documentation/radio-button/label-and-size#label) ## Custom/Fancy Radio Button The Blazor Radio Button UI (inner and outer circles) has the support for complete customization of its appearance. ## Radio Button group The Blazor Radio Button is used to select a single option from the logically grouped options set. ## Themes The Blazor Radio Button supports several built-in themes such as Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize any one of these built-in themes or create new themes to achieve their own desired look and feel either by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Web Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#radiobutton) accessibility to work with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#radiobutton) best practices for implementing keyboard interaction. - Based on [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, the UI element visuals such as foreground color, background color, line spacing, text, and images are designed. - Supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian. ## Other supported frameworks Radio Button is also available in JavaScript, Angular, React and Vue frameworks that are built from their own TypeScript libraries. Check out the different Radio Button platforms from the links below, - [JavaScript Radio Button](https://www.syncfusion.com/javascript-ui-controls/js-radio-button) - [Angular Radio Button](https://www.syncfusion.com/angular-components/angular-radio-button) - [React Radio Button](https://www.syncfusion.com/react-components/react-radio-button) - [Vue Radio Button](https://www.syncfusion.com/vue-components/vue-radio-button) ## Blazor Radio Button Code Example Easily get started with the Blazor Radio Button using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor Radio Button Example](https://blazor.syncfusion.com/demos/buttons/radio-button?theme=bootstrap5) that shows you how to render and configure the Radio Button in Blazor. - razor [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Checkbox | Custom Checkbox with label | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-checkbox # Blazor Checkbox - Highly Customizable Checkbox Component - The Checkbox component is an extension of the standard HTML checkbox with different themes. - Tri-state support: Checked, unchecked, and indeterminate states. - Flexible UI customization for checked and intermediate states. ## Overview The Blazor Checkbox is a custom checkbox-type HTML5 input component for selecting one or more options from a list of predefined choices. It supports the indeterminate state, different sizes, custom labels and positions, and UI customization. ## Checkbox states A single Blazor Checkbox consists of toggle states to check and uncheck options. To prevent the toggling of a checkbox value, use the “disable” option. ## Tri-state or indeterminate checkbox A tri-state checkbox can be checked, unchecked, or indeterminate. If a few child elements are selected, the parent element will be in an indeterminate state. If all the child elements are checked, the parent element will also be checked. ## Checkbox size You can use different checkbox sizes as required in your application. ## Label for checkbox Add a label to define the Blazor Checkbox component’s caption. You can position the label either before or after the checkbox. - [Blazor Checkbox label documentation](https://blazor.syncfusion.com/documentation/check-box/label-and-size#label) ## Custom or fancy checkbox The Blazor Checkbox UI (frame and icons) can be completely customized. ## Forms support Seamlessly, Blazor Checkbox with rich UI supports HTML forms and reactive forms. ## Checkbox styling The Blazor Checkbox component ships with built-in themes such as Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize these built-in themes or create new ones to build their own desired look and feel either by simply overriding Sass variables or using our Theme Studio application. - [Blazor Checkbox styling documentation](https://blazor.syncfusion.com/documentation/check-box/how-to/customized-checkbox) ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#checkbox) accessibility standards to work with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#checkbox) best practices for implementing keyboard interaction. - Designs UI element visuals such as foreground color, background color, line spacing, text, and images based on [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards. - Supports right-to-left (RTL) text direction for users working with right-to-left languages like Hebrew, Arabic, or Persian. ## Blazor Checkbox Code Example Easily get started with the Blazor Checkbox using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor Checkbox Example](https://blazor.syncfusion.com/demos/buttons/checkbox?theme=bootstrap5) that shows you how to render and configure the Checkbox in Blazor. - razor ## Other supported frameworks Checkbox is also available in JavaScript, Angular, React and Vue frameworks that are built from their own TypeScript libraries. Check out the different CheckBox platforms from the links below, - [JavaScript CheckBox](https://www.syncfusion.com/javascript-ui-controls/js-checkbox) - [Angular CheckBox](https://www.syncfusion.com/angular-components/angular-checkbox) - [React CheckBox](https://www.syncfusion.com/react-components/react-checkbox) - [Vue CheckBox](https://www.syncfusion.com/vue-components/vue-checkbox) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Color Picker - Adjust Hue & Opacity | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-color-picker # Blazor Color Picker - Highly Customizable UI Component - Flexible inputs supporting HEX, RGBA, and HSVA. - Highly customizable color picker with easy selection. - Easy-to-use preset colors in inline mode and fluent API to configure presets. ## Overview The Blazor Color Picker component allows you to pick colors either by selecting them from the color picker container or by adjusting the hue and opacity. It supports inline mode, palette customization, and localization for seamless integration into forms. ## Flat Color Picker You can render the Blazor Color Picker container alone. It allows you to access the picker/palette directly without opening the popup. ## Touch-friendly and Responsive Blazor Color Picker’s touch-friendly design recognizes touch gestures, allowing the users to swipe in all four directions to select a color value. It provides a responsive mode that gives adaptive redesigned UI appearance for mobile devices and the best user experience on phones, tablets, and desktop form factors. ## Custom Color Picker/Palette The Blazor Color Picker and palette can be customized in multiple ways. The standalone color palette can be used in a page individually instead of the dropdown mode. ## Recent color support You can view the most recently selected color in the Color Picker. This feature is available exclusively in palette mode. ## Localization All Blazor Color Picker strings in the user interface can be localized as needed. Blazor Color Picker uses the localization (l10n) library to localize UI strings. - [Localization documentation](https://blazor.syncfusion.com/documentation/color-picker/localization#localization) ## Web Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility to work with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing keyboard interaction. - Follows [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards in design of the UI element visuals such as foreground color, background color, line spacing, text, and images. - Supports right-to-left (RTL) text direction for users working with right-to-left languages like Hebrew, Arabic, or Persian. ## Themes The Blazor Color Picker supports several built-in themes such as Fluent, Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize these built-in themes or create new themes to achieve their desired look and feel by simply overriding SASS variables or using our Theme Studio application. - [Theme studio Application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Developer-friendly APIs Developers can customize all UI elements and the behaviors of the Blazor Color Picker using its rich set of client-side APIs according to the requirement of the end users. ## Other supported frameworks Color Picker is also available in JavaScript, Angular, React and Vue frameworks that are built from their own TypeScript libraries. Check out the different Color Picker platforms from the links below, - [JavaScript Color Picker](https://www.syncfusion.com/javascript-ui-controls/js-color-picker) - [Angular Color Picker](https://www.syncfusion.com/angular-components/angular-color-picker) - [React Color Picker](https://www.syncfusion.com/react-components/react-color-picker) - [Vue Color Picker](https://www.syncfusion.com/vue-components/vue-color-picker) ## Blazor Color Picker Code Example Easily get started with the Blazor Color Picker using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor Color Picker Example](https://blazor.syncfusion.com/demos/color-picker/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Color Picker in Blazor. - razor [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Toggle Switch Button - ON-OFF Switch | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-toggle-switch-button # Blazor Toggle Switch Button - ON-OFF Switch Component - Fully customizable UI with checked and unchecked states. - Customize the label content with built-in API’s. - Comes with industry standard themes-Material, Fabric and Bootstrap. ## Overview The Blazor Toggle Switch Button is a custom HTML5 input-type checkbox component that allows you to perform a toggle (on/off) action between checked and unchecked states. It supports different sizes, labels, label positions, and UI customization. ## Toggle ON-OFF States A single switch consists of a toggle state that can be checked and unchecked. To prevent the toggling of switch value, you can make use of disable option. ## Change Switch Size You can make use of different switch sizes, default and small, as required in your application. ## Custom Switch labels, colors and width The Blazor Toggle Switch Button Component appearance (bar and handle) has support for complete customization. A switch can contain text to represent the checked/unchecked states (ON-OFF). It is customized to make the look and feel like - Windows Switch - iOS Switch - Android Switch ## Built-in themes Blazor Toggle Switch Button supports built-in themes such as Bootstrap 5, Tailwind CSS, Fluent, high contrast, and more. Users can customize these built-in themes or create new themes to achieve the desired look and feel either by simply overriding SASS variables or using the Theme Studio application. - [Theme Studio Application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Web Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/#switch) accessibility to work with on-screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/#switch) best practices for implementing keyboard interaction. - In Switch, Space key toggle states between checked and unchecked. - The UI element visuals such as foreground color, background color, line spacing, text, and images are designed based on [WCAG 2.0](https://www.w3.org/TR/WCAG20/). - The Toggle Switch Button supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian. ## Blazor Toggle Switch Button Code example Easily get started with the Blazor Toggle Switch Button using a few simple lines of C# code, as demonstrated below. Also, explore our [Blazor Toggle Switch Button Example](https://blazor.syncfusion.com/demos/buttons/toggle-switch-button?theme=fluent2), which shows you how to include the Blazor Toggle Switch Button component with highlight customization. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/rZheZiXGCGGJRAkw) - razor ## Other supported frameworks Toggle Switch is also available in JavaScript, Angular, React and Vue frameworks that are built from their own TypeScript libraries. Check out the different Toggle Switch platforms from the links below, - [JavaScript Toggle Switch Button](https://www.syncfusion.com/javascript-ui-controls/js-toggle-switch-button) - [Angular Toggle Switch Button](https://www.syncfusion.com/angular-components/angular-toggle-switch-button) - [React Toggle Switch Button](https://www.syncfusion.com/react-components/react-toggle-switch-button) - [Vue Toggle Switch Button](https://www.syncfusion.com/vue-components/vue-toggle-switch-button) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Dashboard | Responsive and Customizable Layout | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-dashboard # Blazor Dashboard - A Dynamic and Adaptive Layout Component - A simple and easily configurable layout component for designing interactive and responsive dashboards. - Customize dashboards with draggable and resizable panels effortlessly and dynamically. - Easy to integrate Blazor components to visualize any complex data or key metrics. ## Overview Blazor Dashboard is a grid-structured layout component that helps create static and dynamic dashboard layouts with panels. Dashboard panels are the basic building blocks of a dashboard and can be added programmatically or dynamically at runtime. The panels hold UI components and allow resizing, reordering, dragging and dropping, removing, and adding. Easily place components at the desired positions within the grid layout. ### Grid-structured layout The Dashboard Layout is a component with a [grid-like structure](https://blazor.syncfusion.com/documentation/dashboard-layout/setting-size-of-cells) that can easily split content into equal-sized cells. ### Easy to interact The panels allow for [resizing](https://blazor.syncfusion.com/documentation/dashboard-layout/interaction-with-panels/resizing-of-panels), rearranging, [dragging](https://blazor.syncfusion.com/documentation/dashboard-layout/interaction-with-panels/dragging-moving-of-panels), and dropping, removing and adding UI components. Components can be placed conveniently within the grid arrangement in the desired positions. ### Insert any UI component DataGrid, Charts, gauges, Maps, or any HTML content can be placed as panel content inside the layout to present metrics. ### Auto arranging panels With [floating support](https://blazor.syncfusion.com/documentation/dashboard-layout/interaction-with-panels/floating-of-panels), the panels in the layout will automatically organize themselves by sliding upward to occupy any open spaces. This makes efficient use of the layout for positioning panels. ### Adapts to any resolution The Blazor Dashboard Layout is a highly [responsive](https://blazor.syncfusion.com/documentation/dashboard-layout/responsive-adaptive) with an optimized design for desktops, touchscreens, and smart phones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Attractive, customizable themes Cutting-edge design with several built-in themes, such as Fluent, Tailwind CSS, Bootstrap, Material, and Fabric. Utilize the [online Theme Studio tool](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) to customize themes easily. ## Blazor Dashboard Code Example Easily [get started with the Blazor Dashboard](https://blazor.syncfusion.com/documentation/dashboard-layout/getting-started) using a few simple lines of C# code example, as demonstrated below. Also, explore our [Blazor Dashboard Example](https://blazor.syncfusion.com/demos/dashboard-layout/default?theme=bootstrap5), that shows you how to render and configure the Dashboard component in Blazor. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/BDLTNhtrAVZUGwNj) - razor ## Dynamic layout design The Blazor Dashboard Layout component allows dynamic designing of the layout by adding, removing, resizing, floating, and reordering the panels within the layout. ## Drag and drop The Blazor Dashboard supports smooth dragging of the panels to replace or re-order at the desired position within the layout. - [Drag and drop documentation](https://blazor.syncfusion.com/documentation/dashboard-layout/interaction-with-panels/dragging-moving-of-panels) ## Resizing Easy resizing of a panel in all directions enables quick designing of the layout, and fitting small or large-sized content conveniently. - [Resizing documentation](https://blazor.syncfusion.com/documentation/dashboard-layout/interaction-with-panels/resizing-of-panels) ## Floating The panels within the layout will auto arrange by moving in the upward direction to occupy empty spaces available in the layout. This provides effective usage of the layout for panel placement. - [Floating documentation](https://blazor.syncfusion.com/documentation/dashboard-layout/interaction-with-panels/floating-of-panels) ## Placing components as content Place any HTML content or HTML UI components like Grid, Charts, Gauge, Maps, etc. to represent the metrics or KPI as panel content inside the dashboards. - [Placing components as content documentation](https://blazor.syncfusion.com/documentation/dashboard-layout/seo) ## State persistence The Dashboard Layout component’s public serialize method allows users to obtain and save the current layout structure of the component in order to construct another dashboard with the same panel structure. - [State persistence documentation](https://blazor.syncfusion.com/documentation/dashboard-layout/state-persistence) ## Other supported frameworks The Dashboard Layout is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React Dashboard Layout](https://www.syncfusion.com/react-components/react-dashboard-layout) - [Angular Dashboard Layout](https://www.syncfusion.com/angular-components/angular-dashboard-layout) - [JavaScript Dashboard Layout](https://www.syncfusion.com/javascript-ui-controls/js-dashboard-layout) - [Vue Dashboard Layout](https://www.syncfusion.com/vue-components/vue-dashboard-layout) ## Supported browsers The Blazor Dashboard Layout works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [Documentation](https://blazor.syncfusion.com/documentation/dashboard-layout/getting-started) ##### Blazor Dialog | Feature-Rich Modal Dialog UI Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-modal-dialog # Blazor Dialog - An Interactive Modal Dialog Component - Make a dialog box with a highly customizable and configurable user interface (UI). - Display critical information, errors, warnings, confirmations, alerts, questions, and message boxes. - Use built-in features such as action buttons, drag and drop, positioning, animations, and themes. ## Overview The Blazor Dialog (modal dialog) is a user interface (UI) component that displays critical information, errors, warnings, and questions to users, as well as confirming decisions, and collects input from users. The component has a rich set of built-in features such as action buttons, positioning, animation, dragging, resizing, and templating, with mobile dialog support. ## Blazor Modal Dialog code example Easily [get started with the Blazor Dialog](https://blazor.syncfusion.com/documentation/dialog/getting-started) using a few simple lines of C# code as demonstrated below. Also explore our [Blazor Modal Dialog Example](https://blazor.syncfusion.com/demos/dialog/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Blazor Dialog. - razor ## Modal dialogs (modal window) The two types of dialogs are modal and non-modal (modeless), based on user interactions: - Modal dialogs force users to interact with them before continuing. They are used to show important information and non-continuous process information (for example, a sign-up or login form). - Non-modal dialogs allow users to interact outside the dialog box even if it is in an active state, which is suitable for frequent, nonblocking dialogs (for example, find-and-replace dialogs). - [Modal dialogs example](https://blazor.syncfusion.com/demos/dialog/modal?theme=bootstrap5) - [Modal dialogs documentation](https://blazor.syncfusion.com/documentation/dialog/getting-started) ## Action buttons The Blazor Dialog component provides built-in support to perform actions using buttons, which define necessary callback functions to handle user input. - [Action buttons documentation](https://blazor.syncfusion.com/documentation/dialog/dialogbuttons) ## Localization The localization library allows you to localize the default text content. In the Dialog component, the close button’s tooltip text alone will be localized based on the specified culture. - [Localization documentation](https://blazor.syncfusion.com/documentation/dialog/localization) ## Positioning Users can position a Blazor dialog wherever they want on a page. It is easy to configure this through built-in positions or any custom axis value (for example, top left, bottom right, top right, bottom left, 100 75, etc.). - [Positioning documentation](https://blazor.syncfusion.com/documentation/dialog/positioning) ## Draggable The Blazor modal dialog can be moved anywhere in a page by dragging its header to reposition the dialog dynamically. - [Draggable documentation](https://blazor.syncfusion.com/documentation/dialog/draggable) ## Overlays Blazor Modal Dialogs create overlays on open modal windows that provide options for a user to control the closing behavior of the dialog. - [Overlays documentation](https://blazor.syncfusion.com/documentation/dialog/modal-dialog) ## Additional dialogs Users can launch multiple Blazor Dialogs simultaneously or one above the other based on their z-index (z-depth). - [Multiple dialogs example](https://blazor.syncfusion.com/demos/dialog/multiple-dialogs?theme=bootstrap5) ## Animation A variety of smooth, built-in animations are available to configure the opening and closing of modal dialogs. The Blazor Dialog is animated based on CSS3 animation from the Animation library. - [Animation documentation](https://blazor.syncfusion.com/documentation/dialog/animation) ## Resizable The Blazor Dialog window can be resized by dragging the edges or borders of the Dialog within the target container using its handle (grip) or hovering over it. - [Resizable documentation](https://blazor.syncfusion.com/documentation/dialog/resize) ## Close options The Blazor Modal Dialog can be closed by clicking the close icon, with an overlay click, or by pressing the ESC key. Users can restrict the closing behavior of a dialog based on its callback function parameters. - [Close options documentation](https://blazor.syncfusion.com/documentation/dialog/modal-dialog#close-dialog-when-clicking-outside-of-its-region) ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility, making the Dialog accessible to on-screen readers and assistive devices. - Follows [WAI-ARIA best practices](https://www.w3.org/WAI/ARIA/apg/) for implementing keyboard interaction. - UI element visuals such as foreground color, background color, line spacing, text, and images are designed based on the [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standard. ## Responsiveness The Blazor Dialog component is highly configurable to make mobile dialogs with better user experiences across phone, tablet, and desktop form factors. ## Right-to-left (RTL) The Blazor Dialog component supports right-to-left rendering. Users can change the text direction and layout of the Dialog component from right to left. This improves the user experience and accessibility for those who use RTL languages. ## Themes The Blazor Dialog component has several built-in themes such as Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, and high contrast. Users can customize these built-in themes or create new themes to achieve the desired look and feel either by simply overriding Sass variables or using the Theme Studio application. ## Other supported frameworks The Dialog is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React Modal Dialog](https://www.syncfusion.com/react-components/react-modal-dialog) - [Angular Modal Dialog](https://www.syncfusion.com/angular-components/angular-modal-dialog) - [JavaScript Modal Dialog](https://www.syncfusion.com/javascript-ui-controls/js-modal-dialog) - [Vue Modal Dialog](https://www.syncfusion.com/vue-components/vue-modal-dialog) ## Supported browsers The Blazor Dialog works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [I’d love to read it now.](https://blazor.syncfusion.com/documentation/dialog/getting-started) [Documentation](https://blazor.syncfusion.com/documentation/dialog/getting-started) ##### Blazor Splitter | Resizable Collapsible Panel | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-splitter # Blazor Splitter - A Resizable Layout using Split Panes - Resizable and multiple split panes. - Easy to integrate Blazor UI component as pane content. - Flexible to design different layouts. ## Overview The Blazor Splitter is a layout user interface (UI) that provides resizable, expandable, collapsible, and nestable panes. It is useful for constructing different layouts in web apps such as Outlook style, Windows Explorer style, code editor UI, and more. The component can integrate other JavaScript UI controls inside its split panes. ## Resizable panes The Blazor Splitter component has built-in resizable support that helps widen or shrink the panes. Users can control the resize behavior for individual panes with min and max size validation. - [Resizable panes documentation](https://blazor.syncfusion.com/documentation/splitter/resizing) ## Collapsible panes Built-in support is available for expanding and collapsing the panes by interaction. - [Collapsible panes example](https://blazor.syncfusion.com/demos/splitter/expand-collapse?theme=bootstrap4) ## Multiple panes Users can configure more than 2 panes to construct different layouts using Blazor Splitter component such as Outlook-style, Windows explorer-style, Visual Studio code-style, and more. ## Vertical or horizontal orientation The orientation of the split panes can either be horizontal or vertical inside the Blazor Splitter component. - [Vertical or horizontal orientation](https://blazor.syncfusion.com/documentation/splitter/split-panes) ## Separator (Divider) The Blazor Splitter component has a split bar to visually split the panes that contains resize gripper. - [Separator documentation](https://blazor.syncfusion.com/documentation/splitter/split-panes#separator) ## Right-to-Left (RTL) The Blazor Splitter component supports right-to-left (RTL) rendering. Users can change the text direction and layout of the Blazor Splitter component from right to left. It improves the user experience and accessibility for users who use RTL languages. ## Themes The Blazor Splitter component has several built-in themes such as Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, and High Contrast. Users can customize any one of these built-in themes or create new themes to achieve their own desired look and feel either by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Sizing to content Users can specify pane size either in pixels or in percentage values including min and max range values to accommodate the sizing to its child component or content. - [Pane sizing documentation](https://blazor.syncfusion.com/documentation/splitter/pane-sizing) ## Other supported frameworks Splitter is also available in JavaScript, Angular, React and Vue frameworks that are built from their own TypeScript libraries. Check out the different Splitter platforms from the below links, - [JavaScript Splitter](https://www.syncfusion.com/javascript-ui-controls/js-splitter) - [Angular Splitter](https://www.syncfusion.com/angular-components/angular-splitter) - [React Splitter](https://www.syncfusion.com/react-components/react-splitter) - [Vue Splitter](https://www.syncfusion.com/vue-components/vue-splitter) ## Blazor Splitter Code example Easily get started with the Blazor Splitter using a few simple lines of C# code, as demonstrated below. Also, explore our [Blazor Splitter Example](https://blazor.syncfusion.com/demos/splitter/default-functionalities?theme=fluent2), which shows you how to include the Blazor Splitter component with increased pane dimension of and separator (divider) bar size. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/BjrfMXLzTHWrhVcq) - razor [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor ListBox - Customizable Drag and Drop items | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-listbox # Blazor ListBox - Easily Customizable UI Component - Simple form control with multi-selection of list items made easy. - Dual ListBox with drag and drop of items. - Built-in features: sorting, grouping, multiple selection, and many more. ## Overview The Blazor ListBox control is a graphical user interface for displaying a list of items with multi-selection options. It has a rich appearance and allows users to select one or more items from the list using checkboxes or keyboard interactions. It has several out-of-the-box features, such as data binding, sorting, grouping, reordering, dragging and dropping, UI customization, and accessibility. ## Data binding You can bind data from a variety of data sources such as JSON data collections or remote data sources using different kinds of adaptors such as OData, OData V4, URL, JSON, and Web API. The control uses JavaScript data manager to manage data and also has customization options for data requests and processing. - [List Box data binding documentation](https://blazor.syncfusion.com/documentation/listbox/data-binding) ## Selection Blazor ListBox selection is used to highlight the selected items. By default, multi-selection is enabled in the ListBox. You can modify it to single selection. - [Blazor ListBox Selection documentation](https://blazor.syncfusion.com/documentation/listbox/selection) ### Single selection When a user clicks or taps an item, the Blazor ListBox control enables the selection of the list item by default. ### Multiple selection The Blazor ListBox component supports multiple selection using touch or keyboard actions. ### Checkbox selection Select items using checkboxes. You can also select all items. ## Reordering of selected item In the Blazor ListBox component, you can reorder selected items within the list. Items can be moved up and down using keyboard interactions or a toolbar action. ## Dragging and Dropping of items TThe high-performance Blazor ListBox control allows you to drag and drop items between one or more list boxes. You can customize the placeholder and dragged item hint. ## Toolbar The Blazor ListBox toolbar allows you to perform predefined actions. - Reordering: move selected items up or down. - Item transferring: transfer selected or all items between connected list boxes. ## Grouping with category Group the list items with the corresponding category to pick an item quickly. This feature improves the visual experience of the user. ## UI customization with templates In the Blazor ListBox component, you can customize the appearance (style) of each item displayed in the list box. ## Sortable list items You can display items in ascending or descending order. - [Sortable list items documentation](https://blazor.syncfusion.com/documentation/listbox/sorting-grouping) ## Themes The Blazor Listbox supports several built-in themes such as Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize any one of these built-in themes or create new themes to achieve their own desired look and feel either by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Filtering Filtering helps view particular or related items in a Listbox that meet a given criteria. ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#listbox) accessibility that makes a list view accessible to on-screen readers and assistive devices. - Follows [WAI-ARIA best practices](https://www.w3.org/WAI/ARIA/apg/#listbox) for implementing keyboard interaction. - Designed with UI element visuals such as foreground color, background color, line spacing, text, and images based on the [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standard. - Supports right-to-left (RTL) direction for users working in right-to-left languages like Hebrew, Arabic, or Farsi. ## Developer-friendly APIs Developers can customize all UI elements and control their behaviors according to the end user’s requirement using the control’s rich set of client-side APIs. - [Blazor ListBox APIs documentation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html) ## Blazor ListBox Code Example Easily get started with the Blazor ListBox using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor ListBox Example](https://blazor.syncfusion.com/demos/listbox/default-functionalities) that shows you how to render and configure the Blazor ListBox component. - razor ## Other supported frameworks The ListBox component is also available in our Angular, React, Vue, and JavaScript frameworks, built from their own TypeScript libraries. Check out the ListBox component on different platforms from the following links. - [JavaScript ListBox](https://www.syncfusion.com/javascript-ui-controls/js-listbox) - [Angular ListBox](https://www.syncfusion.com/angular-components/angular-listbox) - [React ListBox](https://www.syncfusion.com/react-components/react-listbox) - [Vue ListBox](https://www.syncfusion.com/vue-components/vue-listbox) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor ListView - Customizable Templated Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-listview # Blazor ListView: High-Performance Component - Built-in support for flexible data binding, sorting, grouping, nested navigation, multiple selection, templating, and more. - Capable of loading a huge amount of data on demand while being scrolled. - Data can be elegantly visualized with cards, images, icons, avatars, and badges for better understanding. ## Overview The Blazor ListView component is a list-like interface that allows you to select an item or multiple items. It represents data in an interactive hierarchical structure across different layouts or views. ## Data binding Powerful data binding allows data to be loaded from an array of primitive data, JSON data collections, or remote data sources. It supports complex data with field mapping; different kinds of data services such as OData, OData V4, and web API; and data formats such as XML, JSON, JSONP, CSV, and HTML tables. - [Data binding example](https://blazor.syncfusion.com/demos/listview/remote-data?theme=bootstrap5) ## Virtualization or load on demand The Blazor ListView component supports UI virtualization to improve performance while loading huge amounts of data. This creates a fixed number of items regardless of data volume and displays the relevant data instead of creating all items at once. ## Sortable lists Sort data programmatically in ascending or descending order. Also use custom sorting logic. ## Group list data Group ListView data programmatically. You can identify a group name from group headers in the view. ## Multilevel ListView The ListView component represents a nested data object structure in a list of lists. The initial screen displays the first-level list items and the next level is displayed when users interact with the first. ### Single selection When a user clicks or taps an item, the Blazor ListView component enables the selection of the list item by default. ### Checklists The Blazor ListView component supports multiple selection through checkboxes to the right or left of the list items. Users can select or clear a series of items without using the keyboard. ### Manipulation Users can disable selection by handling events. Preserve and restore the selected values in a ListView so that users can continue their work from a previously saved state. ## Multiline text Arrange the list item content with multiline text, icons, and avatars. ## UI customization Completely customize the Blazor ListView component headers, list items, and group headers using template options. Users can arrange their content in flexible formats like image view, multiline text view, and mixed mode. ## Touch-friendly UI The Blazor ListView component responds to screen sizes and adapts its contents to fit any device. It also recognizes touch gestures, enabling items to be selected or cleared when a tap or double-tap action is performed. This provides the best user experience on phones, tablets, and desktops. ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#Listbox) accessibility, allowing the ListView to be accessed by on-screen readers and assistive devices. - Follows the [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standard in the design of UI element visuals such as foreground color, background color, line spacing, text, and images. - Follows [WAI-ARIA best practices](https://www.w3.org/WAI/ARIA/apg/#Listbox) for implementing keyboard interaction. ## Developer-friendly APIs In the Blazor ListView component, you have control over all the UI elements and behaviors through a rich set of developer-friendly APIs. ## Blazor ListView code example Easily get started with the Blazor ListView using a few simple lines of C# code as demonstrated below. Also explore our [Blazor ListView example](https://blazor.syncfusion.com/demos/listview/default-functionalities?theme=bootstrap5) that shows you how to render and configure the ListView. - razor ## Other supported frameworks ListView is also available in Angular, React, Vue, and JavaScript frameworks, built from their own TypeScript libraries. Check out the different ListView platforms from the links below: - [Angular ListView](https://www.syncfusion.com/angular-components/angular-listview) - [React ListView](https://www.syncfusion.com/react-components/react-listview) - [Vue ListView](https://www.syncfusion.com/vue-components/vue-listview) - [JavaScript ListView](https://www.syncfusion.com/javascript-ui-controls/js-listview) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Range Slider - Simple Slider Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-range-slider # Blazor Range Slider - Responsive and Touch-Friendly Component - A touch-friendly component with Material Design-style UI. - Built-in features such as value formatting and dragging a whole range to select values. - Customized labels with negative, fractional, date, time, and custom values. ## Overview The Blazor Range Slider is a custom range-type HTML5 input component that allows you to select a value or range of values between a specified min and max. ## Numeric Range Slider Select a range of numeric values intuitively by using two handles. Add a color between the handles to indicate selection. ## Single Value Slider This simple Blazor Slider component allows users to select a specific numeric value from a range. The fill selection option is available to indicate the selected range visually. ## Touch-friendly and Responsive The Blazor Range Slider component recognizes touch gestures, allowing users to swipe left or right to change the value of the slider. A responsive, and touch-friendly design provides the best user experience on phone, tablet, and desktop form factors. ## Formatting Values The user can format the slider values with a prefix (e.g. $10) and, postfix (e.g. 10 km) and prettify the given values (e.g. 10000 to 10,000). ## Custom Slider Users can customize the slider type to date range slider, time range slider, price range slider, rating slider, custom values, and more. ## Vertical Slider The Blazor Range Slider component provides both horizontal and vertical orientation. ## Float and Negative Values Blazor Range Slider follows the [HTML5 input type range standards](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range), and supports number, float, and negative values regardless of the format. ## Form Slider Seamlessly supports HTML5 forms, Angular template-driven forms, and reactive forms. ## Snap increments Define increment or decrement step values in the slider component to select a precise value between ranges. ## UI Customization The slider bar, thumbs, ticks, and tooltips can be customized using CSS and callback events. ## Globalization and Localization The Blazor Range Slider Component is designed to support localization and globalization options. ## Web Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#slider) accessibility that helps sliders be accessible by on-screen readers and assistive devices. - Designed the UI element visuals such as foreground color, background color, line spacing, text, and images based on the [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standard. - Follows [WAI-ARIA best practices](https://www.w3.org/WAI/ARIA/apg/#slider) for implementing keyboard interaction. ## Developer Friendly APIs Developers can customize all UI elements and Component the behaviors to their end users using its rich set of client-side APIs. ## Other supported frameworks Range Slider is also available in JavaScript, Angular, React and Vue frameworks that are built from their own TypeScript libraries. Check out the different Range Slider platforms from the links below, - [JavaScript Range Slider](https://www.syncfusion.com/javascript-ui-controls/js-range-slider) - [Angular Slider](https://www.syncfusion.com/angular-components/angular-slider) - [React Slider](https://www.syncfusion.com/react-components/react-slider) - [Vue Slider](https://www.syncfusion.com/vue-components/vue-slider) ## Blazor Range Slider Code Example Easily get started with the Blazor Range Slider using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor Range Slider Example](https://blazor.syncfusion.com/demos/range-slider/default?theme=bootstrap5) that shows you how to render and configure the Range Slider in Blazor. - razor [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Tooltip - Custom Popover Control | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-tooltip # Blazor Tooltip - Popover control with Custom Design - Automatically adjust display position based on the view page without inconsistencies. - Customize the content with icons, images, a dynamic AJAX template, and more. - Enhance the opening and closing of a pop-over with out-of-the-box animations. ## Overview The Blazor Tooltip is a pop-up that shows information or messages when users hover over, click, focus, or touch an image, button, anchor tag, etc. The tooltip information can include simple text, images, hyperlinks, or custom templates. ## Position and mouse trails The Blazor Tooltips can be positioned in twelve different areas around the target. Configure the Blazor Tooltip to follow or not follow the mouse pointer. Position the tip pointer at the right, left, top, and bottom. ## Smart positioning/auto positioning The Blazor Tooltip intelligently auto positions its content and arrows. It fits in the best location of the viewport or container. ## Dynamic content You can load dynamic content to the Blazor Tooltip on demand using an AJAX callback. ## Animation effects The Blazor Tooltip has built-in animations that are completely customizable. You can change the animation effect, duration, and delay, and customize transition effects at the application level. ## Customizing tooltips The content of the Tooltip component can easily be customized using templates. It can be loaded with inline HTML, images, iframe, videos, and maps. You can also add a title to the content. ## Show and hide You can show and hide triggers of the Blazor Tooltip using auto, hover, click, focus, and custom modes. Implement your own custom mode to customize the show and hide behaviors. ## Offsets The Blazor Tooltip has options to change the offset position of the Tooltip from the target element. This offset value is defined in pixels. ## Interactive tooltip By default, the Blazor Tooltip will show and hide when hovering in and out. You can stop the show and hide triggers and make the Tooltip visible always. ## Triggers You can show tooltips when you hover, click, touch, and focus on any element. ## Fancy tooltip You can completely customize a Blazor tooltip using CSS. ## Tooltip design The Blazor Tooltip component is shipped with several built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, and high contrast. Users can customize one of these built-in themes or create new themes to achieve their desired look and feel. This is done by simply overriding Sass variables or using our Theme Studio application. ## Easy integration You just need message and target element to make the tooltip fully functional. It will work out of the box. However, it provides many options to change the position, animation, and appearance. ## Open mode Specify how the Tooltip opens on a page, such as on hovering over, focusing, or clicking target elements. ## Touch-friendly The Blazor Tooltip responds to screen size and adapts its contents to fit any touch device. It recognizes touch gestures and displays its message when performing a touch and hold action. It will hide after 1500 ms. This provides the best user experience for touch devices such as phones and tablets. ## SVG and canvas support The Blazor Tooltip supports both SVG and canvas elements. Users can directly attach tooltips to or elements to show data visualization elements. ## Other supported frameworks Tooltip is also available in Angular, React, Vue, and JavaScript frameworks that are built from their own TypeScript libraries. Check out the different Tooltip platforms from the links below, - [JavaScript Tooltip](https://www.syncfusion.com/javascript-ui-controls/js-tooltip) - [Angular Tooltip](https://www.syncfusion.com/angular-components/angular-tooltip) - [React Tooltip](https://www.syncfusion.com/react-components/react-tooltip) - [Vue Tooltip](https://www.syncfusion.com/vue-components/vue-tooltip) ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#tooltip) accessibility to make it accessible to screen readers and assistive devices. - Based on the [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standard, UI element visuals such as foreground color, background color, line spacing, text, and images are designed. - Follows [WAI-ARIA best practices](https://www.w3.org/WAI/ARIA/apg/#tooltip) best practices for implementing keyboard interaction. ## Developer-friendly APIs In the Blazor Tooltip component, you have control over all the UI elements and behaviors. It provides the best user experience through a rich set of developer-friendly APIs. ## Blazor Tooltip code example Easily get started with the Blazor Tooltip using a few simple lines of C# code as demonstrated below. Also explore our [Blazor Tooltip example](https://blazor.syncfusion.com/demos/tooltip/default?theme=fluent) that shows you how to render and configure the Tooltip in Blazor. - razor [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor HeatMap Chart | Matrix Bubble Chart | Syncfusion® URL: https://www.syncfusion.com/blazor-components/blazor-heatmap-chart # Blazor HeatMap Chart - A Matrix Data visualization Component - Display simple or large matrix data graphically through color variations in SVG or canvas. - Analyze data pattern of the subject quickly with multiple views such as rectangle, bubble, calendar, and sector HeatMaps. ## Overview The Blazor HeatMap Chart is a graphical representation of two-dimensional data where the values are represented with gradient or solid color variations. The data points are drawn as HeatMap cells using Scalable Vector Graphics (SVG) rendering. ## Blazor HeatMap Chart Code Example Easily get started with the Blazor HeatMap Chart using a few simple lines of C# code as demonstrated below. Also explore our [Blazor HeatMap Chart example](https://blazor.syncfusion.com/demos/heatmap-chart/default-functionalities?theme=bootstrap5) that shows you how to render and configure the HeatMap Chart in Blazor. - razor ## Dealing with large data The Blazor HeatMap Chart can display a large volume of data and provides the best initial load performance and optimized memory usage. ## Bubble HeatMap Chart The Blazor Bubble HeatMap Chart, or the matrix bubble chart, visualizes the data using the variations in bubble attributes such as size, color, and sector. ## Calendar HeatMap The Blazor Calendar HeatMap visualizes time series data, with each data point representing a value bound to a specific time. ## Axis Populate data in the Blazor HeatMap Chart using different axis types: numeric, category, and date-time. - [Axis types documentation](https://blazor.syncfusion.com/documentation/heatmap-chart/axis) ### Numeric axis Use a numeric axis to represent numeric data in a HeatMap. ### Date-time axis Use a date-time axis to represent time series data in a HeatMap. Similarly, display dates and times as axis labels with different formats. ### Category axis Use a category axis to represent non-numerical data in a HeatMap and display text labels instead of numbers. ## Customizable axis The Blazor HeatMap Chart allows you to customize the axis elements to make an axis more readable. ### Inverse axis Achieve RTL layout by reversing the axis labels. This swaps the higher and lower ranges of an axis. - [Inversed axis example](https://blazor.syncfusion.com/demos/heatmap-chart/inversed-axis) - [Inversed axis documentation](https://blazor.syncfusion.com/documentation/heatmap-chart/axis#inversed-axis) ### Opposed position Arrange the axes smartly by moving them to positions opposite to their default positions. - [Opposed axis example](https://blazor.syncfusion.com/demos/heatmap-chart/opposed-axis) - [Opposed axis documentation](https://blazor.syncfusion.com/documentation/heatmap-chart/axis#opposed-axis) ### Axis intervals Set axis labels with regular intervals, hiding adjacent labels across all types of axes. - [Axis intervals documentation](https://blazor.syncfusion.com/documentation/heatmap-chart/axis#axis-intervals) ### Axis label rotation Rotate axis labels clockwise or counterclockwise to any desired angle. ### Axis label formatting Customize the axis label text using the available formatting options. - [Label formatting documentation](https://blazor.syncfusion.com/documentation/heatmap-chart/axis#label-formatting) ## HeatMap cell customization Customize the default appearance of a cell or data point using the available formatting options. - [Cell customization documentation](https://blazor.syncfusion.com/documentation/heatmap-chart/appearance#cell-customizations) ### Data label Toggle visibility or format the data labels to display custom text along with the cell values. - [Data label documentation](https://blazor.syncfusion.com/documentation/heatmap-chart/appearance#data-label) ### Border Change the borders and cell spacing by customizing the border settings. - [Border customization documentation](https://blazor.syncfusion.com/documentation/heatmap-chart/appearance#border) ## Data label template Render any HTML element as a label for the cells in the HeatMap. - [Data label template documentation](https://blazor.syncfusion.com/documentation/heatmap-chart/appearance#template) ## Palette Customize the default color settings of the HeatMap cells with gradient or solid custom colors. - [Palette settings example](https://blazor.syncfusion.com/demos/heatmap-chart/palette-mode) - [Palette settings documentation](https://blazor.syncfusion.com/documentation/heatmap-chart/palette) ## Cell color range customization Color ranges allow a color to be applied to specific ranges in heatmap cells. ## Legend Display additional information about data points in the Blazor HeatMap Chart using a legend. - [Legend documentation](https://blazor.syncfusion.com/documentation/heatmap-chart/legend) ### Types Choose between a gradient pointer and a list-type legend for improving data points readability. - [Legend types example](https://blazor.syncfusion.com/demos/heatmap-chart/legend-placement) ### Positioning Place the legend anywhere in the chart area to make it fit best on a page. - [Legend placement example](https://blazor.syncfusion.com/demos/heatmap-chart/legend-placement) ### Paging This component enables paging when the legend items exceed the legend bounds. Then, each legend item can be viewed by navigating between the pages. ### Legend title A legend title provides information about the HeatMap legend. ## Empty points Handle missed or undefined data values with empty data points. - [Empty points example](https://blazor.syncfusion.com/demos/heatmap-chart/empty-points) - [Empty points documentation](https://blazor.syncfusion.com/documentation/heatmap-chart/working-with-data#empty-points) ## Selection Select single or multiple cells using keyboard, mouse, and touch interactions. - [Selection example](https://blazor.syncfusion.com/demos/heatmap-chart/cell-selection?theme=fluent) - [Selection documentation](https://blazor.syncfusion.com/documentation/heatmap-chart/selection) ## Tooltip Display tooltips with additional information on mouse hover over data points. - [Tooltip example](https://blazor.syncfusion.com/demos/heatmap-chart/tooltip-template) - [Tooltip documentation](https://blazor.syncfusion.com/documentation/heatmap-chart/tooltip) ## Other supported frameworks The HeatMap Chart is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React HeatMap Chart](https://www.syncfusion.com/react-components/react-heatmap-chart) - [Angular HeatMap Chart](https://www.syncfusion.com/angular-components/angular-heatmap-chart) - [JavaScript HeatMap Chart](https://www.syncfusion.com/javascript-ui-controls/js-heatmap-chart) - [Vue HeatMap Chart](https://www.syncfusion.com/vue-components/vue-heatmap-chart) ## Supported browsers The Blazor HeatMap Chart works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [Documentation](https://blazor.syncfusion.com/documentation/heatmap-chart/getting-started) ##### Blazor TreeView | Organize Data in a Tree Structure | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-treeview # Blazor TreeView - A High-Performance Hierarchical Tree Control - Display hierarchical data in a tree-view structure. - Load a wide range of nodes with optimal performance. - Drag and drop multiple selected tree nodes anywhere. - Select multiple nodes using built-in check boxes. - Edit node text in-line with editable nodes support. - Easily customize nodes, and expand and collapse icons. ## Overview The Blazor TreeView is a UI component that displays hierarchical data, such as a table of contents, code examples, and file directories, in a tree structure. TreeView is provided with features, including data binding, on-demand loading, multi-selection, drag and drop, node editing, checkboxes, templates, and more, compatible with both Blazor WebAssembly (WASM) and Blazor Server apps. ### High performance [Load on demand (lazy load)](https://blazor.syncfusion.com/documentation/treeview/data-binding) is enabled by default to reduce bandwidth usage when consuming large amounts of data. Only first-level nodes are loaded initially, and then child nodes are loaded when their parent node is expanded. ### Seamless data binding [Bind data to the TreeView](https://blazor.syncfusion.com/documentation/treeview/data-binding) component from any valid data source in JSON format. The tree data can be local or remote and retrieved via various adapters, such as OData, OData V4, URL, JSON, and web API. ### Adapts to any resolution TreeView has a highly responsive layout and an optimized design for desktops, touchscreens, and phones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Admirable feature set The Blazor TreeView supports [load on demand, bound and unbound modes, drag and drop, multiselection, and editing](https://blazor.syncfusion.com/documentation/treeview/getting-started). ### Create your own template designs It can be customized via [node template support](https://blazor.syncfusion.com/documentation/treeview/template), which allows you to design a custom structure for tree nodes. Node templates can be used for parent nodes, child nodes, or both, and can include images and any custom element structure. ### Visualize hierarchical data The Blazor TreeView is a graphic user interface element that displays hierarchical data as a tree structure. It can be populated with nested arrays of JSON objects from a hierarchical data source. ### Attractive, customizable themes Cutting-edge design with several built-in themes, such as Fluent, Tailwind CSS, Bootstrap, Material, and Fabric. Utilize the [online Theme Studio tool](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) to customize themes of TreeView easily. ### Globalization and localization Enable users from different locales to use the component by formatting dates, currency, and numbering to suit preferences. ## Blazor TreeView Code Example Easily get started with the Blazor TreeView using a few simple lines of C# code example as demonstrated below, Also explore our [Blazor TreeView Example](https://blazor.syncfusion.com/demos/treeview/default-functionalities?theme=bootstrap5) that shows you how to render the TreeView component in Blazor. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/htVpZrNszKaJVgHS) - razor ## Blazor TreeView virtualization The Blazor TreeView supports UI virtualization to optimize the performance when dealing with large data sets. This will render only nodes based on the TreeView height and swap the nodes when users scroll avoiding rendering of off-screen items. - [Example of TreeView Virtualization](https://blazor.syncfusion.com/demos/treeview/ui-virtualization?theme=bootstrap5) ## Tree node with icons and images Display nodes with labels and icons or images to present content in a more readable format. This is helpful in making a typical directory tree and file system. - [Example of Icons and Images](https://blazor.syncfusion.com/demos/treeview/icons-and-images) ## Check box support Built-in support for check boxes allows users to select more than one item. The Blazor TreeView check boxes also have a tri-state mode that is applicable only for parent nodes. In this mode, the parent node will go into an indeterminate state when the child nodes are partially checked. - [Check box example](https://blazor.syncfusion.com/demos/treeview/checkbox?theme=bootstrap5) - [Check box documentation](https://blazor.syncfusion.com/documentation/treeview/check-box) ## Drag and drop In Blazor TreeView, Nodes can be dragged and dropped at all levels of the same TreeView. - [Drag and drop example](https://blazor.syncfusion.com/demos/treeview/drag-and-drop?theme=bootstrap5) - [Drag and drop documentation](https://blazor.syncfusion.com/documentation/treeview/drag-and-drop) ### Inside the tree Tree nodes can be dragged and dropped from one parent node to another within the same level or different levels. ### Outside the tree Extending the drop behavior allows users to drop tree nodes from one TreeView to another TreeView. ### To an external container Drop tree nodes to any external container or component by extending the TreeView node drop action. ## Multiple node selection Blazor TreeView allows users to select multiple nodes. When the drag-and-drop feature is enabled, all the selected nodes can be dragged at the same time. - [Multiple node selection example](https://blazor.syncfusion.com/demos/treeview/multiple-selection) ## Editable nodes Edit the tree nodes’ label text on the client side by double-clicking it. While editing TreeView nodes, the TreeView data source will also be updated by the modified data. - [Node editing documentation](https://blazor.syncfusion.com/documentation/treeview/node-editing) - [Node editing example](https://blazor.syncfusion.com/demos/treeview/node-editing) ## Sorting tree nodes Render the tree view nodes in ascending or descending order based on the label text to provide users improved readability. - [Sorting documentation](https://blazor.syncfusion.com/documentation/treeview/sorting) ## Node template Customize the TreeView using the node template support to define a custom structure for tree nodes. You can use node templates for parent nodes, child nodes, or both, and include images and custom elements. - [Template example](https://blazor.syncfusion.com/demos/treeview/template) - [Template documentation](https://blazor.syncfusion.com/documentation/treeview/template) ## Expand collapse icons Easily customize the TreeView expand and collapse icons based on your application requirements. - [Expand collapse icons documentation](https://blazor.syncfusion.com/documentation/treeview/how-to/customize-the-expand-and-collapse-icons) ## Tooltips for tree nodes It supports tooltips for tree nodes that display information about the nodes while hovering over them. You can bind a tooltip from a data source along with node fields. - [Tooltip documentation](https://blazor.syncfusion.com/documentation/treeview/how-to/set-tool-tip-for-tree-nodes) ## Context menu A context menu can be integrated with the Blazor TreeView component to open when a node is right-clicked. The menu helps users perform node manipulations such as adding, removing, and renaming nodes. - [Context menu documentation](https://blazor.syncfusion.com/documentation/treeview/how-to/process-the-tree-node-operations-using-context-menu) ## Text wrap A node’s text wraps when it reaches edge of the TreeView. The node’s height will be adjusted automatically based on the content. - [Text wrap documentation](https://blazor.syncfusion.com/documentation/treeview/node-customization#wrapping-text-in-blazor-treeview-component) ## Tree Node Customization It allows you to customize the tree nodes by level. For example, apply specific styles to leaf nodes, first child nodes, and second level nodes, etc. - [Tree Node customization documentation](https://blazor.syncfusion.com/documentation/treeview/how-to/customize-the-tree-nodes-based-on-levels) ## Tree Node Validation You can add validation to the tree node’s text on editing like required, a minimum or maximum length, etc. - [Tree Node validation documentation](https://blazor.syncfusion.com/documentation/treeview/how-to/validate-the-text-when-renaming-the-tree-node) ### Keyboard navigation The Blazor TreeView component ensures that every cell is [accessible using the keyboard](https://blazor.syncfusion.com/documentation/treeview/accessibility#keyboard-navigation). Major features like sort, select, and edit can be performed using keyboard commands alone; no mouse interaction is required. This helps in creating highly accessible applications using this component. ### Screen reader The Blazor TreeView has complete WAI-ARIA accessibility support. The Data Grid UI includes high-contrast visual elements that help visually impaired people to have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers. ### Right to left (RTL) [Right-to-left rendering](https://ej2.syncfusion.com/vue/documentation/api/treeview/#enablertl) allows displaying the text and layout of the TreeView from right to left. This improves the user experience and accessibility for RTL languages. Hierarchical data binding Efficiently load many nodes Robust feature set ## Other supported frameworks The TreeView is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React TreeView](https://www.syncfusion.com/react-components/react-treeview) - [Angular TreeView](https://www.syncfusion.com/angular-components/angular-treeview) - [JavaScript TreeView](https://www.syncfusion.com/javascript-ui-controls/js-treeview) - [Vue TreeView](https://www.syncfusion.com/vue-components/vue-treeview) ## Supported browsers The Blazor TreeView works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [Documentation](https://blazor.syncfusion.com/documentation/treeview/getting-started) [Syncfusion Essential Studio® 2024 Volume 1 Is Here!](https://www.syncfusion.comhhttps://www.syncfusion.com/blogs/post/essential-studio-2024-vol-1) [Syncfusion Essential Studio® 2023 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2023-volume-3) ##### Blazor Chips - Customizable Chips Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-chips # Blazor Chips - A Custom, Flexible Chips Component - Chips are small blocks of information. They are used to represent text, actions, choices, and contact tags in phone and email inbox. - Chips are compact elements that represent simple content. - Chip types include action, choice, filter, and input. - Built-in support for customizing chips. ## Overview The Blazor Chips is a feature-rich component that provides small blocks of text information. Blazor Chips can also contain avatars, images, letters, and close icons. They can be used as tags when filtering contacts and mail inbox, selecting single or multiple choices from available options, and providing input to an application. ## Action Chips Blazor Chips are compact elements for representing simple content and can also trigger actions when selected. ## Choice Chips Blazor Chips can be grouped together as a collection of choices. Choice chips allow users to select from available options. ## Filter Chips Filter chips are a collection of Blazor chips that allow users to filter the view items based on a specified parameter. ## Input Chips Input chips allow Blazor chips to be added or removed. A chips can be created from text provided by the user in an input box or deleted as needed. ## UI Customization You can customize the Blazor chips appearance with avatars, close icons, and more using the built-in options. - [Blazor Chips Customization documentation](https://blazor.syncfusion.com/documentation/chip/customization) ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#Listbox) accessibility practices to work with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#Listbox) best practices for implementing keyboard interaction. - Follows [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards in the design of UI element visuals such as foreground color, background color, line spacing, text, and images. ## Blazor Chips Code Example Easily get started with the Blazor Chips using a few simple lines of C# code as demonstrated below. Also explore our [Blazor Chips Example](https://blazor.syncfusion.com/demos/chips/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Chips in Blazor. - razor ## Other supported frameworks Chips is also available in Angular, React, Vue and JavaScript frameworks that are built from their own TypeScript libraries. Check out the different Chips platforms from the links below, - [JavaScript Chips](https://www.syncfusion.com/javascript-ui-controls/js-chips) - [Angular Chips](https://www.syncfusion.com/angular-components/angular-chips) - [React Chips](https://www.syncfusion.com/react-components/react-chips) - [Vue Chips](https://www.syncfusion.com/vue-components/vue-chips) [Documentation](https://blazor.syncfusion.com/documentation) --- title: Blazor Charts | Modern Live Graphs for Data Visualization | Syncfusion description: The Blazor Charts (Blazor Graphs) library has support for 55+ market-standard chart types such as line, bar, pie, area, and stock Charts. image: "https://ft.syncfusion.com/featuretour/ft-og-images/blazor/blazor-charts.webp" url: "https://www.syncfusion.com/blazor-components/blazor-charts" --- # Blazor Charts - Beautiful & Interactive Charts - 55+ chart types - Lightning-fast performance - Elegant animation - Simple configuration and API - Support for all modern browsers - Mobile-friendly and responsive - Detailed documentation ### 55+ Chart types Ranging from simple day-to-day Charts like line charts, bar charts, area charts to complex financial charts that are highly customizable. ### Chart animation Fluid animation to represent the data with smooth transitions. ### Performance Thoroughly designed to deliver fast-paced performance, capable of rendering 100k data points in less than a second. ### SVG rendering Vector based clean and crisp rendering for all your responsive and scaling needs. ### Data Editing Provides drag and drop support to the rendered points. Data editing allows you to manipulate the data on a chart. ### Trendlines Shows the price direction and movement speed. Trendlines can be generated for Cartesian type series (Line, Column, Scatter, Area, Candle, HiLo, etc.) except bar. ### Globalization and localization Enables users from different locales to use them by formatting dates, currency, and numbering to suit preferences. ### Exporting Export charts to PDF documents or to image formats such as SVG, PNG, and JPEG. Export chart data to XLSX and CSV formats. ## Blazor Charts Code Example Easily get started with the Blazor Charts using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor Charts Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) that shows you how to render and configure the Charts. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/hjrptBXCqJrMuiYZ) - razor ## Mobile-first approach Develop Blazor Charts with single code base, and well-thought-out mobile adaptive architecture that adapts to any web, mobile, or tablet environment. Render beautiful, responsive, interactive, and animated Charts within mobile devices. - [More details on interactive Charts](https://www.syncfusion.com/blazor-components/blazor-charts/interactive-chart) ### Keyboard navigation Blazor Charts ensures that every element is keyboard accessible. Major features like selection, highlight, tooltip, legend collapse and zooming and panning can be performed using keyboard commands alone; no mouse interaction is required. This helps in creating highly accessible applications using this component. ### Screen reader Blazor Charts views have complete WAI-ARIA accessibility support. This UI includes high-contrast visual elements, helping people with visual impairments have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers. ### Right to left (RTL) Right-to-left rendering allows displaying the text and layout of the Blazor Charts from right to left. This improves the user experience and accessibility for RTL languages. ## Other supported frameworks The Charts is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React Charts](https://www.syncfusion.com/react-components/react-charts) - [Angular Charts](https://www.syncfusion.com/angular-components/angular-charts) - [JavaScript Charts](https://www.syncfusion.com/javascript-ui-controls/js-charts) - [Vue Charts](https://www.syncfusion.com/vue-components/vue-charts) ## Supported browsers The Blazor Charts works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [Start with Blazor Server-side Chart](https://blazor.syncfusion.com/documentation/chart/getting-started) [Start with Blazor WebAssembly Chart](https://blazor.syncfusion.com/documentation/chart/getting-started-wasm) ## Other data visualization components that may help your business. [Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) [Circular Gauge](https://www.syncfusion.com/blazor-components/blazor-circular-gauge) [Linear Gauge](https://www.syncfusion.com/blazor-components/blazor-linear-gauge) [Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) [HeatMap Chart](https://www.syncfusion.com/blazor-components/blazor-heatmap-chart) [Map](https://www.syncfusion.com/blazor-components/blazor-map) [Range Selector](https://www.syncfusion.com/blazor-components/blazor-range-selector) [Smith Chart](https://www.syncfusion.com/blazor-components/blazor-smith-chart) [Sparkline Charts](https://www.syncfusion.com/blazor-components/blazor-sparkline) [TreeMap](https://www.syncfusion.com/blazor-components/blazor-treemap) [Explore all our controls](https://www.syncfusion.com/blazor-components#controls-heading) [Documentation](https://blazor.syncfusion.com/documentation/chart/getting-started) [Seamlessly Load Data from Different Data Sources into Blazor Charts](https://www.syncfusion.com/blogs/post/load-data-sources-in-blazor-charts) [How to Create and Customize the Column Chart in Blazor Charts Component](https://www.syncfusion.com/tutorial-videos/blazor/charts?title=how-to-create-and-customize-the-column-chart-in-blazor) [Blazor Synchronized Charts: The Perfect Tool for Trade Analysis](https://www.syncfusion.com/blogs/post/blazor-synchronized-charts) [How to Create and Customize the Line Chart in Blazor Charts Component](https://www.syncfusion.com/tutorial-videos/blazor/charts?title=how-to-create-and-customize-the-line-chart-in-blazor-charts) ##### Blazor Interactive Chart - A Feature-Rich Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/interactive-chart ## Overview The end-user experience is greatly enhanced by including a set of user interaction features such as zooming and panning, crosshair, trackball, drill-down, events, and tooltip. You can configure these interactive chart features using the built-in APIs. ## Zooming Visualize data points in any region of the chart by zooming the region. ### Zooming mode Zoom in and zoom out the chart through mouse wheel scrolling or through pinch gesture in touch enabled device or by using the rubber band selection. ### Zooming direction Zoom the chart along the horizontal axis, vertical axis, or both axes. ### Zoom toolbar Perform zoom in, zoom out, pan, and reset actions quickly using zoom toolbar commands. The toolbar can be displayed initially along with the chart or on demand depending on preferences. ### Scrollbar on zooming Add a scrollbar for the chart to pan or zoom the chart further. ## Crosshair Inspect or target any data point on mouse moves with the help of a crosshair. A thin horizontal line and a vertical line indicate the data point with the information displayed in an interactive tooltip. ## Trackball Track data points that are close to the mouse position or touch contact. Trackballs display information about pop-up data with more customizable options. ## Tooltip Use the Blazor interactive chart tooltips to show information about the data points on mouse hover. ## Synchronization Users can synchronize tooltip, zooming and panning, crosshair, and selection features across multiple charts. ## Selection Select data points in a series for easy understanding of the selected data. Adding pattern and color to the selected data makes charts more interactive. ### Point selection Select a point in a series. Adding pattern and color to the selected data makes charts more interactive. ### Series selection Select a series from the chart series collection. Adding pattern and color to the selected series makes charts more interactive. ### Cluster selection Select a cluster of points from the series with a mouse click. ### Multiple selection Users can select multiple points and series in a chart. Adding patterns and colors to the selected data makes the charts more interactive. ### Range selection Users can select a region with respect to both horizontal and vertical axes. ### Lasso selection Users can select a region by drawing freehand shapes. ##### Blazor Chart Axes - Graph axis customization | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-axis ## Overview Blazor chart plot any type of data in a graph with the help of different chart axes types: numeric, category, date-time, date-time category, and logarithmic axis. And this chart axis elements can be customized further to make an axis more readable. ### Numeric axis A numeric axis is used to represent numeric data in charts. ### Date-time axis A date-time axis is used to represent dates in charts and displays dates as axis labels with different formats. ### Category axis A category axis is used to represent non-numerical data in charts and displays text labels instead of numbers. ### Date-time category axis A date-time category axis is used to display date values with nonlinear intervals to display business days by skipping holidays. ### Logarithmic axis A logarithmic scale is used to visualize data with both lower orders of magnitude (e.g., 10-6) and higher orders of magnitude (e.g., 106) in graphs. ## Multiple Axis Plot different types of data against different axes in the same graph with the help of the multiple axes feature. ## Chart Axis Crossing Use axis crossing for any axis to cross with an associate axis for better visualization of data. ## Inversed Chart Axis Reverse the axis labels and ticks. This swaps the higher and lower ranges of a chart axis. ## Opposed Axis When the chart has multiple axes, this feature arranges the axes smartly by moving them to the opposite position from their default positions. ## Synchronized Chart Use multiple panes to show different types of data with multiple chart types and axis, for clear visualization. ## Smart Chart Axis Label Avoids overlapping of chart axis labels by trimming, wrapping, rotating, hiding, or placing them on multiple rows. ## Multilevel Axis Labels Organizes or groups data points in charts based on different categories. ## Axis Label Rotation Uses rotation to prevent chart axis labels from overlapping when the space for an axis is small. ## Axis Label Position Increase the space for rendering data points by moving the chart axis labels inside the plot area. ## Smart Axis Range Adds padding to the start and end ranges of a chart axis to avoid data cropping at the edges. ## Chart Range Band Draw special attention to any region of the chart or graph with the help of strip lines. ### Horizontal Range Band Allows to shadow different ranges in vertical axis with different colors to improve the readability of chart. ### Vertical Range Band Allows to shadow different ranges in for Horizontal axis with different colors to improve the readability of chart. ### Recurrence Range Band Allows to shade the range repeatedly in an equal and regular interval. ### Segment Range Band Allows to shade a region of the chart with respect to segment. ##### Blazor Chart & Graph | Different types of Graphs | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types # Blazor Chart Different Chart/Graph Types - [Basic Charts](https://www.syncfusion.com#basic-charts) - [Spline charts](https://www.syncfusion.com#spline-charts) - [Step charts](https://www.syncfusion.com#step-charts) - [Stacked charts](https://www.syncfusion.com#stacked-charts) - [Range charts](https://www.syncfusion.com#range-charts) - [Correlation charts](https://www.syncfusion.com#correlation-charts) - [Circular charts](https://www.syncfusion.com#circular-charts) - [Triangular charts](https://www.syncfusion.com#triangular-charts) - [Polar & Radar Charts](https://www.syncfusion.com#polar-&-radar-charts) - [Financial Charts](https://www.syncfusion.com#financial-charts) - [Other Charts](https://www.syncfusion.com#other-charts) ### Line Chart Visualize time-dependent data to show trends at equal intervals. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) ### Column Chart Compare values across categories by using vertical bars. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) ### Area Chart Like line charts, but the area below the line is filled. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) ### Bar Chart Compare values across categories by using horizontal bars. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) ### Spline Chart Connects the data points with a smooth line. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) ### Spline Area Chart Like the area chart, but with the data points connected with a smooth line. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-area-chart) ### Step line Chart Data points are connected through vertical and horizontal lines to show step-like progress. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) ### Step area Chart Like the step line chart, but with the areas connected with lines shaded. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/step-area-chart) ### Stacked line Like the line chart, but with the data points stacked on top of each other. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-line-chart) ### Stacked Bar Plots data points on top of each other using horizontal bars. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-bar-chart) ### Stacked Column Plots data points on top of each other using vertical bars. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-column-chart) ### Stacked Area Like the area chart, but with the data points stacked on top of each other. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-area-chart) ### 100% Stacked line Shows the relative percentage of multiple data series in stacked lines. The cumulative proportion of each stacked line always totals 100%. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-line-chart) ### 100% Stacked Area Shows the relative percentage of multiple data series in stacked columns. The cumulative proportion of each stacked column always totals 100%. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-area-chart) ### 100% Stacked Bar Shows the relative percentage of multiple data series in stacked bars. The cumulative proportion of each stacked bar always totals 100%. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-bar-chart) ### 100% Stacked Column Shows the relative percentage of multiple data series in stacked columns. The cumulative proportion of each stacked column always totals 100%. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-column-chart) ### Range area Chart Shows variations in the data values for a given time. The area between the high and low range is filled. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) ### Spline range area chart Similar to the range area chart, expect that the data points are connected by a smooth line. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-range-area-chart) ### Range column Chart Like the column chart, but shows the variations in the data values for a given time using vertical bars. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-column-chart) ### Range step area Chart Similar to the range area chart, except that the data points are connected by a step line. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-step-area-chart) ### Scatter Scatter plot or scatter chart plots data with two numeric parameters. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) ### Bubble Visualize data with three numeric parameters. The bubble size depends on third parameter. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bubble-chart) ### Combination Chart / Mixed chart Combines two or more chart types in a single chart. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/combination-chart) ### Pie Chart Displays proportions and percentages between different categories. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) ### Donut Chart Similar to pie chart for data analysis, but with an open space at the center. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) ### Pyramid Chart Represent hierarchies visually in a pyramid-like structure that shows proportions of the total. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pyramid-chart) ### Funnel Chart Plots streamlined data to show various stages in a process. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/funnel-chart) ### Polar Chart Visually compare several quantitative or qualitative aspects of a situation. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/polar-chart) ### Radar Chart Visually compare several quantitative or qualitative aspects of a situation. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/radar-chart) ### Candle Chart Used in the stock market to represent the high, low, open, close values of a stock. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ### OHLC Chart Used in the stock market to represent the high, low, open, close values of a stock. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/ohlc-chart) ### HighLow Chart Shows the high and low values of the stock over the given period of time. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/hilo-chart) ### Box and Whisker Chart Visualize a group of numerical data through its quartiles. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/box-and-whisker-chart) ### Histogram Chart Plot the frequency of occurrences in a continuous data set. - [Learn more](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/histogram-chart) ##### Blazor Line Chart | Visualize Trends with Live Data | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor Line Chart represents and visualizes the time-dependent data to show the trends at equal intervals. Works well with large amount of data with smooth animation, zooming, and panning support. ## Line Chart Data Binding Bind data seamlessly with various local and remote data sources such as JSON, RESTful services, OData services, and WCF services. The Blazor Line Chart uses the data manager for binding the data source. - [Blazor Line Chart data binding documentation](https://blazor.syncfusion.com/documentation/chart/working-with-data) ## Multi series Blazor Line Chart allows you to plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pluses, crosses, and pentagons. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle in blazor line chart. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Zoom and pan Enable zooming and panning support in Blazor Line Chart when dealing with large amount of data to visualize the data point in any region. ## Dynamic line chart Create and update the Blazor Line Chart with live data that changes over seconds or minutes. ## Empty/null data point Handle the missed data elegantly with empty points support. ## Vertical chart The Blazor Line Chart can be transposed vertically to view the data in a different perspective. ## Combining Line Chart with Other Charts You can combine Blazor Line Chart and other different types of chart series. Legend and tooltip for the series make it more readable. - [Combination documentation](https://blazor.syncfusion.com/documentation/chart/chart-series#combination-series) ## Customization Customize the color, thickness, and dash array of the Blazor Line Chart using built-in APIs. [Customization documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/line#customization) ### Multi-color line Blazor line chart is used to represent time-dependent data to show the trends at equal intervals with their individual colors by using PointColorMapping. ### Dashed line Use DashArray, Width, Fill properties to customize the line as dashed line. ## Blazor Line Chart Code Example Easily get started with Blazor Line Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor Line Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap4) that shows you how to render and configure the Line Chart in Blazor. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-types/line) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Column Chart - Analyze and Compare Data Easy | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview The Blazor column chart is the most common chart type used to compare frequency, count, total, or average of data in different categories. It is ideal for showing variations in the value of an item over time. ## Multiple series Allows you to plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Markers Mark data points with built-in shapes: circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pluses, crosses, and pentagons. In addition to these shapes, use images to make the points more attractive. ## Data labels Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Back-to-back column chart Plot data bi-directionally to compare and analyze the values clearly. ## Spacing and width Customize the spacing between two bars and the width of the bars. [Column space and width documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/column#column-space-and-width) ## Rounded corners Modernize the UI by applying rounded corners to the Blazor column chart. ## Grouped column Group a series with another series by giving the group a different name. ## Customization Customize the look and feel of the Blazor column chart using built-in APIs. [Customization documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/column#customization) ## Blazor column chart code example Easily get started with the Blazor column chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor column chart example](https://blazor.syncfusion.com/demos/chart/column?theme=bootstrap4) that shows you how to render and configure the charts. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-types/column) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Area Chart - Create Customizable Area Charts | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor Area Chart is like line chart to represent time-dependent data and to show the trends at equal intervals, but it fills the area below the line. Uses numeric, category, datetime, or logarithmic axis to plot data. ## Multi series Allows you to plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pluses, crosses, and pentagons. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Zoom and pan Enable zooming and panning support when dealing with large amount of data to visualize the data point in any region. ## Empty/null data point Handle the missed data elegantly with empty points support. ## Vertical chart The Blazor Area Chart can be transposed vertically to view the data in a different perspective. ## Customization Customize the color and border of the Blazor Area Chart using built-in APIs. [Customization documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/area#customization) ## Blazor Area Chart Code Example Easily get started with Blazor Area Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor Area Chart Example](https://blazor.syncfusion.com/demos/chart/area?theme=bootstrap4) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-types/area) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Bar Chart - Richly Animated Bar Chart | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview The Blazor bar chart is the most common chart type used to compare different categories of data like frequency, count, total, or average displayed in horizontal bars. It is ideal for showing variations in the value of an item over time. ## Multiple series Plot multiple series in a single chart to compare different data sets. Enabling the legend and tooltip gives more information about the individual series. ## Markers Mark data points with built-in shapes: circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pluses, crosses, and pentagons. In addition to these shapes, use images to make the points more attractive. ## Data labels Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Back-to-back bar chart Plot data bi-directionally to compare and analyze the values clearly. ## Spacing and width Customize the spacing between two bars and the width of the bars. [Bar space and width documentation.](https://blazor.syncfusion.com/documentation/chart/chart-types/bar#bar-space-and-width) ## Rounded corners Modernize the UI by applying rounded corners to the Blazor bar chart. ## Grouped bar Group a series with another series by giving the group a different name. ## Customization Customize the look and feel of the Blazor Bar Chart using built-in APIs. [Customization documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/bar#customization) ## Blazor bar chart code example Easily get started with the Blazor bar chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor bar chart example](https://blazor.syncfusion.com/demos/chart/bar?theme=bootstrap4) that shows you how to render and configure the charts. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-types/bar) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Spline Chart - A Feature-Rich Chart Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor Spline Chart connects the data points through smooth lines. Uses numeric, category, datetime, or logarithmic axis to plot data. ## Multi series Allows you to plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pluses, crosses, and pentagons. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Zoom and pan Enable zooming and panning support when dealing with large amount of data to visualize the data point in any region. ## Dynamic spline chart Create and update the Blazor Spline Chart with live data that changes over seconds or minutes. ## Empty/null data point Handle the missed data elegantly with empty points support. ## Vertical chart The Blazor Spline Chart can be transposed vertically to view the data in a different perspective. ## Customization Customize the color, thickness, and dash array of the Blazor Spline Chart using built-in APIs. - [Customization documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/spline/#customization) ## Blazor Spline Chart Code Example Easily get started with Blazor Spline Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor Spline Chart Example](https://blazor.syncfusion.com/demos/chart/spline?theme=bootstrap4) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-types/spline/) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Spline Area Chart - Visualize Data Easily | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-area-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor Spline Area Chart is like a area chart except that the data points are connected through a smooth line. Supports feature like zooming, panning, animation, and dynamic updates. ## Multi series Multi area series are useful to compare two or more cumulative values over a period. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pluses, crosses, and pentagons. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Zoom and pan Enable zooming and panning support when dealing with large amount of data to visualize the data point in any region. ## Empty/null data point Handle the missed data elegantly with empty points support. ## Vertical chart The Blazor Spline Area Chart can be transposed vertically to view the data in a different perspective. ## Customization Customize the color and border of the Blazor Spline Area Chart using built-in APIs. - [Customization documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/spline-area/#customization) ## Blazor Spline Area Chart Code Example Easily get started with Blazor Spline Area Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor Spline Area Chart Example](https://blazor.syncfusion.com/demos/chart/spline-area?theme=bootstrap4) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-types/spline-area/) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Step Line Chart - Show the Trend for Segments | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview The Blazor Step Line Chart (a.k.a Blazor Stepped Chart or Blazor Stepped Line Chart) is like a line chart except that the data points are connected using vertical and horizontal lines, showing a step-like progress. Supports features like zooming, panning, animation, and dynamic updates. ## Multi series Allows you to plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pluses, crosses, and pentagons. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Zoom and pan Enable zooming and panning support when dealing with large amount of data to visualize the data point in any region. ## Dynamic stepline chart Create and update the Blazor Stepline Chart with live data that changes over seconds or minutes. ## Empty/null data point Handle the missed data elegantly with empty points support. ## Vertical chart The Blazor Stepline Chart can be transposed vertically to view the data in a different perspective. ## Customization Customize the color, thickness, and dash array of the Blazor Stepline Chart using built-in APIs. - [Customization documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/step-line/#customization) ## Blazor Step Line Chart Code Example Easily get started with Blazor Step Line Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor Step Line Chart Example](https://blazor.syncfusion.com/demos/chart/step-line?theme=bootstrap4) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-types/step-line/) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Step Area Chart - Interactive Chart Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/step-area-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview The Blazor Step Area chart is like a step line chart except that the area connected through vertical and horizontal lines are shaded with color. Supports features like zooming, panning, animation, and dynamic updates. ## Multi series Allows you to plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pluses, crosses, and pentagons. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Zoom and pan Enable zooming and panning support when dealing with large amount of data to visualize the data point in any region. ## Empty / Null Data Point Handle the missed data elegantly with empty points support. ## Vertical Chart The Blazor Step Area Chart can be transposed vertically to view the data in different perspective. ## Customization Customize the color and border of the Blazor Step Area Chart using built-in APIs. - [Customization documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/step-area/#customization) ## Blazor Step Area Chart Code Example Easily get started with Blazor Step Area Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor Step Area Chart Example](https://blazor.syncfusion.com/demos/chart/step-area?theme=bootstrap4) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-types/step-area/) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Stacked Line Chart - Rich Animated Chart | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-line-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor Stacked line chart is a chart with Y values stacked over one another in the series order. Shows the relation between individual values to the total sum of the points. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pluses, crosses, and pentagons. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Customization Customize the look and feel of the Blazor Stacked Line Chart using built-in APIs. [Customization documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/stacked-line/#customization) ## Blazor Stacked Line Chart Code Example Easily get started with Blazor Stacked Line Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor Stacked Line Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-line?theme=bootstrap4) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-types/stacked-line/) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Stacked Bar Chart - Create Interactive Chart | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-bar-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor Stacked Bar Chart is a chart with Y values stacked over one another in the series order. Shows the relation between individual values to total sum of the points. ## Multi series Allows you to plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pluses, crosses, and pentagons. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Stacking group Allows grouping a series with another series separately using a different group name. ## Spacing and width The Blazor Stacked Bar Chart provides an option to customize spacing between two bars and the width of the bar. ## Rounded corners Modernize the UI by applying rounded corners to the stacked bar ## Customization Customize the look and feel of the Blazor Stacked Bar Chart using built-in APIs. [Customization documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/stacked-bar#customization) ## Blazor Stacked Bar Chart Code Example Easily get started with Blazor Stacked Bar Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor Stacked Bar Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-bar?theme=bootstrap4) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-types/stacked-bar) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Stacked Area Chart - Rich Animated Chart | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-area-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor Stacked Area Chart is a chart with Y values stacked over one another in the series order. Shows the relation between individual values to the total sum of the points. ## Multi series Allows you to plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pluses, crosses, and pentagons. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that are widely varies from each other. ## Zoom and pan Enable zooming and panning support when dealing with large amount of data to visualize the data point in any region. ## Empty/null data point Handle the missed data elegantly with empty points support. ## Vertical chart The Blazor Stacked Area Chart can be transposed vertically to view the data in different perspective. ## Customization Customize the color and border of the Blazor Stacked Area Chart using built-in APIs. [Customization documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/stacked-area/) ## Blazor Stacked Area Chart Code Example Easily get started with Blazor Stacked Area Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor Stacked Area Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-area?theme=bootstrap4) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-types/stacked-area/) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Stacked Column Chart - Compare Data Easily | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-column-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor Stacked column chart is a chart with X values stacked over one another in the series order. Shows the relation between individual values to the total sum of the points. ## Multi series Allows you to plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pluses, crosses, and pentagons. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Stacking group Allows grouping a series with another series separately using a different group name. ## Spacing and width The Blazor Stacked Column Chart provides an option to customize spacing between two columns and the width of the column. ## Rounded corners Modernize the UI by applying rounded corners to the stacked column ## Customization Customize the look and feel of the Blazor Stacked Column Chart using built-in APIs. [Customization documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/stacked-column/#customization) ## Blazor Stacked Column Chart Code Example Easily get started with Blazor Stacked Column Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor Stacked Column Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-column?theme=bootstrap4) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-types/stacked-column/) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor 100% Stacked Line Chart | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-line-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor 100% Stacked Line Chart displays multiple series of data, ensuring that the cumulative proportion of each stacked element always totals 100%. Hence, the y-axis will always be rendered with the range 0–100. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pluses, crosses, and pentagons. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Customization Customize the look and feel of the Blazor 100% Stacked Line Chart using built-in APIs. [Customization documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/stack-line#customization) ## Blazor 100% Stacked Line Chart Code Example Easily get started with Blazor 100% Stacked Line Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor 100% Stacked Line Chart Example](https://blazor.syncfusion.com/demos/chart/percent-stacked-line?theme=bootstrap4) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-types/stack-line) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor 100% Stacked Area Chart - Visualize Data Easily | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-area-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor 100% Stacked Area Chart displays multiple series of data as stacked areas, ensuring that the cumulative proportion of each stacked element always totals 100%. The y-axis will hence always be rendered with the range 0–100. ## Multi series Allows you to plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pluses, crosses, and pentagons. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Zoom and pan Enable zooming and panning support when dealing with large amount of data to visualize the data point in any region. ## Empty/null data point Handle the missed data elegantly with empty points support. ## Vertical chart The Blazor 100% Stacked Area Chart can be transposed vertically to view the data in different perspective. ## Customization Customize the color and border of the Blazor 100% Stacked Area Chart using built-in APIs. [Customization documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/stack-area#customization) ## Blazor 100% Stacked Area Chart Code Example Easily get started with Blazor 100% Stacked Area Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor 100% Stacked Area Chart Example](https://blazor.syncfusion.com/demos/chart/percent-stacked-area?theme=bootstrap4) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-types/stack-area) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor 100% Stacked Bar Chart - Visualize & Compare | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-bar-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor 100% Stacked Bar Chart displays multiple series of data as stacked bars, ensuring that the cumulative proportion of each stacked element always totals 100%. Hence, the y-axis will always be rendered with the range 0–100. ## Multi series Allows you to plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pluses, crosses, and pentagons. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Stacking group Allows grouping a series with another series separately using a different group name. [Stacking group documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/stack-bar#stacking-group) ## Spacing and width The Blazor 100% Stacked Bar Chart provides an option to customize the spacing between two bars and width of the bar. ## Rounded corners Modernize the UI by applying rounded corners to the 100% stacked bar ## Customization Customize the look and feel of the Blazor 100% Stacked Bar Chart using built-in APIs. [Customization documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/stack-bar#customization) ## Blazor 100% Stacked Bar Chart Code Example Easily get started with Blazor 100% Stacked Bar Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor 100% Stacked Bar Chart Example](https://blazor.syncfusion.com/demos/chart/percent-stacked-bar?theme=bootstrap4) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-types/stack-bar#100-stacked-bar) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor 100% Stacked Column Chart - Easy-to-Use Chart | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-column-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor 100% stacked column chart displays multiple series of data as stacked bars, ensuring that the cumulative proportion of each stacked element always totals 100%. Hence, the x-axis will always be rendered with the range 0–100. ## Multi series Allows you to plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pluses, crosses, and pentagons. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Stacking group Allows you to group a series with another series separately using a different group name. [Stacking group documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/stack-column#stacking-group) ## Spacing and width The Blazor 100% Stacked Column Chart provides an option to customize the spacing between two column and width of the column. ## Rounded corners Modernize the UI by applying rounded corners to the 100% stacked column ## Customization Customize the look and feel of the Blazor 100% Stacked Column Chart using built-in APIs. [Customization documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/stack-column#customization) ## Blazor 100% Stacked Column Chart Code Example Easily get started with Blazor 100% Stacked Column Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor 100% Stacked Column Chart Example](https://blazor.syncfusion.com/demos/chart/percent-stacked-column?theme=bootstrap4) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-types/stack-column) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Range Area Chart - Create Customizable Chart | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor Range Area Chart is generally used to show the variation in the data value for a given time. Like area series, except that the area between the high and low ranges is filled. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pluses, crosses, and pentagons. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Empty/null data point Handle the missed data elegantly with empty points support. ## Vertical chart The Blazor Range Area Chart can be transposed vertically to view the data in a different perspective. ## Customization Customize the color and border of the Blazor Range Area Chart using built-in APIs. - [Customization documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/range-area/#customization) ## Zoom and pan Enable zooming and panning support when dealing with large amount of data to visualize the data point in any region. ## Blazor Range Area Chart Code Example Easily get started with Blazor Range Area Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor Range Area Chart Example](https://blazor.syncfusion.com/demos/chart/range-area?theme=bootstrap4) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-types/range-area/) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Range Column Chart - Richly Animated Chart | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-column-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor Range Column Chart is generally used to show the variation in the data value for a given time. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pluses, crosses, and pentagons. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Spacing and width The Blazor Range Column Chart provides an option to customize the spacing between two columns and the width of the column. ## Empty/null data point Handle the missed data elegantly with empty points support. ## Vertical chart The Blazor Range Column Chart can be transposed vertically to view the data in a different perspective. ## Customization Customize the color and border of the Blazor Range Column Chart using built-in APIs. ## Blazor Range Column Chart Code Example Easily get started with Blazor Range Column Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor Range Column Chart Example](https://blazor.syncfusion.com/demos/chart/range-column?theme=bootstrap) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-types/range-column/) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Range Step Area Chart | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-step-area-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor Range Step Area Chart is used to display continuous data points as a set of steps that vary between high and low values over intervals of time and across different categories. ## Marker Mark data points with built-in shapes: circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pluses, crosses, and pentagons. In addition to these shapes, use images to make the points more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by a given angle. ## Empty/null data point Handle missing data elegantly with empty points support. ## Vertical chart The Blazor Range Step Area Chart can be transposed vertically to view the data from a different perspective. ## Customization Customize the color and border of the Blazor Range Step Area Chart using built-in APIs. ## Zoom and pan Enable zooming and panning support when dealing with large amounts of data to visualize a data point in any region. ## Blazor Range Step Area Chart Code Example Easily get started with Blazor Range Step Area Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor Range Step Area Chart Example](https://blazor.syncfusion.com/demos/chart/range-step-area?theme=bootstrap4) that shows you how to render and configure the range step area chart component. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-types/range-step-area) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Scatter Chart - High Performance Chart | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor Scatter Chart is used to plot data with two numeric parameters. Also referred as scatter plot/point chart, its rich feature sets include tooltip, multiple axis, zooming and panning, etc. ## Multiple series scatter plot Plot multiple scatter series in a single chart to compare different data sets. Legend and tooltip for the series can make it more readable. ## Custom marker Support different types of symbol to display the data points in scatter plot. This will be useful in differentiating the multiple series and points in same chart. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Customization Customize the look and feel of the Blazor Scatter Chart using built-in APIs. ## Blazor Scatter Chart Code Example Easily get started with Blazor Scatter Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor Scatter Chart Example](https://blazor.syncfusion.com/demos/chart/scatter?theme=bootstrap4) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-types/scatter/) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Bubble Chart – Visualize the Relationships | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bubble-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor Bubble chart is like a scatter chart, but allows you to visualize data in 3 dimensions. The size of the bubble is determined based on the third parameter. ## Customizing each point in bubble Appearance of each data point in a Blazor Bubble Chart can be customized using point render event to differentiate each point based on the size. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Blazor Bubble Chart Code Example Easily get started with Blazor Bubble Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor Bubble Chart example](https://blazor.syncfusion.com/demos/chart/bubble?theme=bootstrap5) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-types/bubble) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Combination Chart | Mixed Chart | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/combination-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview The Blazor Combination Chart combines two or more chart types into a single chart to compare different data sets. Supports zooming, panning, tooltip, trackball, and selection. ## Combination of line, area, and column chart Create multiple series of different types in the same chart. Legend and tooltip for the series make it more readable. - [Combination documentation](https://blazor.syncfusion.com/documentation/chart/chart-series#combination-series) ## Pareto chart Blazor Pareto Chart is a combination of line and column charts. The column represents data in the descending order, whereas the line chart represents the cumulative value of the data. ## Combination of Candle with Column/Line You can combine Candle with line or column chart to show additional parameters in financial analysis. For example, volume of the stock can be viewed with the help of column chart. ## Blazor Combination Chart Code Example Easily get started with Blazor Combination Chart using a few simple lines of C# code, as demonstrated below, - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-series#combination-series) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Pie Chart – Richly Animated Pie Charts | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview The Blazor Pie Chart is a circular graphic, which is ideal for displaying proportional values between different categories. Pie charts support animation and interactive features such as tooltip and selection. - [Blazor Pie Chart documentation](https://blazor.syncfusion.com/documentation/accumulation-chart/chart-types/pie-doughnut#pie-chart) ## Pie legend Legends are used to show information about each point, to know about its contribution towards the total sum. You can collapse the point using legend click. ## Custom radius Customize the radius of the pie to change the look and functionality of the Blazor Chart. - [Pie Chart radius customization documentation](https://blazor.syncfusion.com/documentation/accumulation-chart/chart-types/pie-doughnut#radius-customization) ## Start and end angle Customize the start and end angles of the Chart to achieve the semi-pie. - [Start and end angle documentation](https://blazor.syncfusion.com/documentation/accumulation-chart/chart-types/pie-doughnut#start-and-end-angles) ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Smart labels Arranges data labels smartly to avoid overlapping when the data point values fall in close range. ## Grouped points Group the points in Blazor Pie Chart based on certain conditions. The grouped slices can be split into individual points by clicking the slice. ## Drilldown Operation Focus-in on the data within the data using drilldown operation. ## Different radius Customize the radius of individual slice using built-in APIs. ## Pie Center Move the center of the pie relative to the plot area. - [Pie Center documentation](https://blazor.syncfusion.com/documentation/accumulation-chart/chart-types/pie-doughnut#pie-center) ## Customization Customize the look and feel of the pie using built-in APIs. ## Blazor Pie Chart Code Example Easily get started with Blazor Pie Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor Pie Chart example](https://blazor.syncfusion.com/demos/chart/pie) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/accumulation-chart/chart-types/pie-doughnut#pie-chart) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Donut Chart - Visualize the Proportions Easy | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor Donut Chart (a.k.a Blazor Doughnut Chart) is like a pie chart, except for the space at the center. This chart is useful when you want to compare the contribution of each data with the total. ## Custom inner radius You can customize the inner radius of the chart to make it pleasing. Making inner radius to 0 will change the doughnut to pie chart. You can customize both the radius and inner radius of the doughnut. ## Doughnut Legend Legends are used to show the information about each point to know about its contribution towards the total sum. You can collapse the point using legend click. ## Start and End Angle Customize the start and end angle of the Chart to achieve the semi-pie. ## Data Label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Smart labels Arranges data labels smartly to avoid overlapping when the data point values fall in close range. ## Grouped points Group the points in pie chart based on some condition. The grouped slices can be split into individual points by clicking the slice. ## Drilldown Operation Focus-in on the data within the data using drilldown operation. ## Different radius Customize the radius of individual slice using built-in APIs. ## Donut Center Move the center of the donut relative to the plot area. ## Customization Customize the look and feel of the doughnut using built-in APIs. ## Blazor Donut Chart Code Example Easily get started with Blazor Donut Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor Donut Chart example](https://blazor.syncfusion.com/demos/chart/donut) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/accumulation-chart/chart-types/pie-doughnut#doughnut-chart) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Pyramid Chart - Richly Animated Charts | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pyramid-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor Pyramid Chart has the form of a triangle with lines dividing it into sections, each section with a different width. Depending on the Y coordinate, this width indicates a level of hierarchy among other categories. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Point explode Data points can be exploded on rendering and on mouse click. ## Grouped points Group the points in a Blazor Pyramid Chart based on certain conditions. The grouped slices can be split into individual points by clicking the slice. ## Customization Customize the look and feel of the Blazor Pyramid Chart using built-in APIs. ## Blazor Pyramid Chart Code Example Easily get started with Blazor Pyramid Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor Pyramid Chart Example](https://blazor.syncfusion.com/demos/chart/pyramid?theme=bootstrap4) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/accumulation-chart/chart-types/pyramid/) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Funnel Chart - Visualize Data Easily | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/funnel-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor Funnel chart is like a pyramid, with two parts, the higher part called head and the lower part, neck. Blazor Funnel Chart is often used to represent stages in a sales process and show the amount of potential revenue for each stage. ## Custom neck Customize the height and width of the funnel to change the look and feel. Changing the width and height of the neck to zero makes a funnel chart look like an inverted pyramid. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Point explode Data points can be exploded on rendering and on mouse click. - [Point explode documentation](https://blazor.syncfusion.com/documentation/accumulation-chart/chart-types/funnel#funnel-explode) ## Grouped points Group the points in a Blazor Funnel Chart based on certain conditions. The grouped slices can be split into individual points by clicking the slice. ## Customization Customize the look and feel of the Blazor Funnel Chart using built-in APIs. ## Blazor Funnel Chart Code Example Easily get started with Blazor Funnel Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor Funnel Chart example](https://blazor.syncfusion.com/demos/chart/funnel) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/accumulation-chart/chart-types/funnel/) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Polar Chart - Beautiful and Interactive chart | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/polar-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor Polar Chart visualizes data in terms of values and angles. It provides options for visual comparison between several quantitative or qualitative aspects of a situation. It supports interactive features such as selection and tooltip. ## Inversed axis Reverses the axis labels and ticks. This swaps the higher and lower ranges of an axis. You can rotate the data label by its given angle. ## Start angle Customize the start angle of the chart to rotate it. - [Start angle documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/polar/#start-angle) ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pluses, crosses, and pentagons. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Chart types Supports different types of series like line, column, spline, range area, scatter, and stacked area. ## Wind Rose Chart You can compose the wind rose chart with the help of stacked column series in polar and radar charts. ## Blazor Polar Chart Code Example Easily get started with Blazor Polar Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor Polar Chart example](https://blazor.syncfusion.com/demos/chart/polar-line) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-types/polar/) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Radar Chart - Feature-Rich Interactive Chart | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/radar-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor Radar Chart visualizes data in terms of values and angles. It provides options for visual comparison between several quantitative or qualitative aspects of a situation. It supports interactive features such as selection and tooltip. ## Inversed axis Reverses the axis labels and ticks. This swaps the higher and lower ranges of an axis. ## Start angle Customize the start angle of the chart to rotate it. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pluses, crosses, and pentagons. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Chart types Supports different types of series like line, column, spline, range area, scatter, and stacked area. ## Wind Rose Chart You can compose the wind rose chart with the help of stacked column series in polar and radar charts. ## Blazor Radar Chart Code Example Easily get started with Blazor Radar Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor Radar Chart Example](https://blazor.syncfusion.com/demos/chart/polar-line?theme=bootstrap4) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-types/radar/) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Stock Chart - Financial Chart | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor Stock Chart or Candlestick chart is mostly used in the stock market to represent the high, low, open, and close values of the stock. Supports interactive trackball, crosshair feature to track information on data. ## Hollow and filled Candlestick Chart A filled candlestick is drawn when the stock closes lower than the opening price, representing the open price at the top and close price at the bottom. ## Multi series Use multi-series Candlestick to represent two or more data set, each data set representing high, low, open, and close values. ## Combination for Candlestick with another chart Use line and column charts along with candle chart to show the close and volume of the data. ## Multiple pane Allows you to render the stock price in different panes of the chart. Visualize the candle values in one pane and the volume in a different pane. ## Candle chart with range selector The range selector along with the financial chart can be used filter and navigate through a large number of data points. ## Bull and bear Customizable bull and bear colors. ## Blazor Stock Chart Code Example Easily get started with Blazor Stock Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor Stock Chart Example](https://blazor.syncfusion.com/demos/stock-chart/stock-chart?theme=bootstrap4) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/stock-chart/getting-started/) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor OHLC Chart - Visualize Stock Data Easily | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/ohlc-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor OHLC Chart is like a candle chart. The horizontal lines at the left and right are used to show open and close values of the stock, and the vertical line represents high and low values. They are easily customizable and supports interactive features such as trackball, tooltip, selection, and zooming to track information of the data. ## Multi series Allows you to plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Multiple pane Allows you to render the stock price in different panes of the chart. Visualize the OHLC values in one pane and the volume in a different pane. ## OHLC chart with Range selector You can use the range selector along with financial chart to filter and navigate through a large number of data points. ## Bull and bear Customizable bull and bear colors. ## Zoom and pan Supports zooming and panning when dealing with large amount of data to visualize data point in any region. [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor HiLo Chart - High-Performance Chart | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/hilo-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor HiLo Chart is similar to OHLC, but shows the high and low values of the stock over the given period of time. ## Multi series Allows you to plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Customization Customize the color and thickness of the Blazor HiLo Chart using built-in APIs. - [Customization documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/high-low/#customization) ## Blazor HiLo Chart Code Example Easily get started with Blazor HiLo Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor HiLo Chart example](https://blazor.syncfusion.com/demos/chart/hilo) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-types/high-low/) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Box and Whisker Chart - Feature-Rich Charts | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/box-and-whisker-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor Box and Whisker chart is used to visualize a group of numerical data through their quartiles. It is also referred as box plot. Box plots may also have lines extending vertically from the boxes (whiskers) indicating variability outside the upper and lower quartiles. ## Box plot mode Supports different types of rendering mode such us exclusive, inclusive, and normal. - [Box plot mode documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/box-whisker#box-plot) ## Outlier Represent the values that are lying beyond the minimum and maximum values of the data point with outlier. Usually represented with a circle. ## Show mean Show meanAllows you to enable or disable the average value of box plot. - [Show mean documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/box-whisker#show-mean) ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Multi series Allows you to plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Customization Customize the color, thickness, and border of the box plot with in APIs to make it visually unique. ## Blazor Box and Whisker Chart Code Example Easily get started with Blazor Box and Whisker Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor Box and Whisker Chart example](https://blazor.syncfusion.com/demos/chart/box-and-whisker) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-types/box-whisker) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Histogram Chart - High Performance Chart | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/histogram-chart #### Basic charts - [Line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) #### Financial stock charts - [Candle chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stock-chart) ## Overview Blazor Histogram Chart is a bar (column) chart used for frequency distribution in which the widths of the bars are proportional to classes into which variables have been divided and the heights of the bars are proportional to class frequencies. ## Distribution curve Provides a graphical representation of the normal distribution of data. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pluses, crosses, and pentagons. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Vertical chart The Blazor Histogram Chart can be transposed vertically to view the data in a different perspective. ## Customization Customizes the color and border of the Blazor Histogram Chart using built-in APIs to make it visually unique. - [Customization documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/histogram/#histogram-series) ## Blazor Histogram Chart Code Example Easily get started with Blazor Histogram Chart using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor Histogram Chart example](https://blazor.syncfusion.com/demos/chart/histogram?theme=bootstrap4) that shows you how to render and configure the chart. - razor - [I’d love to read it now](https://blazor.syncfusion.com/documentation/chart/chart-types/histogram/) [Back to Chart Types](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) ##### Blazor Stock Chart | Create Interactive Financial Charts | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-stock-chart # Blazor Stock Chart - A Real-Time Financial Data Visualization - Visualize and analyze stock data with candlestick, OHLC, and HiLo charts. - Interact and explore stock charts with features such as zooming, panning, crosshairs, tooltips, trackballs, period selector, range selector, and more. - Experience seamless interaction and responsiveness with smooth animation. ## Overview Blazor Stock Chart is a well-crafted, easy-to-use financial charting package to track and visualize the stock price of a company over a specific period using charting (Candlestick, OHLC, HiLo, etc.) and range tools. Its rich feature set includes zooming, panning, tooltip, crosshair, trackball, period selection, range selection, and events to make stock charts interactive. ### High performance Several data rendering optimizations have been used to achieve the best possible efficiency when plotting large amounts of data and managing high-frequency, real-time data. ### Elegant animation The Stock Chart for Blazor provides fluid animation to present data with smooth transitions. ### Interactive stock chart The [tooltip](https://blazor.syncfusion.com/documentation/stock-chart/tool-tip) and [crosshair](https://blazor.syncfusion.com/documentation/stock-chart/cross-hair) cursor allow users to interact with the chart and obtain detailed information about data points. ### Stock events [Visualize stock events](https://blazor.syncfusion.com/documentation/stock-chart/stock-events) to display many types of market events on the chart. ### Admirable feature set The Blazor Stock Chart supports zooming and panning, multiple series, [period selector](https://blazor.syncfusion.com/documentation/stock-chart/period-selector), [range selector](https://blazor.syncfusion.com/documentation/stock-chart/range-selector), [trendlines](https://blazor.syncfusion.com/documentation/stock-chart/trend-lines), and [indicators](https://blazor.syncfusion.com/documentation/stock-chart/technical-indicators). ### Adapts to any resolution Stock Chart has a highly responsive layout and an optimized design for desktops, touchscreens, and phones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Attractive, customizable themes Cutting-edge design with several built-in themes, such as Fluent, Tailwind CSS, Bootstrap, Material, and Fabric. Utilize the [online Theme Studio tool](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) to customize themes of stock charts easily. ### Globalization and localization Enable users from different locales to use the control by formatting dates, currency, and numbering to suit preferences. ## Blazor Stock Chart Code Example Easily get started with the Blazor Stock Chart using a few simple lines of C# code as demonstrated below. Also, explore our [Blazor Stock Chart Example](https://blazor.syncfusion.com/demos/stock-chart/stock-chart?theme=bootstrap5) that shows you how to render the Blazor Stock Chart. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/LNLTNrNsUThNspym) - razor ## Interactive chart User experience is greatly enhanced by including a set of interactive features such as zooming and panning, crosshair, trackball, events, and selection. - [Zooming documentation](https://blazor.syncfusion.com/documentation/stock-chart/zooming) ## Candlestick with volume In the Blazor Candlestick Chart, price action and volume are put together to make an analysis at a glance. - [Candlestick chart example](https://blazor.syncfusion.com/demos/stock-chart/candlestick-volume?theme=bootstrap5) ## Multiple series Plot multiple series in a single chart to compare different stock values. Enabling tooltips provide more information about individual series. - [Multiple series example](https://blazor.syncfusion.com/demos/stock-chart/multiple-series?theme=bootstrap5) ## Plot band Draw special attention to any region of the chart or graph with the help of strip lines. ## Range selector Use range selectors to filter a date range that needs to be visualized within the chart. - [Range selector documentation](https://blazor.syncfusion.com/documentation/stock-chart/range-selector) ## Period selector Use the period selector to choose a range of data points at predetermined intervals with a single click. - [Period selector documentation](https://blazor.syncfusion.com/documentation/stock-chart/period-selector) ## Series type Visualize data using different series types like candle, OHLC, HiLo, line, spline, area, and spline area. The type of the series can be changed using series options in the period selector. - [Series types documentation](https://blazor.syncfusion.com/documentation/stock-chart/series-types) ## Legend Legends provide additional information helpful in identifying individual data or series in a stock chart. - [Legend documentation](https://blazor.syncfusion.com/documentation/stock-chart/legend) ## Indicators Use technical indicators to analyze the past and predict future market trends based on historic price, volume, or open interest. Blazor Stock Chart supports 10 types of indicators that can be added using the indicator option in the period selector. - [Indicators documentation](https://blazor.syncfusion.com/documentation/stock-chart/technical-indicators) ## Trendlines Predict future trends with predetermined data for measurements such as the stock market, target revenue, etc., with the help of trendlines. Add trendlines to the stock chart using the trendline option in the period selector. - [Trendlines documentation](https://blazor.syncfusion.com/documentation/stock-chart/trend-lines) ## Print and export Export Blazor Stock Chart to PDF documents or to image formats such as SVG, PNG, and JPEG. Export chart data to XLSX and CSV formats on the client side. Print the rendered stock charts and graphs directly from the browser. - [Print and export documentation](https://blazor.syncfusion.com/documentation/stock-chart/export-print) ## Axis type Visualize data using different axis types like numeric, logarithmic, date-time, and date-time category. This chart’s axis elements can be customized further to make an axis more readable. - [Axis type documentation](https://blazor.syncfusion.com/documentation/stock-chart/axis-types) ### Keyboard navigation Every element in Blazor Stock Charts is keyboard accessible. Major features like tooltip, trackball, legend, collapse, zoom, and pan can be used through keyboard commands alone. No mouse interaction is required. This helps in creating highly accessible applications. ### Screen reader The Blazor Stock Chart view has complete WAI-ARIA accessibility support. The Stock Chart UI includes high-contrast visual elements that help visually impaired people to have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers. ### Right to left (RTL) Right-to-left rendering allows displaying the text and layout of the Stock Chart from right to left. This improves the user experience and accessibility for RTL languages. Candle, OHLC, and line charts Elegant animation ## Other supported frameworks The Stock Chart is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React Stock Chart](https://www.syncfusion.com/react-components/react-stock-chart) - [Angular Stock Chart](https://www.syncfusion.com/angular-components/angular-stock-chart) - [JavaScript Stock Chart](https://www.syncfusion.com/javascript-ui-controls/js-stock-chart) - [Vue Stock Chart](https://www.syncfusion.com/vue-components/vue-stock-chart) ## Supported browsers The Blazor Stock Chart works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [Documentation](https://blazor.syncfusion.com/documentation/stock-chart/getting-started) ##### Blazor Range Selector | Responsive & Adaptive Navigator | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-range-selector # Blazor Range Selector - A Feature Rich Component - Quickly visualize high-level data and select a time-period with a modern interface to filter data for in-depth analysis. - Integrate seamlessly with Charts, DataGrid, ListView, etc. to show filtered data. - Responsive and adaptive to any mobile devices. ## Overview The Blazor Range Selector component is an interface for selecting a small range from a larger collection. It is commonly used in financial dashboards to filter a date range for data that needs to be visualized. ## Blazor Range Selector Code Example Easily get started with the Blazor Range Selector using a few simple lines of C# code as demonstrated below. Also explore our [Blazor Range Selector Example](https://blazor.syncfusion.com/demos/range-selector/range-navigator?theme=bootstrap5) that shows you how to render and configure the Range Selector in Blazor. - razor ## Data types Plot different types of data in the Blazor Range Selector component using different value types like numeric, date-time, and logarithmic. ## Chart Types Use the Blazor Range Selector component with different chart types like line, area and step line. ## Lightweight Skip the chart and show just the range to select data. This makes a range selector light weight in mobile devices. - [Lightweight documentation](https://blazor.syncfusion.com/documentation/range-selector/light-weight) ## Scales A date-time axis can be configured to show in major and minor scales. The major and minor scales show where a range falls within different intervals and are displayed in multiple levels - [Multilevel labels documentation](https://blazor.syncfusion.com/documentation/range-selector/labels#multi-level-labels) ## Time Period Selector Select data using predefined time periods in the range navigator and use the date picker to select a custom range. - [Period selector documentation](https://blazor.syncfusion.com/documentation/range-selector/period-selector) ## Binding selected data Bind selected data from a range selector to any other data visualization control using built-in events. ## Deferred scrolling The selected range doesn’t change until the user stops dragging the thumbs. This provides a smooth scrolling experience. ## Range selection The Blazor Range Selector component provides the following ways to select a range: - Select a range through labels. - Drag the left and right thumbs. - Drag the selected range to maintain the same delta. ## Customization All the elements of the Blazor Range Selector component are highly customizable with built-in APIs. ### Labels Customize the size, color, font family, font attribute, and alignment of the labels using built-in APIs. - [Label customization documentation](https://blazor.syncfusion.com/documentation/range-selector/labels#labels-customization) ### Thumbs Customize the entire appearance of the left and right thumbs using built-in APIs. - [Thumb customization documentation](https://blazor.syncfusion.com/documentation/range-selector/custom#thumb) ### Gridlines Customize the color, stroke width, dash array, and visibility of the major and minor gridlines using built-in APIs. - [Gridlines customization documentation](https://blazor.syncfusion.com/documentation/range-selector/grid-tick#gridline-customization) ## Tooltip Tooltips display the start and end values of a selected range to enable users to select a required range easily. - [Tooltip documentation](https://blazor.syncfusion.com/documentation/range-selector/tool-tip) ### Globalization The Blazor Range Selector component allows users from different locales to format dates, currency, and numbers to suit preferences. The component uses the Essential JS 2 internalization library for handling value formatting. ### Right to left {RTL} The Blazor Range Selector component supports right-to-left rendering, allowing the series and scale direction to be displayed from right to left. This improves the user experience and accessibility for users of RTL languages. ## Other supported frameworks The Range Selector is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React Range Selector](https://www.syncfusion.com/react-components/react-range-selector) - [Angular Range Selector](https://www.syncfusion.com/angular-components/angular-range-selector) - [JavaScript Range Selector](https://www.syncfusion.com/javascript-ui-controls/js-range-selector) - [Vue Range Selector](https://www.syncfusion.com/vue-components/vue-range-selector) ## Supported browsers The Blazor Range Selector works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [Documentation](https://blazor.syncfusion.com/documentation/range-selector/getting-started) ##### Blazor Circular Gauge | Radial Gauge | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-circular-gauge # Blazor Circular Gauge - A Rich Animated Gauge Component - Easily visualize numeric values in a circular scale with features like multiple axes, rounded corners, and more. - Customize the appearance of a gauge completely to simulate a speedometer, meter gauge, analogue clock, etc. - Create half or quarter circular gauges to visualize data in a small area. Do this by modifying the start and end angles. ## Overview The Blazor Circular Gauge is an ideal component for visualizing numeric values on a circular scale with features like multiple axes, rounded corners, and more. Completely customize the appearance of the gauge to simulate a speedometer, meter gauge, analog clock, etc. ## Axes customization The gauge axes are circular scales where a set of values can be plotted based on any business logic. You can also easily customize the appearance of the axes. - [Axes customization example](https://blazor.syncfusion.com/demos/circular-gauge/ticks-and-labels) - [Multiple axes and direction example](https://blazor.syncfusion.com/demos/circular-gauge/multiple-axes) - [Axes customization documentation](https://blazor.syncfusion.com/documentation/circular-gauge/axes) ### Label customization Customize the look and feel of the default labels in gauge by changing the font style, size, and color. Prefix or suffix text can also be added to the labels. ### Ticks customization Define the desired style for major and minor ticks in the gauge by changing their height, width, and color. ### Offset To enhance readability, change the position of the default axes in the gauge by setting the offset value for labels, ticks, and axis lines. ### Axis line Add a border to the gauge by using axis lines. The appearance of the default axis in the radial gauge can also be customized. ### Multiple axes The Blazor Circular Gauge allows you to add multiple axes to a gauge to design it like a clock, speedometer, meter gauge, etc. ### Direction Render the axes in the radial gauge either in a clockwise direction or in a counterclockwise direction. ## Range customization A range in a Blazor Circular Gauge is a visual element that helps to quickly visualize where a value falls on the axis. - [Range customization example](https://blazor.syncfusion.com/demos/circular-gauge/range-customization) - [Range customization documentation](https://blazor.syncfusion.com/documentation/circular-gauge/ranges) ### Range position Change the position of a range or move it to any place inside the gauge. ### Range width The range width varies based on the values to enhance usage and readability. ### Multiple ranges You can add multiple ranges inside the axes to show color variations. ## Pointer types Indicate values on an axis using pointers. The Blazor Circular Gauge component supports three types of pointers: needle, marker, and bar. - [Pointer types example](https://blazor.syncfusion.com/demos/circular-gauge/pointer-types) - [Pointer types documentation](https://blazor.syncfusion.com/documentation/circular-gauge/pointers) ### Needle pointer Point out the current value in the radial gauge by using a highly customizable needle-type element. #### Pointer type Change the needle pointer type to a triangle or arrow to point out or highlight values. #### Pointer cap The pointer cap is a rounded ball at the end of the arrow pointer that can also be customized to enhance the pointer’s appearance. #### Tail Add extra styling to the pointer cap by adding a tail. #### Multiple needle pointers You can add more than one needle pointer to the gauge axes as a result to indicate multiple values. ### Marker pointer Point out the current value by using the following different types of marker pointers. #### Pointer type Change the marker pointer type to built-in shapes such as a triangle, inverted triangle, square, or circle to highlight values. #### Marker pointer position Change or move the marker pointers to any place inside the gauge. ### Range bar pointer Use bar pointer to point to the current value from the start value of the axes. #### Pointer position Change or move the bar pointers to any place inside the gauge graphs. #### Multiple pointers You can add more than one bar pointer to the axes to indicate multiple values. ## Pointer animation The Blazor Circular Gauge component provides a visually appealing way to view its pointers with animated transitions for a certain duration. Experience smooth pointer transitions by moving the pointer from one place to another. - [Pointer animation example](https://blazor.syncfusion.com/demos/circular-gauge/speedometer) - [Pointer animation documentation](https://blazor.syncfusion.com/documentation/circular-gauge/pointers#pointer-animation) ## Pointer interaction The interactive Blazor Circular Gauge component provides an option to drag the pointer from one place to another. Swipe gestures are used to control the pointer, and the value can be changed at runtime. - [Pointer interaction example](https://blazor.syncfusion.com/demos/circular-gauge/pointer-ranges-drag) - [Pointer interaction documentation](https://blazor.syncfusion.com/documentation/circular-gauge/pointers#dragging-pointer) ## Arc gauges The ranges and range bar pointer corners in the radial gauge are rounded to form arc gauges. - [Arc gauges example](https://blazor.syncfusion.com/demos/circular-gauge/arc-gauge) - [Arc gauges documentation](https://blazor.syncfusion.com/documentation/circular-gauge/pointers#rounded-corners) ## Legend A legend provides additional information that is helpful in identifying the ranges in a circular gauge. It can be docked at the left, right, top, and bottom positions around the plot area. - [Legend example](https://blazor.syncfusion.com/demos/circular-gauge/legend) - [Legend documentation](https://blazor.syncfusion.com/documentation/circular-gauge/legend) ## Tooltip The interactive Blazor Circular Gauge component provides options to display details about a pointer value through a tooltip when hovering the mouse over the pointer. - [Tooltip example](https://blazor.syncfusion.com/demos/circular-gauge/tooltip) - [Tooltip documentation](https://blazor.syncfusion.com/documentation/circular-gauge/user-interaction) ## Half and quarter gauges Form half or quarter circular gauges by modifying the start and end angles of a gauge. This allows the gauge to render in a very small area. - [Half and quarter gauges example](https://blazor.syncfusion.com/demos/circular-gauge/semi-circular-gauge) - [Half and quarter gauges documentation](https://blazor.syncfusion.com/documentation/circular-gauge/appearance#radius-calculation-based-on-angles) ## Annotations Display any HTML element as an annotation at a specific point of interest in the Blazor Circular Gauge. You can also add multiple annotations in a gauge. - [Annotations example](https://blazor.syncfusion.com/demos/circular-gauge/clock) - [Annotations documentation](https://blazor.syncfusion.com/documentation/circular-gauge/annotations) ## Appearance The appearance of each element in a Blazor Circular Gauge, such as axes, ranges, axes intervals, pointer positions, label positions, and tick positions, can be customized easily. - [Appearance customization documentation](https://blazor.syncfusion.com/documentation/circular-gauge/appearance) ## Gradient color Colors applied to the range and pointer can vary gradually to create a smooth color transition. - [Gradient color example](https://blazor.syncfusion.com/demos/circular-gauge/custom-labels) - [Gradient color for range documentation](https://blazor.syncfusion.com/documentation/circular-gauge/ranges#gradient-color) - [Gradient color for pointer documentation](https://blazor.syncfusion.com/documentation/circular-gauge/pointers#gradient-color) ## Gauge title Add a title to visualize additional information on a Blazor Circular Gauge. You can also customize the font of the title in the gauge. - [Title example](https://blazor.syncfusion.com/demos/circular-gauge/image-pointer) - [Title documentation](https://blazor.syncfusion.com/documentation/circular-gauge/appearance#circular-gauge-title) ## Touch and Browser support The interactive Blazor Circular Gauge component also support touch interactions. ### Touch support All the features in Blazor Circular Gauge will work on touch devices with zero configuration. Use the touch features such as tooltip and pointer drag without any customization. ### Responsive Design The Blazor Circular Gauge can be viewed on various devices. It is also possible to hide specific elements in the gauge for particular screen sizes by making a very minimal change in the gauge events. ### Cross browser support Render Blazor Circular Gauge component in all the modern browsers. ## Blazor Circular Gauge Code example Easily get started with the Blazor Circular Gauge using a few simple lines of C# code, as demonstrated below. Also, explore our [Blazor Circular Gauge Example](https://blazor.syncfusion.com/demos/circular-gauge/default-functionalities?theme=fluent2), which shows you how to include the Blazor Circular Gauge component with highlight customization. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/LDheDCXnAbnCgHyM) - razor ## Other supported frameworks The circular gauge is also available in JavaScript, Angular, React, and Vue frameworks that are built from their own TypeScript libraries. Check out the different Circular Gauge platforms from the links below, - [JavaScript Circular Gauge](https://www.syncfusion.com/javascript-ui-controls/js-circular-gauge) - [Angular Circular Gauge](https://www.syncfusion.com/angular-components/angular-circular-gauge) - [React Circular Gauge](https://www.syncfusion.com/react-components/react-circular-gauge) - [Vue Circular Gauge](https://www.syncfusion.com/vue-components/vue-circular-gauge) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Linear Gauge | Bar Gauge | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-linear-gauge # Blazor Linear Gauge - A Rich, Animated Gauge Component - Easily visualize numeric values on a linear scale with features like multiple axes and orientations. - Customize the appearance of gauges completely to simulate a thermometer, pressure gauge, ruler, etc. - Display the Linear Gauge in vertical or horizontal orientation. ## Overview The Blazor Linear Gauge is an ideal component for visualizing numeric values on a linear scale with features like multiple axes and orientations. Completely customize the appearance of the gauge to simulate a thermometer, pressure gauge, ruler, etc. ## Orientation Position the Blazor Linear Gauge either vertically or horizontally. This is helpful when viewing the gauge on mobile devices. - [Orientation example.](https://blazor.syncfusion.com/demos/linear-gauge/container) - [Orientation documentation.](https://blazor.syncfusion.com/documentation/linear-gauge/axis#orientation) ## Containers A container holds the ranges and pointers in a Blazor Linear Gauge. Customize the shape of the container to a rectangle, rounded rectangle, or thermometer. - [Containers example.](https://blazor.syncfusion.com/demos/linear-gauge/container) - [Containers documentation.](https://blazor.syncfusion.com/documentation/linear-gauge/linear-gauge-appearance#customizing-the-linear-gauge-container) ## Axes customization The gauge axes are linear scales where a set of values can be plotted based on any business logic. You can also easily customize the appearance of the axes. - [Axes customization example.](https://blazor.syncfusion.com/demos/linear-gauge/track) - [Axes customization documentation.](https://blazor.syncfusion.com/documentation/linear-gauge/axis) ### Label customization Customize the look and feel of the default labels in the Blazor Linear Gauge by changing the font style, size, and color. Prefix or suffix text can also be added to the labels. ### Ticks customization Define the desired styles for major and minor ticks in the gauge by changing their height, width, and color. ### Offset To enhance readability, change the position of the default axes in the gauge by setting the offset value for labels, ticks, and axis lines. ### Axis line Add a border to the gauge by using axis lines. The appearance of the default axis in the Blazor Linear Gauge can also be customized. ### Multiple axes The Blazor Linear Gauge allows you to add multiple axes to a gauge to design it like a thermometer, ruler, and more. ### Inverse axis Values in Blazor Linear Gauge axes can be reversed. ## Range customization A range in a Blazor Linear Gauge is a visual element that helps to visualize where a value falls on the axis quickly. - [Range customization example.](https://blazor.syncfusion.com/demos/linear-gauge/range) - [Range customization documentation.](https://blazor.syncfusion.com/documentation/linear-gauge/ranges) ### Range position Change the position of a range or move it to any place inside the gauge. ### Range width The range width varies based on the values to enhance usage and readability. ### Multiple ranges Add multiple ranges to the axis to show color variations. ## Pointer types Indicate the values on an axis using pointers. The Blazor Linear Gauge component supports two types of pointers: marker and bar. - [Pointer types example.](https://blazor.syncfusion.com/demos/linear-gauge/marker-pointer) - [Pointer types documentation.](https://blazor.syncfusion.com/documentation/linear-gauge/pointers) ### Marker pointer Point out the current value by using the following types of marker pointers. #### Pointer type Change the marker pointer type to built-in inverted triangle, square, or circle shapes to highlight a value. #### Marker pointer position Change or move the marker pointers to any place inside the gauge. #### Text pointer Change the marker pointer type to text to indicate the axis value. ### Bar pointer Use a bar pointer to point to the current value from the start value of the axis. #### Pointer position Change or move the bar pointers to any place inside the gauge graphs. #### Multiple pointers Add more than one bar pointer to the axis to indicate multiple values. ## Pointer animation The Blazor Linear Gauge component is visually appealing with animated transitions. Experience smooth pointer transitions by moving the pointer from one place to another. - [Pointer animation example.](https://blazor.syncfusion.com/demos/linear-gauge/bar-pointer) - [Pointer animation documentation.](https://blazor.syncfusion.com/documentation/linear-gauge/pointers#pointer-animation) ## Pointer interaction The interactive Blazor Linear Gauge component provides an option to drag the pointer from one place to another. Swipe gestures are used to control the pointer, and the value is changed at runtime. - [Pointer interaction documentation.](https://blazor.syncfusion.com/documentation/linear-gauge/user-interaction#pointer-drag) ## Tooltip The interactive Blazor Linear Gauge displays details about the pointer value when the tooltip hovers over the pointer. - [Tooltip example.](https://blazor.syncfusion.com/demos/linear-gauge/tooltip) - [Tooltip documentation.](https://blazor.syncfusion.com/documentation/linear-gauge/user-interaction#tooltip) ## Annotations Display any HTML element as an annotation at a specific point of interest in the Linear Gauge. You can add multiple annotations in a gauge. - [Annotation example.](https://blazor.syncfusion.com/demos/linear-gauge/steps-counter) - [Annotation documentation.](https://blazor.syncfusion.com/documentation/linear-gauge/annotations) ## Appearance The appearance of each element in the Blazor Linear Gauge, such as axes, ranges, axes intervals, pointer positions, label positions, and tick positions can be customized easily. - [Appearance customization documentation.](https://blazor.syncfusion.com/documentation/linear-gauge/linear-gauge-appearance) ## Gradient color Colors applied to the range and pointer can change gradually to create a smooth color transition. - [Gradient color example.](https://blazor.syncfusion.com/demos/linear-gauge/range) - [Gradient color for range documentation.](https://blazor.syncfusion.com/documentation/linear-gauge/ranges#gradient-color) - [Gradient color for pointer documentation.](https://blazor.syncfusion.com/documentation/linear-gauge/pointers#gradient-color) ## Gauge title Add a title to visualize additional information on the Linear Gauge. You can customize the font of the title. - [Title example.](https://blazor.syncfusion.com/demos/linear-gauge/container) - [Title documentation.](https://blazor.syncfusion.com/documentation/linear-gauge/linear-gauge-appearance#setting-up-the-linear-gauge-title) ## Touch and browser support The interactive Linear Gauge component also supports touch interactions. ### Touch support All the features in the Blazor Linear Gauge will work on touch devices with zero configuration. Use the touch features such as tooltip and pointer drag without any customization. ### Responsive design You can view the Blazor Linear Gauge on various devices. It is also possible to hide specific elements in the gauges for particular screen sizes by making a very minimal change in the gauge events. ### Cross-browser support You can render the Blazor Linear Gauge component in all the modern browsers. ## Blazor Linear Gauge Code example Easily get started with the Blazor Linear Gauge using a few simple lines of C# code, as demonstrated below. Also, explore our [Blazor Linear Gauge Example](https://blazor.syncfusion.com/demos/linear-gauge/default-functionalities?theme=fluent2), which shows you how to include the Blazor Linear Gauge component with highlight customization. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/BZByNstdUuLWyQUT) - razor ## Other supported frameworks The Linear Gauge is also available in our JavaScript, Angular, React, and Vue frameworks, which were built from their own TypeScript libraries: - [JavaScript Linear Gauge](https://www.syncfusion.com/javascript-ui-controls/js-linear-gauge) - [Angular Linear Gauge](https://www.syncfusion.com/angular-components/angular-linear-gauge) - [React Linear Gauge](https://www.syncfusion.com/react-components/react-linear-gauge) - [Vue Linear Gauge](https://www.syncfusion.com/vue-components/vue-linear-gauge) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Smith Chart - Transmission-line Impedances | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-smith-chart # Blazor Smith Chart - Analyze High-Frequency Circuit Data - Easily show the parameters of the transmission lines in high-frequency circuit applications. - Visualize the Smith chart by adding built-in features like legends, markers, tooltips, and data labels. - Print or export the Smith chart in PDF, SVG, PNG, and JPEG formats. ## Overview The Blazor Smith Chart is a component for showing the parameters of transmission lines in high-frequency circuit applications. Its rich feature set includes features like legends, markers, tooltips, and data labels. ## Blazor Smith Chart Code Example Easily get started with the Blazor Smith Chart using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor Smith Chart Example](https://blazor.syncfusion.com/demos/smith-chart/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Smith Chart in Blazor. - razor ## Rendering type Visualize both the impedance and admittance of transmission lines with Blazor Smith Chart. - [Rendering types example](https://blazor.syncfusion.com/demos/smith-chart/default-functionalities?theme=bootstrap5) ## Title and subtitle Add a title and subtitle to the Blazor Smith Chart component to visualize additional information about the data represented. You can customize the font and alignment of the title and subtitle. ## Multiple series Plot any number of line series for representing data. ## Axis customization The Blazor Smith Chart component supports a horizontal axis and radial axis. The horizontal axis is used for plotting resistance values of transmission lines and the radial axis is used for plotting nonresistance values of transmission lines. - [Customized axis example](https://blazor.syncfusion.com/demos/smith-chart/customization?theme=bootstrap5) ## Marker Markers highlight data points to improve readability. - [Marker documentation](https://blazor.syncfusion.com/documentation/smith-chart/smith-chart-marker#marker) ## Data labels Easily annotate the data points with labels to improve the readability of data. The data labels in the Blazor Smith Chart component are smartly arranged to avoid intersection when there are large amounts of data. - [Data label documentation](https://blazor.syncfusion.com/documentation/smith-chart/smith-chart-marker#data-labels) ## Legend A legend provides additional information that is helpful in identifying individual series in a Smith chart. It can be docked at the left, right, top, or bottom positions around the plot area. By clicking a legend item, we can toggle series visibility. - [Legend documentation](https://blazor.syncfusion.com/documentation/smith-chart/smith-chart-legend) ## Animation Animate the series in the Blazor Smith Chart while rendering. ## Tooltip The interactive Blazor Smith Chart displays a pop-up with additional information when the mouse is hovered over a data point. - [Tooltip documentation](https://blazor.syncfusion.com/documentation/smith-chart/smith-chart-tool-tip) ## Exporting Print or export the rendered Blazor Smith Chart to save a local copy for further use. [Print and export example](https://blazor.syncfusion.com/demos/smith-chart/print-and-export) ### Export You can export the Smith chart to a PDF document or in image formats such as SVG, PNG, and JPEG in client-side. - [Print and export example](https://blazor.syncfusion.com/demos/smith-chart/print-and-export?theme=bootstrap5) ### Print Print the rendered Smith chart directly from the browser. ## Touch and browser support The interactive Smith chart component also support touch interactions. ### Touch support All the Blazor Smith Chart features will work on touch devices with zero configuration. Use the touch features, such as tooltips and toggling series visibility using the legend, without any customization. ### Responsive You can view the Blazor Smith Chart component on various devices. Also hide specific elements in the Smith chart for particular screen sizes by making a very minimal change in the events. ### Cross-browser support You can render the Blazor Smith Chart component in all the modern browsers. - [Cross-browser compatibility documentation](https://blazor.syncfusion.com/documentation/browser-support) ## Other supported frameworks The Smith Chart is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React Smith Chart](https://www.syncfusion.com/javascript-ui-controls/js-smith-chart) - [Angular Smith Chart](https://www.syncfusion.com/angular-components/angular-smith-chart) - [JavaScript Smith Chart](https://www.syncfusion.com/javascript-ui-controls/js-range-selector) - [Vue Smith Chart](https://www.syncfusion.com/vue-components/vue-smith-chart) ## Supported browsers The Blazor Smith Chart works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [Documentation](https://blazor.syncfusion.com/documentation/smith-chart/getting-started) ##### Blazor Sparkline Charts | Small Embedded Line Graph | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-sparkline # Blazor Sparkline Charts - High performance Chart Component - Replace normal charts to display trends in a very small area. - Place a sparkline in a data grid cell to visualize a group of data. - Customize the sparkline completely by changing the series or axis type and by adding markers, data labels, a range band, etc. ## Overview The Blazor Sparkline Charts is a replacement for normal charts to display trends in a very small area. Customize sparklines completely by changing the series or axis type and by adding markers, data labels, range bands, and more. ## Sparkline types There are five types of Blazor Sparklines (line, column, area, win-loss, and pie) to show data trends. ### Line sparkline Use a line sparkline to represent patterns and trends in data, such as seasonal increases or decreases, large changes, and a trend over a period of time. ### Area sparkline An area sparkline is a line sparkline with the area between its points colored. Use this when the magnitude of the trend is to be communicated rather than individual data values. ### Column sparkline A column sparkline is designed to show different values of two or more subjects. Vertical bars represent the different values. ### Win-loss sparkline A win-loss sparkline shows positive, negative, or zero values to visualize win/loss scenarios such as sports teams and stock prices. ### Pie sparkline A pie sparkline is a circular graph that is divided into slices to illustrate numeric proportions. ## Axis value types The Blazor Sparkline Charts component offers different axis types like numeric, category, and date-time to plot any type of data in the sparkline. - [Axis value types example](https://blazor.syncfusion.com/demos/sparkline/axis-types?theme=bootstrap4) ## Axis customization Configure and customize the axis in Blazor Sparkline charts to show the origin and range of the data points. - [Axis documentation](https://blazor.syncfusion.com/documentation/sparkline/axis-customization) ## Special points customization Some data points in the sparklines are special. Denote the data usage by highlighting and customizing the special data points, such as first, last, high, low, and negative points. - [Points documentation](https://blazor.syncfusion.com/documentation/sparkline/special-points-customization) ## Markers The markers highlight and distinguish data points in the line and area sparklines and make these sparklines more readable. - [Marker documentation](https://blazor.syncfusion.com/documentation/sparkline/markers) ## Data label Improve readability by using data labels in the Blazor Sparkline to display the values of data points. - [Data label documentation](https://blazor.syncfusion.com/documentation/sparkline/data-labels) ## Tooltip Tooltips display details about specific data point when hovering the mouse over a sparkline. - [Tooltip example](https://blazor.syncfusion.com/demos/sparkline/default-functionalities) ## Track line The track line tracks the data points that are closer to the mouse position or touch contact. ## Range band Highlight a particular region in a sparkline using a range band to show the range of safe values. By setting the minimum and maximum for a range band, the outliers can be easily identified. - [Range band documentation](https://blazor.syncfusion.com/documentation/sparkline/range-band) ### Touch All the Blazor Sparkline features will work on touch devices with zero configuration. Use touch features such as tooltip and track line without any customization. ### Responsive You can view the Blazor Sparkline Charts component on various devices. You can also hide specific elements in the sparkline for certain screen sizes by making a very minimal change in the events. ### Cross-browser compatible You can render the Blazor Sparkline Charts component in all modern browsers. - [Cross-browser compatibility documentation](https://blazor.syncfusion.com/documentation/browser-support) ## Blazor Sparkline Chart Code Example Easily get started with the Blazor Sparkline Chart using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor Sparkline Chart Example](https://blazor.syncfusion.com/demos/sparkline/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Sparkline Chart in Blazor. - razor ## Other supported frameworks Sparkline Charts is also available in JavaScript, Angular, React and Vue frameworks that are built from their own TypeScript libraries. Check out the different Sparkline Charts platforms from the links below, - [JavaScript Sparkline Charts](https://www.syncfusion.com/javascript-ui-controls/js-sparkline) - [Angular Sparkline Charts](https://www.syncfusion.com/angular-components/angular-sparkline) - [React Sparkline Charts](https://www.syncfusion.com/react-components/react-sparkline) - [Vue Sparkline Charts](https://www.syncfusion.com/vue-components/vue-sparkline) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Maps | Visualize Custom Maps Easily | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-map # Blazor Maps - An Interactive & Customizable Map Component - Render maps from various map providers including OpenStreetMap, Google Maps, and Bing Maps. - Customize Blazor Maps by rendering GeoJSON data and adding built-in features like bubbles, markers, navigation lines, and legends. - Simulate concepts like bus seat selection and cricket stadium seating by rendering custom shapes. ## Overview The Blazor Maps component is ideal for rendering maps from GeoJSON data or other map providers like OpenStreetMap, Google Maps, Bing Maps, etc. Its rich feature set includes markers, labels, bubbles, navigation lines, legends, tooltips, zooming, panning, drill down, and much more. ### Easy to customize To visualize a geometric shape in SVG format in Maps, you can [bind GeoJSON data](https://blazor.syncfusion.com/documentation/maps/getting-started#adding-geojson-data-in-maps-layer) to it. It’s light and simple to read. You can render a world map or a U.S. map and alter it with the Blazor Maps control’s built-in options to achieve the required layout. ### Geospatial imaging services Maps works with services like Google Maps, [Bing Maps](https://blazor.syncfusion.com/documentation/maps/providers/bing-maps), and [OpenStreetMap](https://blazor.syncfusion.com/documentation/maps/providers/openstreetmap) to view satellite, aerial, and street maps by locating map data quickly without the use of any external shape inputs. ### Markers and bubbles [Markers](https://blazor.syncfusion.com/documentation/maps/markers) are notes on maps that indicate specific latitude and longitude points using symbols. [Bubbles](https://blazor.syncfusion.com/documentation/maps/bubble) are used to convey additional information about shapes such as population density and land area. Circle and square bubbles are available. ### Multiple geometric layers A [map with several geometric layers](https://blazor.syncfusion.com/documentation/maps/layers#multilayer) in a single view can be generated with sublayer. You can render the geographic elements of a country, such as rivers and valleys, as a sublayer. Each layer can be drilled. ### Adapts to any resolution Maps has a highly responsive layout and an optimized design for desktops, tablets, and phones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Custom projections The Blazor Maps component supports [Mercator, rectangular, Miller, Eckert3, Eckert5, Eckert6, and Winkel3](https://blazor.syncfusion.com/documentation/maps/customization#projection-type) projections. ### Zooming and panning [Zooming and panning](https://blazor.syncfusion.com/documentation/maps/how-to/change-center-position-on-zooming) in Blazor Maps are fast. Zoom the map by scrolling the mouse wheel, clicking the shapes, or using the zooming toolbar. Pan the map to navigate among regions easily. ### Globalization and localization [An internalization library](https://blazor.syncfusion.com/documentation/maps/internationalization) is used to globalize number, date, and time values in Maps. All the strings used in the Maps user interface can be localized by users as needed. [Localizing UI strings](https://blazor.syncfusion.com/documentation/maps/localization) involves using the localization (l10n) library. ## Blazor Maps code example Easily get started with Blazor Maps using a few simple lines of C# code, as demonstrated. Also explore our [Blazor Maps example](https://blazor.syncfusion.com/demos/maps/default-functionalities?theme=bootstrap5), which shows you how to render and configure the Maps component. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/VZBztiqtzlonSWWv) - razor ## GeoJSON layer Bind GeoJSON data to a map to render any geometric shape in SVG (scalable vector graphics) format to visualize data with shapes. For example, render the world map or U.S. map and customize it to the desired look using built-in options in the Blazor Maps component. Add any number of layers to the map. - [GeoJSON layer example](https://blazor.syncfusion.com/demos/maps/default-functionalities?theme=bootstrap5) - [GeoJSON layer documentation](https://blazor.syncfusion.com/documentation/maps/getting-started#adding-geojson-data-in-maps-layer) ## Geometric types Geometric types are shapes with straight lines and angles symbolizing structure and order. Coordinates are used to locate a specific point on a grid, known as a coordinate plane. Polygon, MultiPolygon, LineString, MultiLineString, Point, MultiPoint, and GeometryCollection are the supported geometric types. - [Geometric types documentation](https://blazor.syncfusion.com/documentation/maps/populate-data#geometry-types) ## Shapefile A shapefile (*.shp), similar to GeoJSON, is a vector data storage format that stores the location, shape, and attributes of a geographic location. You can render any geographical map or custom map and customize it using the built-in options in the Blazor Maps component. - [Shapefile documentation](https://blazor.syncfusion.com/documentation/maps/shapefile) ## Geo-imagery visuals Built-in support for external geospatial imagery services, such as Bing Maps and OpenStreetMap, let you visualize satellite, aerial, and street maps, or other kinds of imagery tiles without any external shape inputs. You can render maps from map providers like Google Map Tiles API, TomTom, Mapbox,and Esri’s ArcGIS. By using these external services, map data can be located easily. - [OpenStreetMap example](https://blazor.syncfusion.com/demos/maps/open-street-map?theme=bootstrap5) - [Map providers documentation](https://blazor.syncfusion.com/documentation/maps/providers/openstreetmap) ## Multilayers Create a map with multiple geometric layers in a single view by using sublayer. For example, you can render the geographic features of a country such as rivers and valleys as a sublayer. You can also drill down in each layer. - [Multilayers example](https://blazor.syncfusion.com/demos/maps/multi-layers?theme=bootstrap5) - [Multilayers documentation](https://blazor.syncfusion.com/documentation/maps/layers#layers) ## Markers Denote a place with symbols or add a note at the latitude and longitude of a location on a map using markers. For example, indicate a place on a U.S. map using a balloon marker shape. Place any HTML element as a marker and also add multiple markers to a map. - [Default marker example](https://blazor.syncfusion.com/demos/maps/marker?theme=bootstrap5) - [Marker template example](https://blazor.syncfusion.com/demos/maps/marker-template?theme=bootstrap5) - [Marker documentation](https://blazor.syncfusion.com/documentation/maps/markers) ## Marker clustering Display multiple markers in the same location by clustering the markers when they overlap one another. For example, you can use markers to indicate the top 50 cities in the world. If a marker overlaps another, it will be clustered and the total number of markers will be displayed over the cluster. - [Marker clustering example](https://blazor.syncfusion.com/demos/maps/marker-cluster?theme=bootstrap5) - [Marker clustering documentation](https://blazor.syncfusion.com/documentation/maps/markers#marker-clustering) ## Marker drag and drop Drag and drop markers to reposition them in maps. After dragging and dropping markers, the marker data source and elements such as marker shape, color, legend, and tooltip content can be changed using supported events. - [Marker drag and drop documentation](https://blazor.syncfusion.com/documentation/maps/markers#repositioning-the-marker-using-drag-and-drop) ## Polygons Polygons can be displayed over a shape layer or an online map to highlight a specific region. - [Polygons documentation](https://blazor.syncfusion.com/documentation/maps/polygon) ## Data labels Data labels enable users to identify shapes by displaying their names. Trim or hide labels at intersections with other labels and when they exceed shape bounds. - [Data labels example](https://blazor.syncfusion.com/demos/maps/data-labels?theme=bootstrap5) - [Data labels documentation](https://blazor.syncfusion.com/documentation/maps/data-labels) ## Bubbles Create a simple Blazor Maps control with bubbles to provide additional information about shapes such as population density or land area. Bubbles are rendered with various magnitudes and colors based on the underlying data values of the shape. - [Bubbles example](https://blazor.syncfusion.com/demos/maps/bubbles?theme=bootstrap5) - [Bubbles documentation](https://blazor.syncfusion.com/documentation/maps/bubble) ## Navigation lines Represent flight or ship routes between two places on a geographic map with navigation lines. They also act as the connector line that links points on a map. Navigation lines can also be curved. - [Navigation lines example](https://blazor.syncfusion.com/demos/maps/navigation-lines?theme=bootstrap5) - [Navigation lines documentation](https://blazor.syncfusion.com/documentation/maps/navigation-line) ## Color mapping Categorize the shapes on a map by customizing their color based on the underlying values. The Blazor Maps component supports three types of color mapping: range color mapping, equal color mapping, and desaturation color mapping. - [Color mapping example](https://blazor.syncfusion.com/demos/maps/color-mapping?theme=bootstrap5) - [Color mapping documentation](https://blazor.syncfusion.com/documentation/maps/color-mapping) ### Range color mapping Apply colors to shapes by comparing their values with a desired numeric range. For example, apply colors to the states in the U.S. based on population density. - [Range color mapping example](https://blazor.syncfusion.com/demos/maps/color-mapping?theme=bootstrap5) ### Equal color mapping Differentiate a shape’s fill based on its underlying value and color by using equal color mapping. For example, apply colors to the states in the U.S. based on a winning political candidate. - [Equal color mapping example](https://blazor.syncfusion.com/demos/maps/selection-highlight?theme=bootstrap5) ### Desaturation color mapping Change the opacity of the shapes by comparing their values with a desired numeric range. Minimum and maximum opacity of shapes can be customized. ### Desaturation with multiple colors Apply colors to a shape from a gradient by comparing their values with a desired numeric range. Any number of colors can be specified for creating the gradient. ## Legends Use legends to provide valuable information for interpreting the map with various colors, shapes, or other identifiers based on data and application needs. The interactive Blazor Maps control supports two types of legends: default and interactive. - [Legend documentation](https://blazor.syncfusion.com/documentation/maps/legend) - [Legend example](https://blazor.syncfusion.com/demos/maps/legend?theme=bootstrap5) ### Default A legend contains swatches of symbols with descriptions to denote the categories of shapes in a map. ### Interactive Use a map with an interactive legend to find the range of an underlying shape’s value on mouse hover. ## Zooming and panning Zoom the map for close-up analysis by pinching the map, scrolling the mouse wheel, clicking the shapes, or by using zooming toolbar. Pan the map for easy navigation across regions. You can also change the zoom level of the initial rendering. - [Zooming and panning example](https://blazor.syncfusion.com/demos/maps/zooming-panning?theme=bootstrap5) - [Zooming and panning documentation](https://blazor.syncfusion.com/documentation/maps/user-interactions#zooming) ## Tooltip Display a tooltip with details about the shape values on mouse hover. The tooltip is also displayed for markers and bubbles on a map. - [Tooltip example](https://blazor.syncfusion.com/demos/maps/tooltip?theme=bootstrap5) - [Tooltip documentation](https://blazor.syncfusion.com/documentation/maps/user-interactions#tooltip) ## Drill down Users can drill down the rendered Blazor Maps to display shape data located on another layer. For example, in the initial layer, you can render the world map and on clicking a particular continent, render that separately on another layer. - [Drill-down example](https://blazor.syncfusion.com/demos/maps/drill-down?theme=bootstrap5) ## Selection and highlight Select a particular shape on mouse click or highlight on mouse hover to bring the focus to shapes on a map. - [Selection and highlight example](https://blazor.syncfusion.com/demos/maps/selection-highlight?theme=bootstrap5) - [Selection documentation](https://blazor.syncfusion.com/documentation/maps/user-interactions#selection) - [Highlight documentation](https://blazor.syncfusion.com/documentation/maps/user-interactions#highlight) ## Custom shapes Create a map with custom shapes by rendering your own GeoJSON data to indicate building infrastructure, points of interest, flight or bus seat arrangement, stadium seating, and more useful information. - [Custom shapes example](https://blazor.syncfusion.com/demos/maps/bus-seat-selection?theme=bootstrap5) ## Annotations Display any HTML element as an annotation at a specific point of interest on a map. For example, place a compass image on the map using an annotation. You can also add multiple annotations to a map. - [Annotation example](https://blazor.syncfusion.com/demos/maps/annotations?theme=bootstrap5) - [Annotation documentation](https://blazor.syncfusion.com/documentation/maps/annotations) ## Projection You can change the projection of the default rendered map. The Blazor Maps component supports Mercator, rectangular, Miller, Eckert3, Eckert5, Eckert6, and Winkel3 projections. - [Projection example](https://blazor.syncfusion.com/demos/maps/projection?theme=bootstrap5) - [Projection documentation](https://blazor.syncfusion.com/documentation/maps/customization#projection-type) ## Title and subtitle Add a title and subtitle to provide additional information about the map. You can also customize the font and alignment of the title and subtitle. ## Appearance Customize the look and feel of a map by changing the fill color, background, border, and opacity of shapes. Almost all the elements in Blazor Maps are customizable. It provides built-in palettes with customizable options by default. - [Appearance documentation](https://blazor.syncfusion.com/documentation/maps/customization#customizing-the-shapes) ## State persistence State persistence allows the Maps component to maintain state by storing the most recent model value in browser cookies. When the appropriate setting is enabled, some of the Maps component model values are preserved even after the page is refreshed. - [State persistence documentation](https://blazor.syncfusion.com/documentation/maps/state-persistence) ## Exporting Export or print the rendered Blazor Maps to save a local copy for further use. - [Export and print documentation](https://blazor.syncfusion.com/documentation/maps/print-and-export) ### Export Export Blazor Maps to a PDF document or in image formats such as SVG, PNG, or JPEG on the client side. - [Export example](https://blazor.syncfusion.com/demos/maps/export?theme=bootstrap5) ### Print Print the rendered Blazor Maps directly from the browser. - [Print example](https://blazor.syncfusion.com/demos/maps/print?theme=bootstrap5) ### Keyboard navigation The Blazor Maps library ensures that every element is keyboard accessible. Major features like zooming, panning, shape selection, and drill down can be performed using just keyboard shortcuts, no mouse interaction required. This helps in creating highly accessible applications. ### Accessibility The Blazor Maps library has complete WAI-ARIA [accessibility](https://blazor.syncfusion.com/documentation/maps/accessibility) support. The Maps UI includes high-contrast visual elements to help people with low vision have the best viewing experience. Also, UI descriptions are easily accessible through assistive technologies such as screen readers. ## Other supported frameworks The Maps is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React Maps](https://www.syncfusion.com/react-components/react-maps-library) - [Angular Maps](https://www.syncfusion.com/angular-components/angular-maps-library) - [JavaScript Maps](https://www.syncfusion.com/javascript-ui-controls/js-maps-library) - [Vue Maps](https://www.syncfusion.com/vue-components/vue-maps-library) ## Supported browsers The Blazor Maps works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [Documentation](https://blazor.syncfusion.com/documentation/maps/getting-started) [Navigating the World: Shapefile Integration in Syncfusion Blazor Maps](https://www.syncfusion.com/blogs/post/shapefile-integration-in-blazor-maps) [Easily Explore Complex Geographical Structures with Layers and Sublayers in Blazor Maps](https://www.syncfusion.com/blogs/post/layers-sub-layers-blazor-maps) --- title: Blazor Diagram Component | High-Performance Diagram | Syncfusion description: Syncfusion Blazor Diagram helps create, edit, or interactively visualize diagrams. It has built-in support for flowcharts, organizational charts, and more. image: "https://www.syncfusion.com/blazor-components/images/blazor-diagram-og.png" url: "https://www.syncfusion.com/blazor-components/blazor-diagram" --- # Blazor Diagram - High-Performance Diagramming Component - Visualize, create, and edit interactive diagrams effortlessly. - Build flowcharts, BPMN shapes, swimlane shapes and mind maps with ease. - Automatically arrange nodes in any complex layout. - Experience seamless interaction and editing capabilities. ## Overview The Blazor Diagram component is a fast and powerful library for visualizing, creating, and editing interactive diagrams. It supports the creation of flowcharts, organizational charts, mind maps, and more. ### Automatic layout [Automatically arrange nodes](https://blazor.syncfusion.com/documentation/diagram/layout/automatic-layout) based on a predefined layout algorithm. ### Seamless data binding Populate diagrams with nodes and connectors created and positioned based on [data from data sources](https://blazor.syncfusion.com/documentation/diagram/data-binding). Without writing any code, easily convert, map, and consume data in any format in the diagram by setting a few properties. ### Interactive editing The Blazor Diagram lets users pan and zoom, snap, [undo and redo](https://blazor.syncfusion.com/documentation/diagram/undo-redo), stencil, resize, and rotate interactively. ### Adapts to any resolution Diagram has a highly responsive layout and an optimized design for desktops, touchscreens, and phones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Gallery of reusable symbols The [SymbolPalette](https://blazor.syncfusion.com/documentation/diagram/symbol-palette) displays a collection of palettes. A palette displays a set of nodes and connectors that can be dragged and dropped into the diagram. ### Create your own template shapes [Visualize any graphical object using nodes](https://blazor.syncfusion.com/documentation/diagram/nodes/nodes) that can be arranged and manipulated on a diagram page at the same time. Diagram allows you to add different kinds of nodes. ### Attractive, customizable themes Cutting-edge design with several built-in themes, such as Fluent, Tailwind CSS, Bootstrap, Material, Fabric, and more. Utilize the [online Theme Studio tool](https://ej2.syncfusion.com/themestudio/?theme=fluent) to customize themes of diagram easily. ### Globalization and localization Enable users from different locales to use the component by formatting dates, currency, and numbering to suit preferences. ## AI Diagram Builder for Smarter Visualization The AI Diagram component transforms text into visuals instantly. Use text-to-diagram generation to create visuals directly from natural language. Build, modify, and understand complex diagrams fast. - Text-to-diagram: Convert natural language into flowcharts, mind maps, or sequence diagrams—no manual effort required. - [Generating diagrams from text](https://blazor.syncfusion.com/demos/ai-diagram/text-to-flowchart?theme=bootstrap5) ## Blazor Diagram code example Get started with Blazor Diagram using a few simple lines of C# code, as demonstrated below. Also, explore our [Blazor Diagram Example](https://blazor.syncfusion.com/demos/diagramcomponent/flowchart) that shows you how to render and configure the component in Blazor. - razor ## Real-time collaboration Multiple users can edit the same diagram simultaneously and see live updates, improving teamwork and efficiency. - User presence highlight: Each element shows who is currently interacting with it. - Conflict handling: When multiple users edit the same element, the first user’s changes are applied, and others are notified of the conflict. ## Flowchart The Blazor Diagram component provides all the standard flowchart shapes as ready-made objects, making it easy to add them to a diagram surface in a single call. - [Learn more about flowchart features](https://www.syncfusion.com/blazor-components/blazor-diagram/blazor-library-flowchart) ## Organizational chart A built-in automatic layout algorithm is specifically designed to arrange parent and child node positions automatically in organizational charts. - [Learn more about organizational chart features](https://www.syncfusion.com/blazor-components/blazor-diagram/blazor-library-organizational-chart) ## Mind map Another built-in automatic layout algorithm is designed for mind map diagrams, allowing users to specify which node should be at the center and which nodes should be placed around it on the diagram surface. - [Learn more about mind map features](https://www.syncfusion.com/blazor-components/blazor-diagram/blazor-library-mind-map) ## UML sequence diagram Visualizes time‑ordered interactions between system participants by modeling lifelines and message exchanges, enabling precise analysis of execution flow, request‑response behavior, and component collaboration. ## Force-directed layout Automatically arranges nodes using attraction and repulsion forces for a neat, organized layout that avoids overlaps and edge crossings. ## Swimlane The Blazor diagram supports Swimlane shapes, which are visual elements in a swimlane diagram representing various components, activities, and responsibilities within a business process. - [Learn more about swimlane features](https://www.syncfusion.com/blazor-components/blazor-diagram/blazor-library-swimlane) ## BPMN Editor The Blazor diagram includes all standard BPMN (Business Process Model and Notation) shapes, which are essential graphical elements used to visualize business processes effectively within a BPMN diagram. ## Containers Containers organize related elements into clearly defined sections, supporting drag‑and‑drop interaction, flexible layouts, independent styling, and grouped event handling to improve UI clarity, consistency, and overall user experience. ## Nodes Visualize any graphical object using nodes, which can be arranged and manipulated simultaneously on a Blazor diagram page. With nodes, users can: - Use many predefined standard shapes. - Create and add custom shapes easily. - Fully customize the appearance of a node. - Design a node UI template and reuse it across multiple nodes. ## Connectors A connector represents a relationship between two nodes. Some of its key features, such as connector types, bridging, and more, are listed below. ### Types The Blazor Diagram component offers straight, orthogonal, polyline, and curved connector types. Choose any of these based on the type of diagram or the relationships between the connected nodes. ### Routing Orthogonal connectors navigate the shortest and most efficient path to prevent overlapping with neighboring nodes. ### Bridging or line jumps Use bridging (line jumps) to illustrate a connector’s route, making it easier to see where connectors overlap in a dense diagram. ### Arrowheads Use various types of predefined arrowheads to illustrate flow direction in flowchart diagrams, and also create custom arrowheads if needed. ### Appearance Like nodes, the connector’s look and feel can also be customized. The Blazor Diagram component provides a rich set of properties to customize connector color, thickness, dash and dot appearance, rounded corners, and even decorators. ### Avoid connector overlap Automatically adjusts connector paths to prevent visual overlap, ensuring clear, distinct routing in complex diagrams. Enhances readability, reduces clutter, and maintains clean connector separation for improved user understanding. ## Ports (connection points) Attach connectors to specific locations on a node using various shapes of ports or connection points, and customize the visibility and appearance of these ports. ## Labels Additional information can be shown by adding text or labels on nodes, connectors, and swimlanes. ### Edit Add and edit text at runtime, and mark it as read-only if it should not be edited. ### Multiple labels Add any number of labels and align each one individually. ### Alignment Labels include sophisticated alignment options: place them inside or outside a node, or at the source or target end of a connector. Automatically align labels when a node or connector moves. ## Interactive features Use interactive features to improve the editing experience of a Blazor diagram at runtime. Furthermore, users can easily edit a Blazor diagram using mouse, touchscreen, or keyboard interfaces. ### Select and drag Select one or more nodes and connectors, then drag the selected objects and edit them using thumbs or handlers. ### Resize Resize a node in eight different directions and lock its aspect ratio to maintain its shape. Additionally, resize multiple objects simultaneously. ### Rotate Rotate the selected nodes from 0 to 360 degrees. ### Undo and redo The undo and redo commands allow users to easily correct recent changes or mistakes. ### Clipboard Cut, copy, paste, or duplicate selected objects within and across Blazor diagrams. ### Z-order When multiple objects overlap, the z-order determines which object is on top and which is on the bottom. ### Snap Precisely align nodes, connectors, and annotations while dragging them by snapping to the nearest gridlines or objects. ### Grouping Users can combine multiple nodes into a group and then interact with them as a single object. Nested groups are also possible. ### Quick commands Frequently used commands like delete, connect, and duplicate can be shown as buttons near a selector. This makes it easy for users to quickly perform those operations instead of searching for the correct buttons in a toolbox. ## Automatic layout The Blazor Diagram control provides an automatic layout algorithm that arranges nodes based on predefined layout logic. It includes built-in support for organizational chart layouts, hierarchical tree layouts, complex hierarchical tree layouts, mind map layouts, and radial tree layouts. ## Symbol palette Includes a gallery of stencils, reusable symbols, and nodes that can be dragged onto the surface of a Blazor diagram. ## Overview panel The overview panel enhances the navigation experience when exploring large diagrams by displaying a small preview of the full diagram page, which allows users to zoom and pan within it. ## Rulers Rulers allow users to measure the distance from the origin of the page to nodes or connectors. This is especially useful in creating scale models. ## Drawing tools Interactively draw all kinds of built-in nodes and connect them using connectors by simply clicking and dragging on the drawing area. ## Zoom and pan tools View a large diagram closely or get a broader perspective by zooming in and out. Users can also navigate from one region of the diagram to another by panning across the Blazor diagram. ## Exporting A diagram can be exported in various image formats, such as PNG, JPEG, PDF, and SVG. ## Printing Print diagrams directly from the browser. Users can also customize the page size, orientation, and margins, and fit a diagram to a single page. ## Serialization Save the state of the Blazor diagram in JSON format and load it later for further editing using the serializer. ## Miscellaneous In addition to all the features listed thus far, there are many more that enhance the diagramming experience. ### Gridlines Gridlines provide guidance when trying to align objects. ### Page layout Create a page-like appearance for the drawing surface by adjusting the page size, orientation, and margins. ### Tooltip Use tooltips to provide additional information about a node. ### Context menu Easily map frequently used commands to the context menu. ### Keyboard navigation The Blazor Diagram control ensures that every cell is accessible via the keyboard. Major functions such as sorting, selecting, and editing can be performed using keyboard commands alone, without the need for mouse interaction. This contributes to creating highly accessible applications with this control. ### Developer-friendly APIs Developers can have full control over the UI and behavior of the event calendar through its built-in, developer-friendly APIs, which allow for easy customization of even complex diagram functionalities. Built-in auto layout algorithm 45+ interactive demos ## Other supported frameworks The Diagram is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React Diagram](https://www.syncfusion.com/react-components/react-diagram) - [Angular Diagram](https://www.syncfusion.com/angular-components/angular-diagram) - [JavaScript Diagram](https://www.syncfusion.com/javascript-ui-controls/js-diagram) - [Vue Diagram](https://www.syncfusion.com/vue-components/vue-diagram) ## Supported browsers The Blazor Diagram works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. ### Diagram builder Diagram Builder is a web application which is used to create the diagrams like Flow Chart, process diagrams and more. ### Mind Map maker A mind map, a type of spider diagram, is used to visually organize information around a central concept. It helps show the relationships between groups of information. ### Org Chart creator An organizational chart is a diagram that visually conveys a company’s internal structure by detailing the roles, responsibilities, and relationships between individuals within an entity. ### BPMN editor A business process model and notation (BPMN) diagram is like a flowchart for complex business processes, used for sharing process information across organizations and industries. ### Logic circuit designer Design and simulate digital logic circuits using a wide range of logic gates, input and output components to better visualize and understand how it works, and share your design with others. ### Floor planner Design and plan the layout of a floor or building, including the placement of walls, doors, windows, furniture, and other objects. [Documentation](https://blazor.syncfusion.com/documentation/query-builder/getting-started) [What’s New in Blazor Diagram: 2023 Volume 2](https://www.syncfusion.com/blogs/post/whats-new-blazor-diagram-2023-volume-2) [Quick Overview of Blazor Query Builder Component](https://www.youtube.com/watch?v=SHBj8fQUaIY&t=10s) ##### Blazor Barcode | Customizable Blazor QR Code | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-barcode # Blazor Barcode - Powerful, Feature-Rich QR Code Component - Supports most common 1D and 2D barcodes. - Supports complete customization of a barcode to augment its appearance. - Easy to use and integrate. ## Overview The Blazor Barcode Generator is a light-weight and high-performance component that displays industry-standard 1D and 2D barcodes in Blazor applications. Generated barcodes are optimized for printing and on-screen scanning. The component is designed for ease of use and does not require fonts. ## Customization The Blazor Barcode Generator is highly customizable. You can customize its color (dark or light), height, width, and more. - [Blazor Barcode Customization documentation](https://blazor.syncfusion.com/documentation/barcode/barcodegenerator#customizing-the-barcode-color) ## Labels Display a barcode with or without text and use alignment options. - [Label documentation](https://blazor.syncfusion.com/documentation/barcode/qrcodegenerator#customizing-the-text) ## Barcode symbologies The Syncfusion Blazor Barcode Generator control supports a wide range of barcode symbologies. ### QR code The Quick Response code (QR code) is a two-dimensional barcode. It can efficiently store more information in a smaller space than 1D barcodes. Each barcode can store values up to 7089 characters. It is mostly used for URLs, business cards, and contact information. - [QR Code example](https://blazor.syncfusion.com/demos/barcodes/qr-code?theme=bootstrap4) - [QR Code documentation](https://blazor.syncfusion.com/documentation/barcode/qrcodegenerator) ### Data Matrix A Data Matrix is a two-dimensional barcode. The information is encoded with text or numeric values. Each barcode can store values up to 2335 alphanumeric characters. It is mostly used by couriers and the food industry. - [Data Matrix example](https://blazor.syncfusion.com/demos/barcodes/data-matrix?theme=bootstrap4) - [Data Matrix documentation](https://blazor.syncfusion.com/documentation/barcode/datamatrixgenerator) ### Code 39 Code 39 is a common barcode type used for various labels such as name badges, inventory, and industrial applications. The symbology of the Code 39 character set consists of barcode symbols representing numbers 0-9, upper case letters A-Z, and the space character. - [Code 39 example](https://blazor.syncfusion.com/demos/barcodes/code-39?theme=bootstrap4) - [Code 39 documentation](https://blazor.syncfusion.com/documentation/barcode/barcodegenerator#code39) ### Code 39 Extended Code 39 Extended, as expected, is an extended version of Code 39. In this version, lower characters and special characters are supported. - [Code 39 Extended example](https://blazor.syncfusion.com/demos/barcodes/code-39?theme=bootstrap4) - [Code 39 Extended documentation](https://blazor.syncfusion.com/documentation/barcode/barcodegenerator#code39-extended) ### Code 11 Code 11 is also known as USD-8, high numeric symbology. The character set includes the digits 0-9, a dash symbol ( - ), and start and stop characters. It is commonly used in telecommunications. - [Code 11 documentation](https://blazor.syncfusion.com/documentation/barcode/barcodegenerator#code-11) ### Codabar Codabar is also known as USD-4 and Code 2 of 7. It can encode digits 0-9, six symbols, and start and stop characters. It is even possible to print Codabar codes using typewriter-like impact printers, which allows the creation of many codes with consecutive numbers without having to use a computer. - [Codabar example](https://blazor.syncfusion.com/demos/barcodes/codabar?theme=bootstrap4) - [Codabar documentation](https://blazor.syncfusion.com/documentation/barcode/barcodegenerator#codabar) ### Code 32 The Code 32 is also known as Italian Pharmacode. It has the following structure: The ‘A’ character that is not really encoded, 8 digits for Pharmacode, and 1 digit for Checksum module 10 that is automatically calculated by Barcode Professional. - [Code 32 example](https://blazor.syncfusion.com/demos/barcodes/code-32?theme=bootstrap4) - [Code 32 documentation](https://blazor.syncfusion.com/documentation/barcode/barcodegenerator#code-32) ### Code 93 Code 93 was designed to complement and improve Code 39. It is used to represent the full ASCII character set by using combinations of two characters. Code 93 can encode uppercase letters, numeric digits, and a handful of special characters. - [Code 93 example](https://blazor.syncfusion.com/demos/barcodes/code-93?theme=bootstrap4) - [Code 93 documentation](https://blazor.syncfusion.com/documentation/barcode/barcodegenerator#code-93) ### Code 93 Extended This extends Code 93 to encode the full 128-character ASCII. The characters represented by Code 93 are represented in Code 93 Extended as single barcode characters, but all other characters are represented by a control character plus another character. - [Code 93 Extended documentation](https://blazor.syncfusion.com/documentation/barcode/barcodegenerator#code-93-extended) ### Code 128 This is a very high-density barcode that supports alphanumeric characters. This barcode is used as the basis for many other barcodes, like UCC/EAN, HIBC (health industry barcode), and the blood bank industry. - [Code 128 example](https://blazor.syncfusion.com/demos/barcodes/code-128?theme=bootstrap4) - [Code 128 documentation](https://blazor.syncfusion.com/documentation/barcode/barcodegenerator#code-128) ### UPC - A The Universal Product Code (UPC -A) is a numeric symbology used in retail applications. UPC-A symbols consist of 11 data digits and one check digit. The first digit is a number system digit that normally represents the type of product being identified. - [UPC A example](https://blazor.syncfusion.com/demos/barcodes/upc-a?theme=bootstrap4) - [UPC A documentation](https://blazor.syncfusion.com/documentation/barcode/barcodegenerator#code-128) ## Blazor Barcode Code Example Easily get started with the Blazor Barcode using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor Barcode Example](https://blazor.syncfusion.com/demos/barcodes/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Barcode in Blazor. - razor ## Other supported frameworks Barcode is also available in JavaScript, Angular, React and Vue frameworks that are built from their own TypeScript libraries. Check out the different Barcode platforms from the below links, - [JavaScript Barcode](https://www.syncfusion.com/javascript-ui-controls/js-barcode) - [Angular Barcode](https://www.syncfusion.com/angular-components/angular-barcode) - [React Data Barcode](https://www.syncfusion.com/react-components/react-barcode) - [Vue Barcode](https://www.syncfusion.com/vue-components/vue-barcode) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Smart Rich Text Editor | AI-Powered Editor | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-smart-rich-text-editor # Blazor Smart Rich Text Editor - AI-Powered Content Creation - Smart content suggestions and generation directly within the editor. - Smart commands for tone adjustment, grammar checking, and content refinement. - Real-time streaming responses with multilanguage translation support. - Seamless content insertion and management with full conversation histories. ## Overview The Blazor Smart Rich Text Editor is an AI-enhanced editor that extends the capabilities of Syncfusion’s Blazor Rich Text Editor with intelligent content creation, editing, and optimization features. It seamlessly integrates AI assistance within the editor toolbar, enabling users to generate, refine, and transform content without leaving their editing environment. ## Blazor Smart Rich Text Editor code example Get started with the Blazor Smart Rich Text Editor using a few simple lines of C# code, as demonstrated below. - razor ## Smart AI commands The Smart Rich Text Editor includes a powerful set of built-in AI commands accessible via the Smart Action dropdown in the toolbar. These commands enable content transformation, tone adjustment, style refinement, grammar checking, and multilanguage translation. Commands are fully customizable and support nested grouping for complex command hierarchies, allowing you to tailor the AI assistance to your organizational workflows. ## AI query interface Ask the AI assistant anything directly through the Ask AI prompt input field (activated via Alt+Enter or the Ask AI toolbar button). The AI assistant pop-up displays real-time streaming responses, full conversation histories with save and load functionality, and quick-suggestion chips for fast access to common tasks. Users can regenerate responses, copy results, and insert content directly into their documents with a single click. ## Content transformation Transform selected content with a click using preset AI commands: - Improve content: Enhance clarity and coherence. - Shorten: Reduce verbosity while preserving meaning. - Elaborate: Expand with additional detail and examples. - Summarize: Create concise overviews. - Grammar check: Identify and correct errors. - Change tone: Rewrite in professional, casual, inspirational, or persuasive styles. - Change style: Convert to business, legal, journalistic, or academic writing. - Translate: Support for 8 languages: English, German, Spanish, French, Japanese, Chinese, Hindi, Arabic. ## Custom AI configuration Fully customize the AI assistant experience: - Custom commands: Define your own AI commands with nested groups and persona-specific prompts. - Pop-up sizing: Adjust AI assistant pop-up dimensions (width, height) with CSS units or pixel values. - Banner templates: Add company branding, connection status, or compliance notices. - Toolbar customization: Configure header, prompt, and response toolbars with custom actions. - Predefined prompts: Preload templates and workflow starters for faster content creation. ## Conversation history The Smart Rich Text Editor maintains a conversation history that defaults to 20 entries. This is accessible via the history dropdown in the AI assistant pop-up. Each entry preserves: - Original user prompts. - Time stamp and metadata for regulatory compliance and audit trails. ## Streaming responses Experience real-time AI responses delivered in chunks as they are generated. Responses appear progressively so users can read partial output while generation continues. Users can stop generation mid-stream. The interface shows progress indicators and a stop control. When generation finishes, the final response is rendered for the user. ## Inherited features As a smart component built on Syncfusion’s Blazor Rich Text Editor, the Smart Rich Text Editor inherits all editor features, including rich formatting (bold, italic, underline, superscript, subscript), paragraph formatting (headings, lists, blockquotes, code blocks), table insertion and editing with cell formatting, image and media embedding, link management, Markdown and HTML support, custom toolbars with quick formatting options, and slash menu commands. - [Rich Text Editor documentation](https://blazor.syncfusion.com/documentation/rich-text-editor/) ## Built-in themes The Smart Rich Text Editor includes several built-in themes: Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and high contrast. Users can customize these built-in themes or create new ones by overriding Sass variables or using the Theme Studio application. - [Theme Studio application](https://blazor.syncfusion.com/documentation/appearance/theme-studio) ## Accessibility The Smart Rich Text Editor is designed with accessibility in mind, ensuring compliance with the latest web accessibility standards, such as WAI-ARIA. It supports full keyboard navigation (including Alt+Enter for AI prompt), screen reader compatibility, and high-contrast mode, making the component usable for individuals with disabilities. ## Other supported frameworks The AI assistant feature in the Rich Text Editor is available for the React, Angular, JavaScript, and Vue frameworks. Explore it’s platform-specific options through the following links: - [React AI assistant in Rich Text Editor](https://www.syncfusion.com/react-components/react-rich-text-editor) - [Angular AI assistant in Rich Text Editor](https://www.syncfusion.com/angular-components/angular-rich-text-editor) - [JavaScript AI assistant in Rich Text Editor](https://www.syncfusion.com/javascript-ui-controls/js-rich-text-editor) - [Vue AI assistant in Rich Text Editor](https://www.syncfusion.com/vue-components/vue-wysiwyg-rich-text-editor) ## Supported browsers The Blazor Smart Rich Text Editor works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [Documentation](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/getting-started) ##### Blazor Chart Wizard - Configure Charts in Minutes | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-chart-wizard # Blazor Chart Wizard - Fast, Guided Chart Configuration - Quickly build charts with guided steps for selecting series types, binding data, and applying formatting. - Configure all chart elements including axes, series, legends, tooltips, and export options from a unified and intuitive interface. - Generate production‑ready chart configurations designed with built‑in accessibility features and responsive behavior. ## Overview The Blazor Chart Wizard delivers a streamlined, guiding interface for building charts with ease and precision. It walks users through selecting chart types, mapping data fields to series, applying formatting and styles, and configuring interaction, exporting, and print options. Designed to support both beginners and advanced users, it offers intuitive guidance for fine‑grained control, enabling the creation of fully customized, production‑ready visualizations. ### Guided configuration The Chart Wizard streamlines chart setup with a clear, step‑by‑step workflow that accelerates creation and helps prevent configuration errors. ### Rich formatting Effortlessly apply themes, color palettes, data labels, markers, and series‑level styling without writing code. ### Data binding Bind charts to in-memory collections, remote data sources, or preprocessed datasets, and quickly map fields to series. ## Blazor Chart Wizard code example The following example demonstrates a typical Chart Wizard workflow: selecting a chart type (e.g., column, line, area, pie), binding the chart to a dataset, mapping x- and y-fields to series. The example also shows how to persist the Chart Wizard configuration and how to programmatically load and apply saved templates. [Blazor Chart Wizard example](https://blazor.syncfusion.com/demos/chart-wizard/default-functionalities?theme=fluent2) - razor ## Chart Settings The ChartSettings component in the Chart Wizard allows you to configure core data and visualization options: - SeriesType: Specifies the chart type (line, column, bar, area, pie, scatter, etc.). - DataSource: Sets the chart’s data source. - CategoryFields: Fields used as categories. - SeriesFields: Fields plotted as series. ## Guided chart configuration The Chart Wizard guides you through the most important choices — chart type, data binding, and formatting — so you can build a chart that looks right and reads clearly on the first try. You can configure the following options: - Chart type - Data binding - Series options - Axes - Data labels - Colors - Tooltips - Legends ## Print and export Generate printable and downloadable chart outputs with consistent formatting in the Chart Wizard. - Export as PNG, JPEG, SVG, PDF. - Print support. - Batch export. - Style preservation. ## Save and load Persist and restore chart configurations across different sessions in the Chart Wizard using JSON serialization. - SaveChart: Serializes chart wizard state. - LoadChartAsync: Loads saved JSON configuration. ### Keyboard navigation Blazor Chart Wizard ensures that every element is keyboard accessible. Major features like selection, highlight, tooltip, legend collapse and zooming and panning can be performed using keyboard commands alone; no mouse interaction is required. This helps in creating highly accessible applications using this component. ### Screen reader Blazor Chart Wizard views have complete WAI-ARIA accessibility support. This UI includes high-contrast visual elements, helping people with visual impairments have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers. ### Right to left (RTL) Right-to-left rendering allows displaying the text and layout of the Blazor Chart Wizard from right to left. This improves the user experience and accessibility for RTL languages. [Documentation](https://blazor.syncfusion.com/documentation/chart-wizard/getting-started) [Feature requests and bug reports](https://www.syncfusion.com/feedback/blazor-components) ##### Blazor Bullet Chart and Graph Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-bullet-chart # Blazor Bullet Charts - Beautiful and Interactive - Flexible and completely customizable. - Replacement for meters and gauges. - Supports features such as multiple measures, ranges, labels, title, subtitles, etc. ## Overview The Blazor Bullet Chart is used to visually compare measures, like the commonly used bar chart. The bullet chart displays one or more measures and compares them with a target value. You can also display the measures for a range of performance such as poor, satisfactory, and good. ## Orientation Position the bullet chart in either vertical or horizontal orientation. This is helpful when viewing the bullet chart on mobile devices. ## Right to left Render the Blazor Bullet Chart control either in LTR or RTL direction. - [Right to left example](https://blazor.syncfusion.com/demos/bullet-chart/right-to-left) ## Target and Actual Bar Actual bar that runs along the bullet chart denote the current value and target bar runs perpendicular to the actual bar. - [Target bar example](https://blazor.syncfusion.com/demos/bullet-chart/bar-customization) ## Multiple measures Render multiple measure bars as well as multiple target bars to allow comparison of several measures at once. - [Multiple measures example](https://blazor.syncfusion.com/demos/bullet-chart/multiple-data) ## Qualitative ranges A range in a Blazor Bullet Chart helps measure the performance of data against a qualitative state by observing the distance between each range. Each color of the range represents a quality such as good, bad, and acceptable. - [Qualitative ranges example](https://blazor.syncfusion.com/demos/bullet-chart/customization) - [Qualitative ranges documentation](https://blazor.syncfusion.com/documentation/bullet-chart/ranges) ## Qualitative ticks Display scales with two types of ticks. Major ticks are the primary scale indicators, and minor ticks are the secondary scale indicators that fall between the major ticks. You can apply a range’s color to both minor and major ticks that are associated with it. ## Labels The labels display the numeric values of the major ticks in the range of the scale. You can apply a range’s color to the labels that are associated with it. - [Labels documentation](https://blazor.syncfusion.com/documentation/bullet-chart/data-label) ## Tooltips Display details about the measures through a tooltip that appears when hovering the mouse over the measures. - [Tooltip documentation](https://blazor.syncfusion.com/documentation/bullet-chart/tool-tip) ## Titles and subtitles Titles and subtitles in the Blazor Bullet Chart display additional information about the chart. - [Titles and subtitles documentation](https://blazor.syncfusion.com/documentation/bullet-chart/title) ## Text placement Place the text elements, such as title and subtitle text, at any side of the scale. The text elements will trim if they overlap with the scale. ## Blazor Bullet Chart Code Example Easily get started with the Blazor Bullet Chart using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor Bullet Chart Example](https://blazor.syncfusion.com/demos/bullet-chart/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Bullet Chart in Blazor. - razor ## Other supported frameworks Bullet Chart is also available in JavaScript, Angular, React and Vue frameworks that are built from their own TypeScript libraries. Check out the different Bullet Chart platforms from the below links, - [JavaScript Bullet Chart](https://www.syncfusion.com/javascript-ui-controls/js-bullet-chart) - [Angular Bullet Chart](https://www.syncfusion.com/angular-components/angular-bullet-chart) - [React Data Bullet Chart](https://www.syncfusion.com/react-components/react-bullet-chart) - [Vue Bullet Chart](https://www.syncfusion.com/vue-components/vue-bullet-chart) [Documentation](https://blazor.syncfusion.com/documentation) ##### Mind Map | Blazor Diagram Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-diagram/blazor-library-mind-map ## Overview Mind mapping is a highly effective way to brainstorm and organize your thoughts without worrying about order and structure. It presents information in a way where the central idea is placed in the middle and associated topics are arranged around it. The Syncfusion Blazor Diagram library offers various features to make creating mind map diagrams easy. ## Visualize mind maps from data sources The Blazor Diagram library provides support to visualize mind maps from external data sources. In addition, data in any format can be easily converted, mapped, and consumed in the diagram by setting a few properties. ## Automatic layout algorithm A built-in automatic layout algorithm specifically made for mind map diagrams allows you to define which topic (shape or node) should be the center of the diagram, and which subtopics (shapes or nodes) should be placed around it in the diagram surface. ## Appearance You can easily customize the topic and subtopic appearances by adding backgrounds, border styles, text styles, and images. Built-in auto layout algorithm 45+ interactive demos ##### Organizational Chart | Blazor Diagram Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-diagram/blazor-library-organizational-chart ## Overview The traditional organizational chart (often called an org chart or organization chart) is the graphical representation of an organization’s structure. Its purpose is to illustrate the relationships and relative ranks of positions within the organization. The Syncfusion Blazor Diagram library offers a variety of features to easily create organizational charts, embed custom templates to diagram elements, and assist with element layout, orientation, and alignment. ## Visualize organizational charts from data sources The Blazor Diagram library supports visualizing an organizational chart from an external data source. In addition, data in any format can be easily converted, mapped, and consumed in the diagram by setting a few properties. ## High-performance automatic layout algorithm The built-in automatic layout algorithm is specifically designed for organizational charts to arrange the parent and child node positions automatically. ## Assistants The Blazor Diagram library supports defining assistants in the organizational chart. Assistants are child items that have a different relationship with the parent node. They are laid out in a dedicated part of the tree. ## Orientation Use different orientation options such as top to bottom, left to right, right to left, and bottom to top to arrange the organizational chart based on your requirements. ## Leaf-level alignment Arrange the leaf-level nodes in the organization chart to be aligned to the left, right, or center horizontally, or to the top, bottom, or middle vertically. ## Spacing The Blazor Diagram library supports customizing the spacing between each level in both horizontal and vertical directions, and allows you to define a margin around the organizational chart. Built-in auto layout algorithm 45+ interactive demos ##### Blazor Flowchart | Diagram Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-diagram/blazor-library-flowchart ## Overview Blazor flowchart diagram is a visual representation of a process in which each step in the process is represented by a different shape and contains a short description of the process short description. The Blazor Diagram library offers various features to build flowcharts with ease. ## Flowchart shapes The Blazor Diagram library provides the shapes required to build a flowchart diagram as ready-made objects, making it is easy to add them to a diagram surface in a single call. ## Connector arrows Arrows or connectors represent the relationship or direction of flow between two flowchart shapes. ### Arrow types Straight, orthogonal, and curved connector types are provided. You can choose any of these based on the relationship between the connected shapes. ### Arrowheads The Blazor Diagram library provides predefined arrowheads to illustrate flow direction in a flowchart diagram. You can also build your own custom arrowheads. ## Annotations You can add descriptions to the flowchart shapes and connectors using annotations, and modify descriptions by pressing F2 or double-clicking them. ## Connection points (ports) Connect to specific places on a shape through different types of ports or connecting points. ## Interactive features Use interactive features to improve the editing experience of a flowchart diagram at runtime. You can easily edit a diagram with mouse, touchscreen, or keyboard interfaces. ### Select, drag, resize, rotate Objects can be selected and then dragged, resized, or rotated. ### Snap Precisely align shapes, connectors, and annotations easily while dragging just by snapping to the nearest gridlines or objects. ### Undo and redo Don’t worry when you edit by mistake—undo and redo commands help to easily correct recent changes. ## Serialization Save your diagram state in JSON format and load it back later for editing using the serializer. Built-in auto layout algorithm 45+ interactive demos ##### Blazor Swimlane | Diagram Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-diagram/blazor-library-swimlane ## Overview Blazor swimlane diagram is a powerful visualization tool that illustrates the intricate connections between various components of a business process and the corresponding departments responsible for each stage. By highlighting the logical relationships among different activities, it provides a clear and comprehensive overview, simplifying the comprehension of the process dynamics and the associated departmental responsibilities. ## Swimlane Shapes The Blazor Diagram library provides the swimlane shapes, making it is easy to add them to a diagram surface in a single call. ## Header Editing The diagram provides support to edit swimlane headers at runtime. You can achieve the header editing by double-clicking on it. Double-clicking the header label will enable the editing mode. ## Swapping Lanes can be swapped by dragging the lanes over another lane. The helper should indicate the insertion point when lane swapping. ## Resizing Lane and Phase Lane/Phase can be resized in the bottom and right direction based on orientation. ## Serialization Save your diagram state in JSON format and load it back later for editing using the serializer. Built-in auto layout algorithm 45+ interactive demos ##### Blazor Card - Material-Style Cards Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-card # Blazor Card - Responsive HTML5/CSS3 Cards Component - Fully customizable container includes header, footer, multimedia, images, action buttons, links, and more. - Flexible card design for creating your own real-world cards such as business cards, weather cards, news feed cards, stacked cards, reveal cards, and tile views. ## Overview The Blazor Card is a container-based user interface (UI) control built using HTML5/CSS3 markup and styles for displaying organized content. The Blazor card design is widely used in social media and e-commerce sites such as Facebook, Google Now, Amazon, Pinterest, and more. The Blazor cards are mostly used as entry points to more detailed views, such as in a gallery or dashboard. ## Card UI elements Blazor Cards consist of various UI elements, including headers, sub-headers, images, multimedia, action buttons, and dividers. ## Card types Construct various card designs: business cards, weather cards, graph cards, avatar cards, stacked cards, reveal cards. Because it is a fully customizable container, you can manipulate it into whatever you like. ## Horizontal Card By default, all the card elements are aligned vertically one after the other as in the DOM. You can align the elements horizontally, instead, by using the Orientation property. - [Horizontal Card documentation](https://blazor.syncfusion.com/documentation/card/horizontal) ## Responsive web design The Blazor Card component offers much flexibility, allowing it to adapt easily to almost all touch devices. ## Action buttons The entire Blazor Card UI can be set up as a clickable action item, or specific action buttons can be added to cards. ## Easy integration Users can easily integrate other Blazor UI components inside the cards to create avatar cards, graph cards, and more. ## Themes The Blazor Card component has several built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, and High Contrast. Users can customize any of these built-in themes, or create new ones to build their own desired look and feel, either by simply overriding Sass variables or using our Theme Studio application. ## Other supported frameworks Card is also available in JavaScript, Angular, React and Vue frameworks that are built from their own TypeScript libraries. Check out the different Card platforms from the below links, - [JavaScript Card](https://www.syncfusion.com/javascript-ui-controls/js-card) - [Angular Card](https://www.syncfusion.com/angular-components/angular-card) - [React Card](https://www.syncfusion.com/react-components/react-card) - [Vue Card](https://www.syncfusion.com/vue-components/vue-card) ## Blazor Card Code Example Easily get started with the Blazor Card using a few simple lines of C# code as demonstrated below. Also explore our [Blazor Card demo](https://blazor.syncfusion.com/demos/card/basic-card?theme=bootstrap5) that shows you how to render and configure the Card in Blazor. - razor [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Kanban Board | Manageable Task Board | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-kanban-board # Blazor Kanban Board - Manage Tasks with Swimlane - Visual organization and prioritization of your tasks with a transparent workflow. - Efficient control to manage software and product development, project management, and task planner using swimlanes, cards, WIP validations, and more. - A rich set of built-in functionalities such as data binding, swimlane, templating for card, scrolling, drag-and-drop, stacked header, WIP validations, responsiveness, various built-in themes, and much more. ## Overview The Blazor Kanban Board is a task scheduling component that provides clear user interface representation to manage multiple stages of work. It is widely used in various real-time applications such as task scheduler, project management, software or product development, manufacturing process, personal task management, and more. ## Blazor Kanban Board Code Example [Easily get started with the Blazor Kanban Board](https://blazor.syncfusion.com/documentation/kanban/getting-started) using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor Kanban Board Example](https://blazor.syncfusion.com/demos/kanban/overview?theme=bootstrap5) that shows you how to render and configure the Kanban Board in Blazor. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/BtrJXsUiMYcrKzqX) - razor ## Data binding Bind data seamlessly with various local and remote data sources, such as lists, RESTful services, OData services, WCF services, Observable Collection, ExpandoObject, and Dynamic Object. Blazor Kanban loads data on demand by default reducing transfer and load times. Proper field mapping is mandatory when binding Kanban to the data sources with different field names. - [Data binding documentation](https://blazor.syncfusion.com/documentation/kanban/data-binding) ## Workflow The Kanban restricts or allows card transitions from one column to another to maintain a controlled workflow process. - [Workflow documentation](https://blazor.syncfusion.com/documentation/kanban/workflow) ## Work in progress (WIP) limits Users can set limits to the card count at each stage of Kanban workflow to avoid working on multiple tasks. Kanban columns visually change its appearance when validation fails. - [WIP validation documentation](https://blazor.syncfusion.com/documentation/kanban/validation) ## Flexible layout By default, Kanban has a simple layout with cards and columns. But users can create complex Kanban boards based on their application needs and integrate with other teams in an organization. - [Flexible layout documentation](https://blazor.syncfusion.com/documentation/kanban/responsive-mode#layouts) ## Card options A card is the main element of Blazor Kanban Board that provides clear representation of tasks and task flows across various stages. ### Customizable cards Change the look and feel of Kanban cards by customizing their default appearance and style using any HTML or CSS element. ### Drag and drop cards All cards can be dragged and dropped across columns, within columns, swimlane rows, or Kanban to an external source, and vice versa to modify the status of cards. - [Drag and drop cards documentation](https://blazor.syncfusion.com/documentation/kanban/drag-and-drop) ### Selection Easily select multiple cards using mouse, keyboard, or touch interfaces. You can also make multiple selection of cards by pressing the Shift key. - [Card selection documentation](https://blazor.syncfusion.com/documentation/kanban/cards#selection) ## Columns The Blazor Kanban Board divides its layout as columns to visualize the different stages of work,. for example, to-do, validate, in-progress, testing, and completed. - [Columns documentation](https://blazor.syncfusion.com/documentation/kanban/columns) ### Expand/Collapse columns Built-in support to expand and collapse columns by interaction and programmatically. Users can also control the collapsible behavior on page load. ### Multi-key Users can map multiple keys to a single column to group similar columns. i.e., development column has implementation, review, and testing. - [Multi-key documentation](https://blazor.syncfusion.com/documentation/kanban/columns#multi-key-mapping) ## Card editing Blazor Kanban provides support to create, read, update, and delete operations (CRUD) on cards. In addition to built-in editing through dialog, users can create a template to suit their application needs. Editing operations are performed with the help of a data manager. - [Card editing documentation](https://blazor.syncfusion.com/documentation/kanban/dialog) ## Stacked header Blazor Kanban allows you to add additional headers to group the logically related columns above the column header in a stacked manner. - [Stacked header documentation](https://blazor.syncfusion.com/documentation/kanban/columns#stacked-headers) ## Swimlanes Swimlanes are horizontal categorizations of cards on the Kanban board. It is used for grouping of cards, which brings transparency to the workflow process. - [Swimlane documentation](https://blazor.syncfusion.com/documentation/kanban/swimlane) ## Frozen rows The Swimlane frozen rows option makes the rows always visible at the top when scrolling the content. It is mainly used to show corresponding swimlane rows. - [Frozen rows documentation](https://blazor.syncfusion.com/documentation/kanban/swimlane#enable-frozen-rows) ## Tooltip Display card information with a default tooltip or customized tooltip template. - [Tooltip documentation](https://blazor.syncfusion.com/documentation/kanban/tooltip) ## Templating Users can customize the UI elements of Kanban using templates i.e., column header, cards, swimlane header, and tooltip. - [Custom card template example](https://blazor.syncfusion.com/demos/kanban/card-template/) ## Developer-friendly APIs Developers can have full control over the UI and behavior of the Blazor Kanban Board through its built-in, developer-friendly APIs. The simple and extensible APIs allow you to customize Kanban functionalities with ease. ## Built-in themes Several built-in SASS-based themes are available such as Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, and High Contrast. Simplify theme customization either by overriding the existing SASS styling or creating custom themes by using the Theme Studio application. - [Theme Studio application](https://blazor.syncfusion.com/documentation/appearance/theme-studio) ## Right to left (RTL) Blazor Kanban allows you to render its layout, columns, and cards from right to left to improve the user experience and accessibility for RTL languages. - [RTL documentation](https://blazor.syncfusion.com/documentation/kanban/localization#right-to-left-rtl) ## Responsive and touch-friendly The Blazor Kanban board has a highly responsive layout and a finely optimized design for desktops, touch screens, and smart phones. ### Touch support User-friendly touch gestures and an interactive UI design on Kanban help provides the best user experience. ### Adaptive UI The Kanban user interface adapts automatically to mobile and desktop devices. This helps the application to scale elegantly across all form factors without any additional effort. ## Localization Localize all the static strings used in the user interface of the Blazor Kanban component using the localization (l10n) library. - [Localization documentation](https://blazor.syncfusion.com/documentation/kanban/localization) ## Other supported frameworks The Kanban Board is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React Kanban](https://www.syncfusion.com/react-components/react-kanban-board) - [Angular Kanban](https://www.syncfusion.com/angular-components/angular-kanban-board) - [JavaScript Kanban](https://www.syncfusion.com/javascript-ui-controls/js-kanban-board) - [Vue Kanban](https://www.syncfusion.com/vue-components/vue-kanban-board) ## Supported browsers The Blazor Kanban Board works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [Documentation](https://blazor.syncfusion.com/documentation/kanban/getting-started) The Blazor Kanban blog posts will guide you in building your first app with this Blazor components. They provide problem-solving strategies, describe features and functionalities, announce new feature releases, explain best practices, and showcase example scenarios. Explore our latest posts on our blog and tutorial video channels for Blazor Kanban updates. [AI-Powered Blazor Kanban: Integration with Microsoft Extension Packages2](https://www.syncfusion.com/blogs/post/microsoft-ai-powered-blazor-kanban) [Key Features of the Syncfusion Blazor Kanban Board](https://www.syncfusion.com/blogs/post/key-features-of-the-syncfusion-blazor-kanban-board) ##### Blazor ProgressBar | Responsive Circular ProgressBar | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-progressbar # Blazor ProgressBar - Simple, Elegant ProgressBar Component - Linear or circular progress bars provide elegance in representing progression. - Secondary progress can be shown like YouTube buffering. - Indeterminate state options allow you to show the progress interruption. ## Overview The Blazor ProgressBar indicates the progress of a task with customizable visuals. It includes features to visualize progress in rectangular and circular shapes, determinate and indeterminate states, segments, and customized ranges in different colors. It also supports animation. ## Types Visualize progress in different shapes (rectangle, circle, and semi-circle) to give a unique appearance to your app design. ## States Visualize the progress in different modes. ### Determinate Use the determinate mode progress bar when progress can be estimated. ### Indeterminate Use the indeterminate mode progress bar when progress cannot be estimated or calculated. It can be combined with determinate mode to let users know that the app is estimating the progress before the actual progress starts. ### Buffer Uses a secondary progress indicator when the primary task depends on the secondary task. This will allow users to visualize both primary and secondary tasks’ progress simultaneously. ## Segments Avoid writing several lines of code to create and position multiple progress bars: just divide a progress bar into multiple segments using a single API to visualize the progress of multiple sequential tasks. ## Angle Customize the start and sweep angles of circular progress to give a unique style to the circular progress bar. ## Custom content Add any view to the center of a circular progress bar to: indicate the completion of the progress; add start, pause, or cancel buttons to control the progress interactively; add an image that indicates the actual task in progress; add custom text that conveys the progress. ## Visualize multiple ranges Along with visualizing the progress of a task, users can also visualize multiple ranges with gradient colors or solid colors that are mapped to each range to enhance the readability. ## Appearance The appearance of a Blazor progress bar is highly customizable. ### Thickness Tweak the thickness of the track and progress indicator to render the Blazor progress bar with different appearances. ### Colors Apply appealing colors to the track and progress indicator to match your app theme. ### Corner radius The corner radius of the Blazor progress bar can be customized. ## Blazor ProgressBar Code Example Easily get started with the Blazor ProgressBar using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor ProgressBar Example](https://blazor.syncfusion.com/demos/progress-bar/linear?theme=bootstrap5) that shows you how to render and configure the progress bar in Blazor. - razor ## Other supported frameworks ProgressBar is also available in JavaScript, Angular, React and Vue frameworks that are built from their own TypeScript libraries. Check out the different ProgressBar platforms from the below links, - [JavaScript ProgressBar](https://www.syncfusion.com/javascript-ui-controls/js-progressbar) - [Angular ProgressBar](https://www.syncfusion.com/angular-components/angular-progressbar) - [React ProgressBar](https://www.syncfusion.com/react-components/react-progressbar) - [Vue ProgressBar](https://www.syncfusion.com/vue-components/vue-progressbar) [Documentation](https://blazor.syncfusion.com/documentation) ##### Columns | Blazor Gantt Chart | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-gantt-chart/column ## Overview Columns define the schema of a data source in Blazor Gantt Chart component. It supports formatting, column definitions, column chooser, column menu, column reordering, and other important features. The operations such as sorting, filtering, and searching can be performed based on column definitions ## Define columns You can define columns explicitly to display the needed items in a Gantt Chart. You can also enhance the appearance of columns by setting the header text, text alignment, cell value format, and width. ## Cell Attributes Users can decorate each cell element of a Gantt Chart with their own attributes by customizing styles, add additional class names, etc. ## Resize Column resize allows changing column width on the fly by simply dragging the right corner of the column header. A scroll bar appears when the Gantt Chart content width exceeds the element width. - [Example for column resize](https://blazor.syncfusion.com/demos/gantt-chart/column-resizing) ## Reorder Reorder Gantt Chart columns either through user interaction or programmatically. Simply dragging a column header into the desired column position will reorder the columns of a Gantt Chart. - [Example for column reorder](https://blazor.syncfusion.com/demos/gantt-chart/column-reordering) ## Cell styling The ASP.NET Core Gantt Chart supports customization of cell styles by using CSS or programmatically ## Column chooser The column chooser provides a list of column names paired with check boxes that allows the user to toggle visibility on the fly. This helps the users to control the column visibility through an interactive UI. - [Column chooser documentation](https://blazor.syncfusion.com/documentation/gantt-chart/columns#column-chooser) ## Column menu Allows performing various column-based actions with the help of Blazor Gantt Chart column menu. Menu items can also be customized to list only the preferred actions. - [Example for column menu](https://blazor.syncfusion.com/demos/gantt-chart/column-menu) ##### Blazor Spinner - Non-Interactive Progress Indicator | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-spinner # Blazor Spinner - Simple, Animated Circular Progress Indicator - Show indeterminate progress indicators. - Utilize built-in support for theme-based spinners. - Customize spinners’ appearance, labels, size, type, z-index, and overlay. ## Overview The Blazor Spinner component denotes when long-running tasks are ongoing, tasks for which there is no information about their progress. The component provides circular progress indicators without interaction capabilities. To show users the progress information of a task, the [Blazor ProgressBar](https://www.syncfusion.com/blazor-components/blazor-progressbar) component should be used, instead. ## Blazor Spinner code example Easily get started with the Blazor Spinner using a few simple lines of C# code as demonstrated below. Also explore our [Blazor Spinner example](https://blazor.syncfusion.com/demos/spinner/overview?theme=bootstrap5) that shows you how to render and configure the Blazor Spinner. - razor ## Built-in types Several built-in, Sass-based themes are available: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, and high contrast. Simplify theme customization by either overriding the existing Sass styling or creating custom themes using the Theme Studio application. - [Blazor themes](https://blazor.syncfusion.com/documentation/appearance/themes) ## Descriptive labels Include labels with the Blazor Spinner component that give additional, meaningful information about the task currently running. ## Spinner integration The Spinner component can be rendered with other Blazor components, such as the Tab component. To render the Spinner inside the Tab component, the Spinner is set as a child of the Tab component, and the Spinner can be shown or hidden when switching between tabs. - [Spinner documentation](https://blazor.syncfusion.com/documentation/spinner/spinner-integration) ## Various sizes Multiple size options for the Blazor Spinner let developers uphold visual consistency across their applications. By coming in large, medium, and small sizes, this component seamlessly adjusts to various design needs and loading situations to help integrate it within other Blazor components. ## Templates Templates in the Blazor Spinner component provide a robust mechanism for users to create loading elements that seamlessly integrate with their applications. The flexibility, reusable, and customization options enhance the development experience and result in visually appealing and consistent loading experiences across Blazor applications. - [Style and Appearance documentation](https://blazor.syncfusion.com/documentation/spinner/style) ## Visibility You can control the Blazor Spinner component’s visibility easily through a two-way binding property and asynchronous methods. ## Customization The default appearance of the Blazor Spinner component can be customized by changing its color and stroke width. Also, you can set the z-index for Blazor spinners dynamically based on application scenarios. - [Customization documentation](https://blazor.syncfusion.com/documentation/spinner/customization) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Button Group Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-button-group # Blazor Button Group - Highly Customizable UI Component - Support for nesting with a dropdown menu and split button. - The number of buttons that can be selected can be restricted with single or multiple selection modes. - Industry-standard themes are included: Material, Fabric, and Bootstrap. ## Overview The Blazor Button Group is a series of buttons aligned vertically or horizontally. It has several built-in features such as predefined styles, selection, nesting, rounded corners, RTL, and UI customization. ## Orientation Align the Blazor button group component either in vertical or horizontal orientation. ## Selection Based on the type of selection, you can select one or more buttons from a group. ### Single selection Select one button from a group. ### Multiselection Select one or more buttons from a group. ## Split and Drop-down buttons Drop-down and split buttons in the Blazor Button Group component let you nest buttons. ## Predefined styles Several predefined styles of button are available in the Blazor button group: - Primary - Success - Info - Warning - Danger ## Rounded button group Take advantage of CSS styling to give button corners a rounded look. ## Multicolor buttons Differentiate each button in a group with different colors based on the actions performed with them. ## Customization Customize the Blazor Button Groups with icons and outline. The size of the button can be changed. You can also disable a particular button or all of them. ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility to work with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing keyboard interaction. - Follows [WCAG 2.0](https://www.w3.org/TR/WCAG20/)standards in the design of the UI element visuals such as foreground color, background color, line spacing, text, and images. - Supports right-to-left (RTL) text direction for users working in languages like Hebrew, Arabic, and Persian. ## Built-in themes The Blazor Button Group supports several built-in themes such as Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize one of these built-in themes or create new themes to achieve their desired look and feel by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Blazor Button Group Code Example Easily get started with the Blazor Button Group using a few simple lines of C# code, as demonstrated below. Also, explore our [Blazor Button Group Example](https://blazor.syncfusion.com/demos/buttons/button-group?theme=bootstrap5), that shows you how to render and configure the button group in Blazor. - razor ## Other supported frameworks Button Group is also available in Angular, React, Vue and JavaScript frameworks that are built from their own TypeScript libraries. Check out the different Button Group platforms from the links below, - [JavaScript Button Group](https://www.syncfusion.com/javascript-ui-controls/js-button-group) - [Angular Button Group](https://www.syncfusion.com/angular-components/angular-button-group) - [React Button Group](https://www.syncfusion.com/react-components/react-button-group) - [Vue Button Group](https://www.syncfusion.com/vue-components/vue-button-group) [Documentation](https://blazor.syncfusion.com/documentation) ##### High Performance Blazor DataGrid | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-datagrid/performance ## Overview The Blazor DataGrid has optimized design for high-performance. The Blazor DataGrid loads millions of records in just a second without any performance degradation with the help of row and column virtualization. The WebAssembly in Blazor DataGrid helps avoid unnecessary rendering of components. ## Virtualization Blazor Grid Virtualization is a technique for limiting UI rendering to just the parts that are currently visible. The Blazor Grid Load on Demand helps load the data as needed instead of loading all data at once. This functionality helps to improve performance on component initial rendering time. ### Row Virtualization Row Virtualization in Blazor DataGrid allows loading and rendering rows only in the content viewport. It is an alternative way of paging where the data will be loaded while scrolling vertically. Enable cell placeholder during virtualization feature helps to show loading placeholder on the cells while loading the new data. - [Row virtualization documentation](https://blazor.syncfusion.com/documentation/datagrid/virtualization#row-virtualization) - [Enable cell placeholder during virtualization documentation](https://blazor.syncfusion.com/documentation/datagrid/virtualization#enable-cell-placeholder-during-virtualization) ### Column Virtualization Column Virtualization in Blazor DataGrid allows the columns of the data source to be virtualized and renders them in the viewport. You can scroll horizontally to view more columns. - [Column virtualization documentation](https://blazor.syncfusion.com/documentation/datagrid/virtualization#column-virtualization) ##### Blazor Data Grid Excel Export | Export Hierarchical Data | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-datagrid/excel-export ## Exporting Font & Style Customization Users can customize each cell’s font style, size, colors, and more when exporting the Data Grid to Excel. This helps create visually appealing and tailored Excel documents. - [Customization documentation](https://blazor.syncfusion.com/documentation/datagrid/excel-export-options#font-and-color-customization) ## Exporting Conditional Formatting Conditionally format Data Grid cells based on their values or other criteria by accessing each cell and applying styles such as background color during export to Excel format. - [Conditional cell formatting documentation](https://blazor.syncfusion.com/documentation/datagrid/excel-export-options#conditional-cell-formatting) ## Exporting Custom Header & Footer Users can enhance the exported Excel document by adding custom header and footer content. This is useful for including extra information, such as company branding, summaries, or report metadata. - [Adding header and footer documentation](https://blazor.syncfusion.com/documentation/datagrid/excel-export-options#adding-header-and-footer-in-the-exported-excel-document) ## Exporting images Users can export images embedded in Data Grid columns to an Excel document. This allows visual elements to be preserved alongside data, resulting in a more informative and visually enriched file. - [Exporting image documentation](https://blazor.syncfusion.com/documentation/datagrid/templates-excel-export#exporting-with-column-template) ## Exporting hyperlinks Users can export hyperlinks included in Data Grid columns to an Excel document. This feature helps preserve clickable links alongside the data, enhancing navigation and providing direct access to related resources. - [Exporting hyperlinks documentation](https://blazor.syncfusion.com/documentation/datagrid/templates-excel-export#exporting-with-column-template) ## Exporting selected records Users can export only selected records from the Data Grid to generate a focused Excel file. This feature offers flexibility by allowing exports that include just the relevant data, making documents more precise and purposeful. - [Exporting selected records documentation](https://blazor.syncfusion.com/documentation/datagrid/excel-export-options#export-the-selected-records) ## Show or hide columns while exporting The Data Grid allows users to show or hide columns dynamically during export. This flexibility helps tailor the Excel file to specific data needs, ensuring only the required information is included in the output. - [Show or hide columns while exporting documentation](https://blazor.syncfusion.com/documentation/datagrid/excel-export-options#show-or-hide-columns-while-exporting) ## Exporting with stacked headers Users can export stacked headers from the Data Grid, allowing multiple levels of column grouping to appear in the Excel file. It helps preserve complex header structures and ensures the exported document clearly reflects the original data hierarchy. - [Exporting documentation](https://blazor.syncfusion.com/documentation/datagrid/excel-exporting) ## Enable filtering in exported excel file Users can export the Data Grid to Excel with filtering options included. This allows others to analyze and focus on specific data points after the export, making the document more insightful and easier to work with. - [Enable filtering in exported excel file documentation](https://blazor.syncfusion.com/documentation/datagrid/templates-excel-export) ## Exporting master-detail grids Users can export both master and detail grids onto a single Excel sheet. This is especially useful for managing hierarchical data, ensuring the relationship among records is preserved for easier analysis and review. - [Exporting master-detail grid documentation](https://blazor.syncfusion.com/documentation/datagrid/templates-excel-export) ## Exporting template in excel files Users can export Data Grid templates, like column, detail, and caption templates to an Excel file. These templates can carry rich content like images, hyperlinks, and styled text, creating a more engaging and informative document. - [Exporting templates documentation](https://blazor.syncfusion.com/documentation/datagrid/templates-excel-export) [Blazor DataGrid: Implement CRUD Operations Using EF Core & Web API [Webinar Show Notes]](https://www.syncfusion.com/blogs/post/syncfusion-com-blazor-datagrid-crud) [Top Blazor DataGrid Features for Developers in 2025](https://www.syncfusion.com/blogs/post/blazor-datagrid-top-features) [Boosting Blazor DataGrid Performance with Virtualization Techniques](https://www.syncfusion.com/blogs/post/blazor-datagrid-virtualization-types) [Efficiently Perform CRUD Actions in the Blazor DataGrid with GraphQL](https://www.syncfusion.com/blogs/post/crud-actions-blazor-datagrid-graphql) ##### Aggregates | Blazor DataGrid | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-datagrid/aggregation ## Overview The Blazor DataGrid aggregates have built-in types such as sum, average, count, and more. Aggregates for column values can be easily displayed using the aggregate feature. Aggregates can be customized to show their value in individual summary rows, individual group summary rows, or in group caption rows. ## Built-in aggregate types The Blazor DataGrid relies on the data manager to aggregate column values. Default aggregate types such as sum, max, min, average, and count can be used. Formatted aggregate values are displayed in aggregate-enabled columns. - [Built-in aggregates documentation](https://blazor.syncfusion.com/documentation/datagrid/aggregates#built-in-aggregate-types) ## Footer aggregate The Blazor Data Grid has an option to calculate the aggregate value of the rows of columns and display it in the corresponding cell of the footer row. - [Blazor Data Grid footer aggregate documentation](https://blazor.syncfusion.com/documentation/datagrid/footer-aggregate) ## Group and caption aggregate Display the aggregate value of the current group items in the corresponding cell of the group footer row or caption cell of the group caption row, or display it in both group footer and group caption cells. - [Group and Caption aggregate documentation](https://blazor.syncfusion.com/documentation/datagrid/group-and-caption-aggregate) ## Reactive aggregate On each cell save of the batch editing (cell editing), Data Grid refreshes aggregate values with the edited value of the cell. These aggregated values are volatile. - [Reactive aggregate documentation](https://blazor.syncfusion.com/documentation/datagrid/reactive-aggregate) ##### Columns | Blazor DataGrid | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-datagrid/column ## Overview Columns define the schema of data source in Blazor DataGrid component. It supports formatting, auto generating columns, column definitions, freezing rows and columns, column spanning, text wrapping, column chooser, column menu, and other important features. ## Define columns Users can define the needed columns explicitly in a Blazor DataGrid. Enhance the appearance of columns by setting the header text, text alignment, cell value format, and width. ## Auto generate columns When the column collection is not specified, Data Grid will create columns definitions for users by creating column objects from the data source. - [Column auto generation documentation](https://blazor.syncfusion.com/documentation/datagrid/column-rendering#auto-generated-columns) ## AutoFit columns width Users can interactively auto-size column widths to show their full content by double-clicking on column borders. The Blazor Data Grid supports programmatically auto-sizing columns. - [AutoFit columns width documentation](https://blazor.syncfusion.com/documentation/datagrid/columns#autofit-columns) ## Cell styling Users can decorate each cell element of the Blazor DataGrid with their own attributes by customizing styles, adding additional class names, and more. - [Cell styling documentation](https://blazor.syncfusion.com/documentation/datagrid/cell#customize-cell-styles) ## Text wrap Wraps the Blazor DataGrid cell text to the next line when it is too large to fit a cell. Users can wrap the header or content cell`s text by setting the available wrap mode options. - [Example for text wrap](https://blazor.syncfusion.com/demos/datagrid/auto-wrap?theme=bootstrap5) ## Column chooser The column chooser provides a list of column names paired with check boxes, allowing users to toggle visibility on the fly. This helps users control column visibility through an interactive UI. - [Example for column chooser](https://blazor.syncfusion.com/demos/datagrid/column-chooser?theme=bootstrap5) ## Reorder Reorder Blazor Data Grid columns either through user interaction or programmatically. Simply dragging a column header to the desired column position will reorder the columns of a Data Grid. - [Example for column reorder](https://blazor.syncfusion.com/demos/datagrid/reorder?theme=bootstrap5) ## Resize Column resize allows changing the column width on the fly by simply dragging the right corner of the column header. A scroll bar appears when the Data Grid content width exceeds the element width. - [Example for column resize](https://blazor.syncfusion.com/demos/datagrid/column-resize?theme=bootstrap5) ## Column menu Allows performing various column-based actions with the help of Blazor DataGrid column menu. Menu items can also be customized to list only the preferred actions. - [Example for column menu](https://blazor.syncfusion.com/demos/datagrid/column-menu?theme=bootstrap5) ## Foreign key column It is possible to show values from external or lookup data sources in a column based on the foreign key/value name. Allows all Blazor DataGrid actions like sorting, filtering, editing, grouping, and other operations in the foreign data column. - [Foreign key column documentation](https://blazor.syncfusion.com/documentation/datagrid/foreignkey-column) ##### Blazor DataGrid RESTful Data Binding | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-datagrid/data-binding ## Overview The Blazor DataGrid data binding feature supports to bind data seamlessly with various local and remote data sources such as IEnumerable/List, RESTful services, OData services, and WCF services. It uses the data manager to handle data and supports customizing data requests and processing. ## List binding Bind the Data Grid with a list of business objects or IEnumerable collection. The Blazor Data Grid is a generic component which needs a model type to bind data. In case the model type is unknown during compile time, it binds the list using ExpandoObject or DynamicObject. - [List binding documentation](https://blazor.syncfusion.com/documentation/datagrid/data-binding#list-binding) ## Remote data binding Binding the Blazor Data Grid with RESTful services allows data from the services to be consumed using the data manager. It supports various data adaptors such as GraphQL, ODataV4, URL, and Web API for working with a particular data service - [OData binding documentation](https://blazor.syncfusion.com/documentation/datagrid/data-binding/data-binding#binding-with-odata-services) - [ODataV4 binding documentation](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/odatav4-adaptor) - [Web API binding documentation](https://blazor.syncfusion.com/documentation/datagrid/data-binding#web-api) ##### Blazor Editable Grid | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-datagrid/editing ## Overview The Blazor Editable Grid / Table provides full support to create, read, update, and delete operations (CRUD). In addition to built-in editor components to edit a particular column value, using template support users can use custom editor components that suit their application needs. It performs editing operations with list of business objects or remote data service with the help of data manager. ## Edit modes The Blazor Editable Grid / Table supports various edit modes such as inline, dialog, and batch edit (cell editing). These provide an interactive UI to add and edit records. In addition, editing can be performed programmatically. - [Example for dialog editing](https://blazor.syncfusion.com/demos/datagrid/dialog-editing?theme=bootstrap5) - [Example for batch editing (cell editing)](https://blazor.syncfusion.com/demos/datagrid/batch-editing?theme=bootstrap5) ## Bulk editing Bulk editing allows you to save the added, edited, and deleted records in a single request. This feature is used in the Data Grid by enabling the batch editing (cell editing) mode. This provides an Excel-like editing experience and saves all the changes. - [Example for batch editing (cell editing)](https://blazor.syncfusion.com/demos/datagrid/batch-editing?theme=bootstrap5) - [Batch editing (cell editing) documentation](https://blazor.syncfusion.com/documentation/datagrid/batch-editing) ## Custom editor/customizable edit UI The editor for a Data Grid cell can be specified by providing the edit type. The preferred editor can also be defined for specific columns. - [Custom editor documentation](https://blazor.syncfusion.com/documentation/datagrid/cell-edit-types#custom-editors-using-templatecell-edit-template) ## Show add new row The grid content always presents an empty “Add New Row” edit form during initialization, simplifying the process of adding a new record. Additionally, the “Add New Row” can be displayed at the top or bottom of the grid. After completing the form, pressing enter will add the record, facilitating a seamless addition of successive records. - [Example of Show add new row](https://blazor.syncfusion.com/demos/datagrid/inline-editing?theme=bootstrap5) ## Validation While updating cells or rows, the Data Grid validates user inputs. This helps users to improve overall data quality by validating user input for accuracy and completion. The users can also customize validation criteria and message according to their requirement. - [Validation documentation](https://blazor.syncfusion.com/documentation/datagrid/column-validation) ##### Blazor Filterable Grid | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-datagrid/filtering ## Overview The Blazor DataGrid filtering helps view particular or related records, which meet a given filtering criteria.It supports various filter types that include powerful Excel-like filter. The Blazor Data Grid filter allows users to choose appropriate filter type, define their own custom filtering logic, and customize the filtering UI based on their application needs. It also has an option to filter diacritic characters in Blazor Data Grid. ## Filter operators The Blazor Data Grid component offers filter operators to set column filter conditions. Wildcard (*) and LIKE (%) operators handle string-type columns, matching values based on specified patterns. - [Filter operators documentation](https://blazor.syncfusion.com/documentation/datagrid/filtering#filter-operators) ## Powerful excel-like filter The Excel-like filter helps create complex filter criteria for a column by allowing users to select possible filter values from a check box list. Additionally, users can build complex filter criteria using advanced filter option. - [Example for Excel filter](https://blazor.syncfusion.com/demos/datagrid/excel-like-filter?theme=bootstrap5) ## Custom filter/extensible filter UI Filter UI and logic for a column is applied based on the column type. It is also possible for the users to define their own custom filter UI and filtering logic for a column to suit their application needs. - [Custom filter UI documentation](https://blazor.syncfusion.com/documentation/datagrid/filter-bar#filter-bar-template-with-custom-component) ## Search Search DataGrid rows using the built-in search box in the toolbar or programmatically. The built-in settings allow users to customize search behavior. - [Searching example](https://blazor.syncfusion.com/demos/datagrid/search?theme=bootstrap5) ##### Blazor Grid Grouping | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-datagrid/grouping ## Overview Blazor DataGrid grouping feature supports row grouping to display data in an organized way. Data can be grouped in the ascending or descending order. Rows can be grouped by dragging and dropping the desired columns in the interactive drop area. ## N-level column grouping Allows the user to perform N-level grouping without any restrictions. It also possible to hide or show grouped columns in the Data Grid. - [Multiple column grouping documentation](https://blazor.syncfusion.com/documentation/datagrid/grouping) ## Grouping with aggregates Blazor DataGrid allows users to apply the aggregate function on grouped rows. Users can display aggregate values for a group either on the group footer cell or group caption cell. It is also possible to define multiple aggregations to the same column. - [Example for grouping with aggregation](https://blazor.syncfusion.com/demos/datagrid/group-and-caption-aggregate?theme=bootstrap5) ## Group by format Grouping is performed based on the field value, by default. A column can be grouped on the basis of formatted value instead of raw value to make viewing formatted date columns easier. - [Group by format documentation](https://blazor.syncfusion.com/documentation/datagrid/grouping#group-by-format) ## Lazy load grouping with paging Load huge amounts of grouped records to the Grid without any performance degradation using the on-demand concept. While grouping, the Grid will render only the initial level caption rows in the collapsed state based on page size. The child records of each caption will be fetched on demand and render in the Grid when you expand the caption row. - [Blazor Data Grid lazy load grouping with paging documentation](https://blazor.syncfusion.com/documentation/datagrid/lazy-load-grouping) ## Lazy load grouping with infinite scrolling Load large amounts of grouped records to the Grid without any performance degradation using the on-demand concept. When infinite scrolling is enabled in a grid, lazy load grouping renders records in a collapsed state when binding data. The grouped items with N levels of data will be loaded on demand with infinite scrolling when the corresponding group is expanded. - [Lazy load grouping with infinite scrolling documentation](https://blazor.syncfusion.com/documentation/datagrid/lazy-load-grouping#lazy-load-grouping-with-infinite-scrolling) ## Lazy load grouping with virtual scrolling Load large amounts of grouped records to the Grid without any performance degradation using the on-demand concept. When virtual scrolling is enabled in a grid, lazy load grouping renders records in a collapsed state when binding data. The grouped items with N levels of data will be loaded on demand with virtual scrolling when the corresponding group is expanded. - [Lazy load grouping with virtual scrolling documentation](https://blazor.syncfusion.com/documentation/datagrid/lazy-load-grouping#lazy-load-grouping-with-virtual-scrolling) ##### Blazor Grid Paging | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-datagrid/paging ## Overview Through Blazor Grid paging, a segment of data can be viewed from the assigned data source. The Blazor DataGrid offers built-in pager UI with options to customize its entire UI. It also has an [on-demand paging](https://support.syncfusion.com/kb/article/10781/blazor-grid-load-data-on-demand) mode for effective data retrieval from remote web services. ## Load On-demand The pager UI of the Blazor Data Grid requests data on-demand when navigating to another page. Using simple properties, users can customize the pager. ## Page size dropdown Allows you to change the page size on the fly by using the page size dropdown in the pager. The Blazor DataGrid allows customization of values in the page size dropdown. - [Example for page size dropdown](https://blazor.syncfusion.com/demos/datagrid/pager-dropdown?theme=bootstrap5) ## Customizable pager UI Using pager template, users can customize the pager UI that suits their application scenario. - [Custom pager documentation](https://blazor.syncfusion.com/demos/datagrid/pager-template?theme=bootstrap5) ##### Single, Multi & Checkbox Selection | Blazor Grid | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-datagrid/selection ## Overview The Blazor DataGrid allows selecting rows or cells. One or more rows or cells can also be selected by holding Ctrl or Command or Shift, or programmatically. ## Row selection The Blazor Data Grid allows you to select a range of rows or a single row by just clicking or tapping the row. To perform multi-selection, press and hold CTRL or SHIFT to select the desired row or range of rows. - [Example for row selection](https://blazor.syncfusion.com/demos/datagrid/selection?theme=bootstrap5) - [Row selection documentation](https://blazor.syncfusion.com/documentation/datagrid/selection) ## Cell selection The Blazor Data Grid allows you to select a range of cells or a single cell by just clicking or tapping it. To perform multi-selection, press and hold CTRL or SHIFT to select the desired cell or range of cells. The two types of cell selection modes are flow and box. - [Cell selection documentation](https://blazor.syncfusion.com/documentation/datagrid/selection#cell-selection) ## Drag selection Allows you to select a range of rows or cells by simply dragging the pointer over the cells by mouse or touch. - [Drag selection documentation](https://blazor.syncfusion.com/documentation/datagrid/selection#drag-selection) ## Checkbox selection Users can select multiple Data Grid records with the help of a checkbox in each row. The selection persists even after performing any action in the Data Grid. It also provides an option to select or deselect all the rows in a Data Grid using the checkbox in the corresponding column header. - [Checkbox selection example](https://blazor.syncfusion.com/demos/datagrid/checkbox-selection?theme=bootstrap5) - [Checkbox selection documentation](https://blazor.syncfusion.com/documentation/datagrid/selection#checkbox-selection) ##### Single, Multiple & Custom Sorting | Blazor Grid | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-datagrid/sorting ## Overview The Blazor DataGrid allows users to sort rows either in the ascending or descending order against a column by simply clicking the header. Sort multiple columns’ data by holding the Ctrl key and clicking the header. ## Sort multiple columns Sort Data Grid rows using multiple columns by clicking the desired column headers and holding Ctrl or Command keys. - [Sorting documentation](https://blazor.syncfusion.com/documentation/datagrid/sorting) ## Custom sort function Built-in options are provided to define the custom sort logic for the desired columns. The custom sort comparer class should be implemented in the interface IComparer. - [Custom Sort function documentation](https://blazor.syncfusion.com/documentation/datagrid/sorting#custom-sorting) ##### Blazor Breadcrumb Component | Navigational Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-breadcrumb # Blazor Breadcrumb Component - Simple, responsive component makes navigation easy. - Support for an overflow mode to limit the number of Breadcrumb items displayed. - Built-in support for icons, binding to location, and UI customization with templates for Breadcrumb items. ## Overview The Blazor Breadcrumb component is a graphical user interface that serves as a navigation header for your web application or site. It helps to identify or highlight the current location within the hierarchical structure of a website. It has several built-in features such as templates, icons, binding to location, overflow mode, and UI customizations. ## Breadcrumb item icons Users tend to understand visual information better than text. Include icons or sprite images to the right or left of the Breadcrumb items to provide a visual representation of their corresponding actions. ## Separator Template You can use a horizontal line separator to present similar action items as a group within a list of available items. [Separator documentation](https://blazor.syncfusion.com/documentation/breadcrumb/templates#separator-template) ## UI customization with templates Templates are used to create custom user experiences. The Breadcrumb component provides a template for each breadcrumb item and its separator to customize the appearance of the entire Breadcrumb component UI with HTML elements or other components. ## Limit items with overflow mode Overflow mode limits the number of items that can be displayed in the view when the Breadcrumb items’ width exceeds the container width or the maximum item count. The following are the different overflow modes supported in the Breadcrumb component. ## Navigation The Blazor Breadcrumb control comes with a rich UI and support for different internal and external navigations. [Navigation documentation](https://blazor.syncfusion.com/documentation/breadcrumb/navigation) ### Menu mode Menu mode shows the Breadcrumb items that can be accommodated within the container space and creates a submenu with the remaining items. ### Collapsed mode Collapsed mode shows the first and last Breadcrumb items and hides the remaining items with a collapsed icon. When the collapsed icon is clicked, all items become visible and navigable. ### Wrap mode Wrap mode wraps the items to multiple lines when the Breadcrumb component’s width exceeds the container space. ### Scroll mode Scroll mode shows an HTML scroll bar when the Breadcrumb component’s width exceeds the container space. ### Hidden mode Hidden mode shows the maximum number of items possible in the container space and hides the remaining items. Clicking the item before the hidden item will make the hidden item visible. ### None mode None mode shows all the items on a single line. ## Bind to location Breadcrumb items can be automatically generated based on the current location of the user within the website or by providing a URL to the Breadcrumb component. The auto generated items can be customized using templates and item render events. Note: The previous sample is hosted in a different location and Breadcrumb items are generated based on it. ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#breadcrumb) accessibility practices to work with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#breadcrumb) best practices for implementing keyboard interaction. - Design based on [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards for UI element visuals such as foreground color, background color, line spacing, text, and images. - Supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian. ## Developer-friendly APIs Developers can control the appearance and behaviors of the Breadcrumb component using a rich set of APIs. ## Built-in themes The Blazor Breadcrumb supports built-in themes such as Bootstrap 5, Tailwind CSS, Fluent, high contrast, and more. Users can customize these built-in themes or create new themes to achieve the desired look and feel either by simply overriding SASS variables or using the Theme Studio application. - [Theme Studio Application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Blazor Breadcrumb Code Example Easily get started with the Blazor Breadcrumb using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor Breadcrumb Example](https://blazor.syncfusion.com/demos/breadcrumb/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Breadcrumb in Blazor. - razor ## Other supported frameworks The Breadcrumb component is also available in Angular, React, Vue, and JavaScript frameworks. Check it out on other platforms at the links below: - [JavaScript Breadcrumb](https://www.syncfusion.com/javascript-ui-controls/js-breadcrumb) - [Angular Breadcrumb](https://www.syncfusion.com/angular-components/angular-breadcrumb) - [React Breadcrumb](https://www.syncfusion.com/react-components/react-breadcrumb) - [Vue Breadcrumb](https://www.syncfusion.com/vue-components/vue-breadcrumb) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Carousel Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-carousel # Blazor Carousel Component - Built-in slide indicators, slide navigations, and more configuration options. - Beautiful animations when navigating slide panels. - Effortless customization with out-of-the-box, built-in template options. ## Overview The Blazor Carousel component allows users to display images with content, links, and more, like a slide show. Typical uses of a carousel include scrolling news headlines, featured articles on home pages, and image galleries. ## Ease of use The Blazor Carousel component provides flexible ways to configure the look and feel of the Carousel to match your requirement using several built-in options. ## Animations Navigate among slides smoothly with built-in “slide” and “cross-fade” animation effects. You can also provide custom animation effects. - [Carousel Animation documentation](https://blazor.syncfusion.com/documentation/carousel/animations-and-transitions) ## Auto play slides Carousel slide transitions are performed continuously in specified time intervals. You can also customize the time intervals. ## Looping slides Carousel’s looping functionality allows users to loop back to the first item after reaching the last item. ## Completely customizable UI Customize the appearance of any part of the Carousel interface using HTML and CSS styles. ### Navigation buttons Allows the users to change the previous and next slides. ### Play button Users can control the auto play slide functionality by using the play button. ### Indicators Users can show or hide the indicators to the carousel. Indicators provide quick navigation to any slide. ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#carousel) accessibility practices to work with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#carousel) best practices for implementing keyboard interaction. - Based on the [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, the UI visual elements such as foreground color, background color, line spacing, text, and images have been designed. - Supports right-to-left (RTL) text direction for users working with right-to-left languages like Hebrew, Arabic, or Persian. ## Developer-friendly APIs Developers can control the appearance and behaviors of the Carousel component using a rich set of APIs. ## Built-in themes The Blazor Carousel component supports built-in themes such as Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and high contrast. Users can customize these built-in themes or create new themes to achieve their desired look and feel by either simply overriding SASS variables or using our Theme Studio application. - [Theme Studio application.](https://ej2.syncfusion.com/themestudio/?theme=material) ## Blazor Carousel Code example Easily get started with the Blazor Carousel using a few simple lines of C# code, as demonstrated below. Also, explore our [Blazor Carousel Example](https://blazor.syncfusion.com/demos/carousel/default-functionalities?theme=fluent2), which shows you how to include the Blazor Carousel component with highlight customization. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/VDVojsDQBrabeSBK) - razor ## Other supported frameworks The Carousel component is also available in Angular, React, Vue, and JavaScript frameworks. Check out the component on other platforms using these links: - [JavaScript Carousel](https://www.syncfusion.com/javascript-ui-controls/js-carousel) - [Angular Carousel](https://www.syncfusion.com/angular-components/angular-carousel) - [React Carousel](https://www.syncfusion.com/react-components/react-carousel) - [Vue Carousel](https://www.syncfusion.com/vue-components/vue-carousel) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Pager - Rich UI Appearance with Theme Support | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-pager # Blazor Pager - Responsive and Rich UI - Easily split the data set into pages, to view them through an intuitive UI. - Flexible and highly customizable interface. - Mobile-first responsive design that adapts to any resolution. - Effortlessly integrates with components like DataGrid, Card, ListView, etc. to view the sectioned pages. - Comes with industry standard themes such as Material, Fabric, Bootstrap, and more. ## Overview The Blazor Pager component has an option to split the data set into sectioned pages for a great experience by viewing them page by page through an intuitive UI. Navigation is the key role of this component and it can be done with built-in numeric elements and buttons that can also be customized with rich APIs. ## Blazor Pager Code example Easily get started with the Blazor Pager using a few simple lines of C# code as demonstrated below. Also explore our [Blazor Pager Example](https://blazor.syncfusion.com/demos/pager/default-functionalities?theme=bootstrap5) which shows you how to include the Blazor Pager component with highlight customization. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/hNheXitwVxqaiTGd) - razor ## Developer-friendly APIs The Blazor Pager has an option to customize the default settings using its rich APIs. It allows users to customize or control the number of items to be displayed in a single page, number of numeric elements to be displayed for navigation, total number of items in the data set or data collection, and the page to be viewed currently in the pager numeric element. It also has more than enough methods and events to perform external actions to access the Pager component. - [Blazor Pager APIs settings documentation](https://blazor.syncfusion.com/documentation/pager/behaviour-settings) - [Example for Pager APIs](https://blazor.syncfusion.com/demos/pager/paging-api?theme=bootstrap5) ## Pager with page size dropdown The Pager has an option to show a different page size as a list in the pager dropdown which helps to dynamically change the page size of each page. An initially defined page size is selected by default in the pager dropdown. - [Blazor Pager with page size dropdown documentation](https://blazor.syncfusion.com/documentation/pager/pager-with-drop-down) - [Example for page size dropdown](https://blazor.syncfusion.com/demos/pager/pager-dropdown?theme=bootstrap5) ## Pager with template The Blazor Pager component allows you to customize or change the appearance of the entire Pager UI with HTML elements or other components. - [Blazor Pager with template documentation](https://blazor.syncfusion.com/documentation/pager/template) - [Example for pager template](https://blazor.syncfusion.com/demos/pager/pager-template?theme=bootstrap5) ## Responsive layout The Blazor Pager acts intelligently and changes its UI responsively based on the Pager dimensions. Its optimized design provides the best UI interaction in different devices. ## Built-in and customizable themes Several built-in SASS-based themes are available such as Fluent, Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, and high contrast. Simplify theme customization by overriding the existing SASS styling. ### Keyboard navigation Blazor Pager ensures that every cell is keyboard accessible . Major features like page navigation, accessing pager drop down, navigating to first and last pages can be performed using keyboard commands alone; no mouse interaction is required. This helps in creating highly accessible applications using this component. - [Example for keyboard navigation](https://blazor.syncfusion.com/demos/pager/keyboard-navigation?theme=bootstrap5) ### Screen readers The Blazor Pager has complete WAI-ARIA accessibility support. It includes high-contrast visual elements, helping visually impaired people have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers. ### Right to left (RTL) RTL rendering displays the text and layout of the Blazor Pager from the right to left. This improves the user experience and accessibility for RTL languages like Hebrew, Arabic, Persian, etc. ### Localization Localize all the strings that are used in the user interface of the component. The localization (l10n) library is used to localize UI strings. [Documentation](https://blazor.syncfusion.com/documentation/pager/getting-started) ##### Blazor AppBar Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-appbar # Blazor AppBar - Lightweight and Fully Customizable Component - A simple and highly customizable interface. - Customize the height, theme color, position, and more. - Effortlessly integrate components like Button, Dropdown Menu, Menu Bar, and more. ## Overview The Blazor AppBar, also known as an action bar or nav bar, displays information and actions related to the current application screen. It is used to show branding, screen titles, navigation, and actions. The component supports height mode, color mode, positioning, and more. - [See the Blazor AppBar demo.](https://blazor.syncfusion.com/demos/appbar/default-functionalities?theme=bootstrap5) ## Size Display the AppBar with predefined sizes: normal, longer, and shorter. The size of an AppBar can be changed using the regular, prominent, and dense properties. - [Blazor AppBar Size demo.](https://blazor.syncfusion.com/demos/appbar/default-functionalities?theme=bootstrap5) - [Blazor AppBar Size documentation.](https://blazor.syncfusion.com/documentation/appbar/size-and-color#size) ## Color The AppBar has predefined background colors for different visual representations: light, dark, primary, and inherit. - [Blazor AppBar Color demo.](https://blazor.syncfusion.com/demos/appbar/color?theme=bootstrap5) - [Blazor AppBar Color documentation.](https://blazor.syncfusion.com/documentation/appbar/size-and-color#color) ## Position A row of content can be aligned horizontally at the top or bottom of the AppBar. - [Blazor AppBar Position documentation.](https://blazor.syncfusion.com/documentation/appbar/position) ## Sticky AppBar can stick to the top of a page while scrolling the content. - [Blazor AppBar Sticky documentation.](https://blazor.syncfusion.com/documentation/appbar/position#sticky-appbar) ## Content alignment The Blazor AppBar component aligns the content using the spacer and separator. - [Blazor AppBar Content Alignment documentation.](https://blazor.syncfusion.com/documentation/appbar/design) ## Responsive design The AppBar layout will adjust automatically to the current screen size. - [Blazor AppBar Responsive Design documentation.](https://blazor.syncfusion.com/documentation/appbar/design#media-query) ## Developer-friendly APIs Developers can control the appearance and behaviors of the AppBar component using a rich set of APIs. ## Built-in themes The Blazor AppBar component supports built-in themes: Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and high contrast. Users can customize these built-in themes or create new themes to achieve their desired look and feel by either simply overriding SASS variables or using our Theme Studio application. - [Theme Studio application.](https://blazor.syncfusion.com/documentation/appearance/theme-studio) ## AppBar code example Easily get started with the Blazor AppBar using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor AppBar example](https://blazor.syncfusion.com/demos/appbar/default-functionalities?theme=bootstrap5), which shows how to render and configure the Blazor AppBar. - razor ## Other supported frameworks The AppBar component is also available in Angular, React, Vue, and JavaScript frameworks. Check out the component on other platforms using these links: - [JavaScript AppBar](https://www.syncfusion.com/javascript-ui-controls/js-appbar) - [Angular AppBar](https://www.syncfusion.com/angular-components/angular-appbar) - [React AppBar](https://www.syncfusion.com/react-components/react-appbar) - [Vue AppBar](https://www.syncfusion.com/vue-components/vue-appbar) [I’d love to read it now.](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Message Component | Notification Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-message # Blazor Message Component - A simple, responsive component used to denote severity levels of messages to end users. - Built-in support for severity icons and predefined appearance variants that give importance to the message. - An easily customizable UI. ## Overview The Blazor Message is a graphical user interface for displaying messages with visual severity levels. It differentiates messages with icons and colors to denote the importance and context of the message. It has several built-in features, such as severities, variants, icons, and a template. ## Severities Display messages with predefined severity types that have distinctive icons and colors to convey their importance to the user. The available severity types are normal, success, info, warning, and error. ## Variants Message has predefined appearance variants for different visual representations of messages: text, outlined, and filled. ## Icons Users tend to understand visual information better than text. Include severity icons to the left of the message content to provide a visual representation of the message context. Users may want to hide some messages once they’ve read them. Include a close icon to the right of the message content to hide it through the user input. ## Content alignment Normally, message content is aligned to the left. Users can easily align it to the center or right using the predefined content alignments such as left, center, and right. ## UI customization with a template A template is used to create custom user experiences. The Message component lets you customize the content with a custom structure. The content can be a string, paragraph, or any other HTML element. ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) accessibility practices to work with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/button/#keyboard-interaction-3) best practices for implementing keyboard interaction. - Design based on [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards for UI element visuals such as foreground color, background color, line spacing, text, and images. - Supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian. ## Developer-friendly APIs Developers can control the appearance and behaviors of the Message component using a rich set of APIs. ## Built-in themes The Blazor Message supports several built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, and high contrast. Users can customize any one of these built-in themes or create new themes to achieve their own desired look and feel either by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio application.](https://blazor.syncfusion.com/themestudio/?theme=fluent) ## Other supported frameworks The Message component is also available for our Angular, React, Vue, and JavaScript frameworks. Check it out on the other platforms at these links: - [JavaScript Message](https://www.syncfusion.com/javascript-ui-controls/js-message) - [Angular Message](https://www.syncfusion.com/angular-components/angular-message) - [React Message](https://www.syncfusion.com/react-components/react-message) - [Vue Message](https://www.syncfusion.com/vue-components/vue-message) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Floating Action Button (FAB) | Customizable UI | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-fab # Blazor Floating Action Button (FAB) - A floating button that appears over all the contents of the web page to perform the primary screen action. - Position the FAB in predefined places. - Built-in support for primary, success, warning, info, and danger button styles. ## Overview The Blazor Floating Action Button (FAB) is an extension of [Blazor Button](https://www.syncfusion.com/blazor-components/blazor-button) that appears in front of all the contents of the screens and performs the primary action. It supports several built-in features, such as icons, predefined styles, different button sizes, and UI customization. - [Blazor FAB demo](https://blazor.syncfusion.com/demos/fab/default-functionalities) - [Blazor FAB getting started documentation](https://blazor.syncfusion.com/documentation/floating-action-button/getting-started) ## Predefined styles Several predefined styles are available in Blazor Floating Action Button: - Primary - Secondary - Outline - Info - Success - Warning - Danger You can use a theme based on the context of your application. - [FAB predefined styles documentation](https://blazor.syncfusion.com/documentation/floating-action-button/styles) ## Positioning The Blazor Floating Action Button provides built-in support to position the FAB on the page or target. - [FAB positioning documentation](https://blazor.syncfusion.com/documentation/floating-action-button/positions) ## Icon with text button In FAB, use a button with an icon to the right or left of button text or choose an icon-only button. - [FAB icons documentation](https://blazor.syncfusion.com/documentation/floating-action-button/icons) ## Built-in themes The Blazor Floating Action Button supports several built-in themes such as Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize these built-in themes or create new themes to achieve their desired look and feel by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio application](https://blazor.syncfusion.com/themestudio/?theme=fluent) ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#button) accessibility practices to work with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#button) best practices for implementing keyboard interaction. - Based on [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, UI visual elements such as foreground color, background color, line spacing, text, and images are designed. - Supports right-to-left (RTL) text direction for users working with RTL languages like Hebrew, Arabic, or Persian. ## Developer-friendly APIs The Blazor Floating Action Button (FAB) component offers a range of APIs that allows developers to customize its appearance and behavior. With these APIs, developers can create a unique and highly personalized FAB that fits seamlessly into their applications. ## Blazor Floating Action Button Code Example Easily get started with the Blazor Floating Action Button using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor Floating Action Button Example](https://blazor.syncfusion.com/demos/fab/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Blazor FAB. - razor ## Other supported frameworks The Floating Action Button component is also available in Angular, React, Vue, and JavaScript frameworks. Check out the component on other platforms using these links: - [JavaScript Floating Action Button](https://www.syncfusion.com/javascript-ui-controls/js-fab) - [Angular Floating Action Button](https://www.syncfusion.com/angular-components/angular-fab) - [React Floating Action Button](https://www.syncfusion.com/react-components/react-fab) - [Vue Floating Action Button](https://www.syncfusion.com/vue-components/vue-fab) ## Reference [https://www.syncfusion.com/blazor-components/blazor-button](https://www.syncfusion.com/blazor-components/blazor-button) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Speed Dial | Customizable Design and Function | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-speeddial # Blazor Speed Dial Component - Speed Dial appears over all the contents of the page to display multiple primary screen action buttons. - Component can be easily placed in any of multiple positions. - Built-in support for primary, success, warning, info, and danger button styles. - Action buttons can display in linear and radial directions. ## Overview The Blazor Speed Dial component is an extension of the [Blazor Floating Action Button](https://www.syncfusion.com/blazor-components/blazor-fab) that displays a list of action buttons when clicked. It displays action buttons in linear and radial directions. - [Blazor Speed Dial demo](https://blazor.syncfusion.com/demos/speeddial/defaultfunctionalities) - [Blazor Speed Dial getting started documentation](https://blazor.syncfusion.com/documentation/speeddial/getting-started) ## Display modes The Blazor Speed Dial component supports the display of action items in a linear or radial layout. This helps make actions more accessible and easy to use. ### Linear In the linear mode, the Blazor Speed Dial component displays action items in a list-like format, either horizontally or vertically. Action items can be displayed at the top, bottom, left, or right side of the Speed Dial button. Auto positioning displays the action items based on the position of the Speed Dial. - [Speed Dial linear mode documentation](https://blazor.syncfusion.com/documentation/speeddial/display-modes) ### Radial In the radial mode, the Blazor Speed Dial component displays action items in a circular pattern similar to a radial menu. If start and end angles are not specified, they are automatically calculated based on the position of the component. - [Speed Dial radial mode documentation](https://blazor.syncfusion.com/documentation/speeddial/radial-menu) ## Predefined styles Several predefined styles are available in Blazor Speed Dial: - Primary - Secondary - Outline - Info - Success - Warning - Danger - [Speed Dial styles documentation](https://blazor.syncfusion.com/documentation/speeddial/styles) ## Positioning Place the Speed Dial button in various built-in positions on the target element or page. - [Speed Dial positions documentation](https://blazor.syncfusion.com/documentation/speeddial/positions) ## Icon with text The Blazor Speed Dial component enables customization of the Speed Dial button and action items, including the use of text only, icon with text, or icon only. This allows developers to create highly personalized buttons and action items that effectively communicate the actions they perform. - [Speed Dial icons documentation](https://blazor.syncfusion.com/documentation/speeddial/items) ## Templates Customize the default appearance of the Speed Dial and its action items. By using item and popup templates, a highly personalized Speed Dial can be created, which enhances the user experience. - [Speed Dial templates documentation](https://blazor.syncfusion.com/documentation/speeddial/template) ## Modal popup mode Modal popup mode enables an overlay to prevent background interaction when popup action items are opened. - [Speed Dial modal documentation](https://blazor.syncfusion.com/documentation/speeddial/modal) ## Built-in themes The Blazor Speed Dial supports these built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize one of these built-in themes or create new themes to achieve their desired look and feel by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio application](https://blazor.syncfusion.com/themestudio/?theme=fluent) ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#button) accessibility practices to work with screen readers and assistive devices. - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#Listbox) accessibility that helps pop-up action items be accessed by on-screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#button) best practices for implementing keyboard interaction. - Based on [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, UI visual elements such as foreground color, background color, line spacing, text, and images are designed. - Supports right-to-left (RTL) text direction for users working with RTL languages like Hebrew, Arabic, or Persian. ## Developer-friendly APIs The Blazor Speed Dial component offers APIs for customizing its appearance and behavior, as well as templates for personalizing the look and feel of the Speed Dial and its action items. With these APIs, developers can create a unique and highly personalized Speed Dial that fits seamlessly into their applications. ## Blazor Speed Dial code example Easily get started with the Blazor Speed Dial using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor Speed Dial Example](https://blazor.syncfusion.com/demos/speeddial/defaultfunctionalities?theme=bootstrap5) that shows you how to render and configure the Blazor Speed Dial. - razor ## Other supported frameworks The Speed Dial component is also available in Angular, React, Vue, and JavaScript frameworks. Check out the component on other platforms using these links: - [JavaScript Speed Dial](https://www.syncfusion.com/javascript-ui-controls/js-speed-dial) - [Angular Speed Dial](https://www.syncfusion.com/angular-components/angular-speed-dial) - [React Speed Dial](https://www.syncfusion.com/react-components/react-speed-dial) - [Vue Speed Dial](https://www.syncfusion.com/vue-components/vue-speed-dial) ## Reference [https://www.syncfusion.com/blazor-components/blazor-fab](https://www.syncfusion.com/blazor-components/blazor-fab) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Skeleton Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-skeleton # Blazor Skeleton Component - Modern data-loading indicator: A placeholder that shows the preview of a page until it is loaded. - Built-in wave, fade, and pulse shimmer effects. - Built-in support for different layout shapes to create a preview of any layout. ## Overview Blazor Skeleton is a modern data-loading indicator which shows a preview of how the page is going to be displayed with shimmer effect when data is loaded. It provides improved user experience. - [Blazor Skeleton demo](https://blazor.syncfusion.com/demos/skeleton/defaultfunctionalities) - [Blazor Skeleton getting started documentation](https://blazor.syncfusion.com/documentation/skeleton/getting-started) ## Built-in shapes Use built-in shapes in Blazor Skeleton to create a preview of any layout. - [Skeleton shapes documentation](https://blazor.syncfusion.com/documentation/skeleton/shapes) ## Built-in shimmer effects Blazor Skeleton supports wave, fade, and pulse shimmer effects. - [Skeleton shimmer effects documentation](https://blazor.syncfusion.com/documentation/skeleton/effects) ## Customization The appearance of Blazor Skeleton can be customized by changing the wave color, background, width, and height. Shimmer effect can be applied to any element to make it act like a CSS component. ## Built-in themes The Blazor Skeleton supports these built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize one of these built-in themes or create new themes to achieve their desired look and feel by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio application](https://blazor.syncfusion.com/themestudio/?theme=fluent) ## Blazor Skeleton code example Easily get started with the Blazor Skeleton using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor Skeleton Example](https://blazor.syncfusion.com/demos/skeleton/defaultfunctionalities?theme=bootstrap5) that shows you how to render and configure the Blazor Skeleton. - razor ## Other supported frameworks The Skeleton component is also available in Angular, React, Vue, and JavaScript frameworks. Check out the component on other platforms using these links: - [JavaScript Skeleton](https://www.syncfusion.com/javascript-ui-controls/js-skeleton) - [Angular Skeleton](https://www.syncfusion.com/angular-components/angular-skeleton) - [React Skeleton](https://www.syncfusion.com/react-components/react-skeleton) - [Vue Skeleton](https://www.syncfusion.com/vue-components/vue-skeleton) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Rating Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-rating # Blazor Rating Component - Allows users to rate the products or services by sharing their opinions and experiences. - A more precise rating is provided via built-in precision modes. - Customizable with various options, such as the number of stars to display, the maximum rating value, and the initial rating value. - Easily customize the appearance and layout of the rating items using templates. ## Overview The Blazor Rating is a highly customizable component to rate products or services with precise and accurate values by using built-in precision modes. The customization supported in the Blazor Rating component makes rating more expressive instead of just showing numeric values. - [Blazor Rating demo](https://blazor.syncfusion.com/demos/rating/default-functionalities) - [Blazor Rating getting started documentation](https://blazor.syncfusion.com/documentation/rating/getting-started) ## Precision modes The Blazor Rating component has several precision modes, which are listed below. - Full: The rating value is displayed in multiples of 1 (whole number). - Half: The rating value is displayed in multiples of 0.5 (half). - Quarter: The rating value is displayed in multiples of 0.25 (quarter). - Exact: The rating value is displayed in multiples of 0.1 (fraction). ## Tooltips The Blazor Rating component supports tooltips to provide more information about the rating. Tooltips can be customized using the template to provide more expressive content rather than the item’s numerical values. ## Labels Labels provide additional information about the current rating value. Labels can be customized using the template and placed in different positions around the rating. ## Templates The Blazor Rating component supports templates to customize rating items in different ways. Custom icons can be in the form of emojis, hearts, stars, SVG, and more. ## Right to left (RTL) The Blazor Rating component supports right-to-left (RTL) rendering. ## Customization Customize rating items’ spacing, rated/unrated fill color, border color, and more, enabling it to fit the application’s needs. ### Size of the items Customizing the size of the items makes the Rating component more accessible and accurate. ### Spacing Adjust the space between items in the Rating component. ### Rated and unrated fill colors Customize the fill color of rated and unrated states of an item. ### Borders and stroke thickness Customizing the border color and stroke thickness of rated and unrated items enhances their appearance and makes them stand out. ## Built-in themes The Blazor Rating supports these built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize one of these built-in themes or create new themes to achieve their desired look and feel by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio application](https://blazor.syncfusion.com/themestudio/?theme=fluent) ## Web Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility to work with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing keyboard interaction. Tab: Navigate to the Rating component. Left Arrow: Decrease the rating value. Right Arrow: Increase the rating value. Up Arrow: Increase the rating value. Down Arrow: Decrease the rating value. - Follows [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards in design of the UI visual elements such as foreground color, background color, line spacing, text, and images. ## Blazor Rating code example Easily get started with the Blazor Rating using a few simple lines of C# code example as demonstrated below. Also explore our [Blazor Rating example](https://blazor.syncfusion.com/demos/rating/default-functionalities) that shows you how to render and configure the Blazor Rating. - razor ## Other supported frameworks The Rating component is also available in Angular, React, Vue, and JavaScript frameworks. Check out the component on other platforms using these links: - [JavaScript Rating](https://www.syncfusion.com/javascript-ui-controls/js-rating) - [Angular Rating](https://www.syncfusion.com/angular-components/angular-rating) - [React Rating](https://www.syncfusion.com/react-components/react-rating) - [Vue Rating](https://www.syncfusion.com/vue-components/vue-rating) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Media Query Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-media-query # Blazor Media Query Component - Build responsive, adaptable web applications that work seamlessly on a wide range of devices and screen sizes. - Customize your layouts using predefined breakpoints. - Define your own custom media query breakpoints to fit your specific layout needs. ## Overview The Blazor Media Query component helps you build responsive, adaptable layouts for your web applications. It detects changes in the browser’s size and adjusts your layouts accordingly, ensuring that your applications look great and function well on a wide range of devices and screen sizes. It provides an optimal user experience no matter the type of device used. - [Blazor Media Query demo](https://blazor.syncfusion.com/demos/media-query/default-functionalities) - [Blazor Media Query getting started documentation](https://blazor.syncfusion.com/documentation/media-query/getting-started) ## Predefined & custom media breakpoints The Blazor Media Query component comes with predefined breakpoints and also, allows users to define custom breakpoints & media queries, giving them flexibility to customize the appearance of the web application to suit their unique needs. Predefined breakpoints: - Small: browser width <= 768 pixels - Medium: browser width between 768 and 1024 pixels - Large: browser width >= 1024 pixels ## Blazor Media Query component code example Easily get started with the Blazor Media Query using a few simple lines of C# code example, as demonstrated below. Also, explore our [Blazor Media Query example](https://blazor.syncfusion.com/demos/media-query/default-functionalities), that shows you how to render and configure the Blazor Media Query. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/hNLTsNhoVLgSapik) - razor [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Mention | @Mention component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-mention # Blazor @Mention Component - Easily tag users, groups, and topics in the Blazor Rich Text Editor. - Easily integrate with text area, text box, or other editable components. ## Overview Blazor Mention is an autocomplete-like component for tagging or selecting a user or group from a suggestion list. The component opens a suggestion list when a user starts typing with the ‘@’ character, just like on popular social media sites such as Facebook, Twitter, and more. It supports several out-of-the-box features: data binding, grouping, UI customization, accessibility, and more. ## Data binding The Blazor Mention component seamlessly works with local and remote data sources such as an array of primitive data, data sets of complex items, JSON data collections, and remote data sources. ## Blazor Rich Text Editor with mention and hashtags Tag or select a user or group from the suggestion list when composing content in the Rich Text Editor. ## Integration Easy to integrate with editable components such as text area, text box, and div elements with content-editable set to true. ## Trigger character Change the mention (trigger) character to # or other characters. ## Multiple lists Use multiple mention characters in a single editor, such as @ for a user selection list and # for a topic selection list. ## Highlight matched text Change the visual appearance of the matching characters in the suggestion list. ## Minimum characters Open the suggestion list when the specified character limit is reached. ## Space in search Supports spaces in searches and displays the results in the suggestion list. ## Selection suffix Users can add a suffix to the selected suggestion. ## Grouping Display suggestions with categories and groups in the Blazor Mention component. ## Sorting Display sorted suggestions in ascending or descending order. ## Number of suggestions Limit the number of items displayed in the suggestion list. ## UI customization The appearance (style) of each item displayed in the suggestion list and the selected value can be customized. ## Suggestions with icons Include icons in the suggestion list items to improve visual representation. ## Item template Customize each suggestion list item by using item templates. ## Display template Customize the appearance of the selected items displayed in the Blazor Mention component. ## Empty record template Customize the empty result text in the suggestion pop-up. ## Loading template Customize the appearance of the suggestion pop-up while data is loading. ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) accessibility practices to work with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) best practices for implementing keyboard interaction. - Adheres to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards in the design of UI visual elements such as foreground color, background color, line spacing, text, and images. - Supports right-to-left (RTL) text direction for users working with RTL languages like Hebrew, Arabic, or Persian. ## Developer-friendly APIs Developers can control the appearance and behaviors of the Mention component using a rich set of APIs. ## Built-in themes The Blazor Mention component supports several built-in themes, such as Fluent, Bootstrap 5, Tailwind CSS, Material, high contrast, and more. Users can customize any of these built-in themes or create new themes to achieve their own desired look and feel either by simply overriding Sass variables or using our Theme Studio application. - [Theme Studio application](https://ej2.syncfusion.com/themestudio/?theme=material) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Image Editor - Edit and Annotate Images | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-image-editor # Blazor Image Editor Component - Built-in support for cropping, rotating, flipping, zooming, and applying filters to images. - Easily export edited images in JPEG, PNG, and SVG formats. - Annotate images with shapes and customize their appearance. ## Overview The Blazor Image Editor is a UI component for editing and enhancing images. With built-in support for cropping, rotating, flipping, zooming, and applying filters, this component makes it easy to fine-tune your edits to achieve the desired results. Additionally, the Blazor Image Editor allows users to annotate images with shapes such as rectangles, ellipses, lines, and text, as well as freehand drawings. ## Selection and cropping The Blazor Image Editor makes it easy to get a perfect crop every time using multiple selection options, including square, circle, and customizable aspect ratios. Easily drag and resize the selection region to precisely crop the desired area of the image. ### Custom selection Allows users to draw a custom selection rectangle on an image that can be repositioned by dragging and resizing it to get the desired selection. ### Square selection Crop images into perfect square regions or maintain the aspect ratios of the images. ### Circle selection Crop images into perfect circular regions. ### Predefined aspect ratios Customize selection regions for cropping your images according to predefined aspect ratios, including 4:3, 7:5, 16:9, and more. ## Annotations The Image Editor has multiple annotation tools, including text, freehand drawings, images, and shapes like rectangles, ellipses, and lines. ### Text annotation With the text annotation tool, users can add captions, labels, or other types of text-based information. Text annotations can be inserted anywhere on the image and customized by changing their color, outline color, fill color, outline width, font family, font size, and font styles, such as bold and italic. ### Freehand drawing annotation Add hand-drawn content to an image using a mouse or touch. With the freehand drawing annotation, users can customize the pen color and stroke width to suit their needs. Also, the freehand drawing annotation can be used in combination with other annotation tools, such as text and shapes, to create rich, annotated images. ### Shapes annotation Add shapes, such as rectangles, ellipses, and lines, to an image. With the shape annotation tool, customize the border color, fill color, and border width of the shapes. ### Image annotation This feature allows users to insert and display multiple images in addition to the main image they are editing. These image annotations can be used for different purposes, such as adding logos, watermarks, or decorative elements to an image. ### Path annotation This feature enables manipulation of paths, which are editable curves consisting of anchor points connected by control handles that allow precise control over object boundaries. Users can create and modify custom shapes within an image using paths. ### Arrow annotation This feature provides the ability to draw and customize arrows with precision. Arrows can be created, modified, and personalized according to user preferences. They highlight objects or draw attention to specific details, effectively communicating the intended focal point. ## Z-order support This feature allows users to adjust the positioning of annotations, particularly for designing personalized templates like greeting cards or posters, where managing the layering of multiple annotations is crucial for a polished final product. ## Transform images The Image Editor has built-in support for transforming images in various ways, including rotating, flipping, and zooming. ### Rotate an image Users can rotate images with annotations clockwise or counterclockwise. ### Flip an image Flip images with annotations horizontally or vertically useful for creating a mirror image of the original image. ## Undo and redo The Image Editor provides an option to undo and redo changes made to an image. The undo option helps reverse the last action performed and the redo option reverses the last undo action performed with the Image Editor. ## Zoom in/out images Users can adjust the size of an image by zooming in or out to fine-tune their edits. The pan tool can also be used to reveal hidden areas of an image. ## Pinch zoom Pinch zoom is a technique for zooming in and out an image by using your fingers. On touch-enabled devices, you can use two fingers to pinch and zoom in or out. ## Mouse wheel zoom Mouse wheel zoom is a method of zooming in and out an image using your mouse. To zoom in, press the ctrl key and roll your mouse wheel forward, and to zoom out, roll your mouse wheel backward. ## Keyboard zoom To zoom in, hold down the Ctrl key and press the + button and to zoom out, hold down Ctrl and press the - button. This will adjust the size of the image on your screen making it either larger or smaller depending on your needs. ## Loading an image initially Easily load an image into the Blazor image editor using a base 64 string or URL, with support for PNG, JPEG, and SVG image formats. ## Image Editor toolbar Offers a wide range of tools for annotating, selecting, cropping, zooming, panning, rotating, flipping, filtering, and more, enabling users to fully edit and manipulate their images. Additionally, users can customize the toolbar by defining their own items or the entire toolbar. ## Exporting and saving images Easily save an image with a specified file name, file format, and image quality. Supported file formats for saving an image include PNG, JPEG, and SVG types. This feature provides more control over the output, ensuring that users can save their work exactly as they need it. ## Quick access toolbar This feature enhances the Image Editor control by showing a toolbar when you select annotations like rectangle, ellipse, line, arrow, text, and freehand draw. It offers quick access to actions such as clone, delete, and edit text. ## Frame support Users can add decorative borders or frames around images to enhance the visual appeal of an image. ## Resize support Users can adjust the size and dimensions of an image to suit their needs, such as for printing, web display, or other purposes. ## Straightening support Users can adjust an image by rotating it clockwise or counter clockwise. The rotating degree value should be within the range of -45 to +45 degrees for accurate straightening. Positive values indicate clockwise rotation, while negative values indicate counter clockwise rotation. ## Redact support Users can conceal sensitive information by applying blur or pixel effects to specific areas of an image. This feature is particularly valuable for protecting privacy and complying with data protection regulations, making it easier to securely share images without compromising sensitive information. ## Localization Localize user interface strings of the Blazor Image Editor component using the localization (l10n) library. ## Touch-friendly editing For a seamless experience on all devices, the Blazor Image Editor includes a responsive mode that adapts the UI for mobile devices and offers a great user experience on phones, tablets, and desktops. ## Developer-friendly APIs With its extensive set of APIs, developers can control the appearance and behaviors of the Image Editor to suit their needs. ## Built-in themes The Blazor Image Editor features built-in themes such as Bootstrap 5, Tailwind CSS, Fluent, high contrast, and more. Users can customize these themes or create their own using SASS variables or the Theme Studio application to achieve the desired look and feel. - [Theme Studio application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Other supported frameworks In addition to Blazor, the Image Editor component is also available for the React, Vue, and JavaScript frameworks. You can access the component on these platforms using the links below. - [React Image Editor](https://www.syncfusion.com/react-components/react-image-editor) - [Vue Image Editor](https://www.syncfusion.com/vue-components/vue-image-editor) - [JavaScript Image Editor](https://www.syncfusion.com/javascript-ui-controls/js-image-editor) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Data Form | Dynamic Form | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-data-form # Blazor Data Form Component - Simplify form creation by automatically generating form fields based on the data model. - Reduce manual effort required for field setup and form design process. ## Overview The Syncfusion Blazor Data Form component simplifies form creation in Blazor applications by providing a rich set of features for automatic field generation, layout customization, and seamless data binding. Whether working with simple forms or complex data models, the Data Form component streamlines the development process while offering flexibility for customization. ## Editors The Blazor Data Form component supports built-in editors for primitive data types such as string, integer, date-time, date-only, time-only, and enumeration. It also provides custom editors to enhance the user experience. ## Auto-generation of form fields Automatically generate form fields based on the properties of the data model. Data Form creates built-in components automatically based on the field type, such as TextBox, NumericTextBox, DatePicker, or TextArea. It saves development time by eliminating the need to define each form field manually. ## Data binding Enable seamless two-way data binding between the form and the data model. This will ensure that users directly set the values of the model and save time. When the form is provided with a data model, it will automatically generate an input field for every property in the model, depending on its type. ## Customizable form fields The form fields can be customized by changing their appearance, data binding model values, adding placeholders, and more. ## Form validation and error handling The Blazor Data Form can be validated in its entirety through the built-in Blazor validation and other validation methods. Users can provide validation rules directly on the model using attributes such as Required, Range, or MaxLength. Additionally, any field that the form contains can be validated individually. The validation error message can be displayed in three ways: as a validation summary, inline, or using tooltip options. ## Custom form editor The Blazor Data Form component offers a straightforward method to modify the default field editors according to the provided data type. Users can select a date picker, date-time picker, or time picker for the DateTime type, and a text box or text area for the string fields. ## Column layout The component offers a straightforward method for organizing form fields into multiple columns with column-spanning options, enhancing the visual layout and user experience. ## Form group layout The Blazor Data Form component provides options for grouping the form fields, allowing the organization of related fields together. ## Form template The Data Form component allows easy customization of the labels, form editor component, and validation messages in any use case. ## Right to left (RTL) rendering The Blazor Data Form component supports right-to-left configuration for users who communicate in a right-to-left language script, such as Arabic and Hebrew. ## Styling and theming The Data Form offers multiple built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, and high contrast. Users can customize these built-in themes or create new ones in order to achieve the desired appearance and style. This can be done by overriding the Sass variables or utilizing the Theme Studio application. ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#button) accessibility practices to work with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#button) best practices for implementing keyboard interaction. - Uses UI visual elements such as foreground color, background color, line spacing, text, and images designed based on [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards. ## Data Form code example Easily get started with the Blazor Data Form using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor Data Form example](https://blazor.syncfusion.com/demos/data-form/default-functionalities), which shows how to render and configure the component. - razor [Get started with Blazor server-side Data Form](https://blazor.syncfusion.com/documentation/data-form/getting-started) [Get started with Blazor web app Data Form](https://blazor.syncfusion.com/documentation/data-form/getting-started-with-web-app) [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Dropdown Tree | Customized Item Selection | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-dropdowntree # Blazor Dropdown Tree - Display hierarchical data - Easily present a selection list of hierarchical data in a tree-like structure. - Use built-in features like data binding, load on demand (lazy loading), multi-selection, check boxes, and more. - Customize the selection pop-up and tree items with different template options. ## Overview The Dropdown Tree component allows users to select a single value or multiple values in an input box from hierarchical data in a tree-like structure. It has several out-of-the-box features, such as data binding, checkboxes, templates, UI customization, accessibility, and preselected values. ## Dropdown Tree code example Easily get started with the Blazor Dropdown Tree using a few simple lines of C# code, as demonstrated below. Also explore our [Blazor Dropdown Tree example](https://blazor.syncfusion.com/demos/dropdown-tree/default-functionalities?theme=bootstrap5), which shows how to render and configure the Blazor Dropdown Tree. - razor ## Data binding Bind data to the Dropdown Tree component from different data sources, either self-referential data that contains a list of objects with ParentID mapping or heirarchical data that contains a nested list of objects. Data can be local or in any remote service and fetched using different kinds of adapters like OData, OData V4, URL, and web API. - [Data binding documentation](https://blazor.syncfusion.com/documentation/dropdown-tree/data-binding) ## Render modes The Dropdown Tree component has different render modes to visualize selected items. ### Box mode The selected items are displayed as chips (boxes) with removable icons in the Dropdown Tree input box. ### Delimiter mode The selected items are displayed with the delimiter character in the Dropdown Tree input box. ### Default mode When the component is in focus, selections are displayed as chips. When not in focus, selections are displayed with delimiters. ## Checkboxes The Blazor Dropdown Tree component provides built-in support for checkboxes, allowing users to select more than one item. Enabling the checkboxes and autocheck functionality makes the parent and child items dependent on each other. - [Checkboxes documentation](https://blazor.syncfusion.com/documentation/dropdown-tree/checkbox) ## Multiple selection The Dropdown Tree component allows users to select more than one item in the pop-up using the multiselection functionality. Ctrl and Shift key combinations can be used for node selection. - [Multiselection documentation](https://blazor.syncfusion.com/documentation/dropdown-tree/selection#multi-selection) ## UI customization with templates Use templates to change the appearance of the selection pop-up for tree items,the header and footer of the pop-up tree. ### Header template Design your own header for the pop-up tree using the header template. - [Header template documentation](https://blazor.syncfusion.com/documentation/dropdown-tree/templates#header-template) ### Item template Define the custom appearance of each tree item using the item template. - [Item template documentation](https://blazor.syncfusion.com/documentation/dropdown-tree/templates#item-template) ### Value template Define the custom appearance of selected values in the Dropdown Tree input using the value template. Control the presentation of the selected items, such as adding custom HTML, text formatting, or icons to match your application’s design. - [Value template documentation](https://blazor.syncfusion.com/documentation/dropdown-tree/templates#value-template) ### Footer template Design your own custom footer for the pop-up tree using the footer template.This allows you to fully customize the footer content according to your requirements, offering flexibility in design and functionality. - [Footer template documentation](https://blazor.syncfusion.com/documentation/dropdown-tree/templates#footer-template) ## Filtering The Blazor Dropdown Tree component supports in-built filtering through which users can filter the required items based on the characters searched in the search box. - [Filtering documentation](https://blazor.syncfusion.com/documentation/dropdown-tree/filtering) ## Built-in and customizable themes The Blazor Dropdown Tree component supports built-in themes: Material, Material 3, Bootstrap, Fabric (Office 365), Tailwind CSS, Fluent, and high contrast. Users can customize these built-in themes or create new themes to achieve their desired look and feel by either overriding Sass variables or using our Theme Studio application. - [Theme Studio application.](https://blazor.syncfusion.com/documentation/appearance/theme-studio) ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility to make the Dropdown Tree accessible to screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing keyboard interaction. - Uses [WCAG 2.0](https://www.w3.org/TR/WCAG20/)-based design for UI visual elements such as foreground color, background color, line spacing, text, and images. - Supports right-to-left (RTL) direction for users working with RTL languages like Hebrew and Arabic. ## Developer-friendly APIs Developers can customize all UI elements and component their behaviors according to the end user’s requirements using the component’s rich set of client-side APIs. ## Other supported frameworks The Dropdown Tree is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React Dropdown Tree](https://www.syncfusion.com/react-components/react-dropdown-tree) - [Angular Dropdown Tree](https://www.syncfusion.com/angular-components/angular-dropdown-tree) - [JavaScript Dropdown Tree](https://www.syncfusion.com/javascript-ui-controls/js-dropdown-tree) - [Vue Dropdown Tree](https://www.syncfusion.com/vue-components/vue-dropdown-tree) ## Supported browsers The Blazor Dropdown Tree works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [Documentation](https://blazor.syncfusion.com/documentation/dropdown-tree/getting-started) [Introducing the New Blazor Dropdown Tree Component](https://www.syncfusion.com/blogs/post/new-blazor-dropdown-tree) [Getting Started with the Blazor Dropdown Tree Component](https://www.youtube.com/watch?v=LQTn69p97O0) ##### Blazor Stepper Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-stepper # Blazor Stepper Component - Illustrate a visual representation of a multi-step process. - Features such as step orientation, linear step progression, label positioning, and more. - Provide various step types, including indicator and label, only indicator, or only label. - Easily customize the default appearance and content of each step using templates. ## Overview The Blazor Stepper is a highly customizable component that enables users to navigate through a series of steps or stages in a process within a web application. Steppers display a list of steps, highlighting the current step, and allow users to move between steps. It includes several built-in features, such as different step types, orientation, linear flow, label positions, and template customization. ## Step types The Blazor Stepper component supports the step types listed below. - Default: Displays steps with a combination of step indicators and labels. - Indicator: Displays steps with only the step indicators. - Label: Displays steps with only the step labels. ## Orientations Supports orientation for displaying layouts: Horizontal, showing steps side-by-side, and vertical, showing steps one below the other. ## Linear flow Enable a step-by-step progression, ensuring completion of each step before moving on to the next. ## Tooltips The Blazor Stepper component supports tooltips to show additional information when users hover over a step, such as a label or text. Tooltips can be customized using templates to provide more detailed information about steps. ## Label positions Supports positioning the labels at the top, bottom, left, or right. ## Validation state The Blazor Stepper component enables you to set the validation state for each step, displaying a success or error icon. ## Built-in themes The Blazor Stepper supports these built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize one of these built-in themes or create new themes to achieve their desired look and feel by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio application](https://blazor.syncfusion.com/themestudio/) ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility practices to work with screen readers and assistive devices. - Based on [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, UI visual elements such as foreground color, background color, line spacing, text, and images are designed. - Supports right-to-left (RTL) text direction for users working with RTL languages like Hebrew, Arabic, or Persian. ## Developer-friendly APIs The Blazor Stepper component offers APIs for customizing its appearance and behavior, as well as templates for personalizing the look and feel. With these APIs, developers can create a unique and highly personalized Stepper that fits seamlessly into their applications. ## Blazor Stepper Code example Easily get started with the Blazor Stepper using a few simple lines of C# code, as demonstrated below. Also, explore our [Blazor Stepper Example](https://blazor.syncfusion.com/demos/stepper/default-functionalities?theme=fluent2), which shows you how to include the Blazor Stepper component with highlight customization. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/rZrSjMXmLmGhEqsV) - razor [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Timeline Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-timeline # Blazor Timeline Component - A visual representation of chronological information such as events, user activities, and more. - Features like orientation, item alignment, reverse timeline, and more. - Customize the default appearance, including styling the dot item, templated content, and more. - Responsive and adaptable to any screen size. ## Overview The Blazor Timeline is a tool to display a series of data in chronological order, providing a visually compelling and user-friendly experience. This showcases user activities, tracking progress, narrating historical timelines, and more. It includes several built-in features, such as orientation, opposite content, item alignment, reverse timeline, and template customization. ## Orientations The Blazor Timeline component has two orientation modes: - Horizontal: Displays items side-by-side. - Vertical: Default orientation that displays items one below the other. ## Opposite content Positioned opposite to the item content, the opposite content provides additional information to each Timeline item. ## Items alignment The Blazor Timeline component supports aligning the items’ content and opposite content as follows: - Before: Align the item content to the left (or top for horizontal orientation) and the opposite content to the right (or bottom). - After: The default alignment aligns the item content to the right (or bottom for horizontal orientation) and the opposite content to the left (or top). - Alternate: Align the content of the first item to the right and the opposite content to the left, and vice versa for subsequent items. - AlternateReverse: Align the content of the first item to the left and the opposite content to the right, and vice versa for subsequent items. ## Dot item Allows you to set icons, background colors, or images to personalize the appearance of dots associated with each timeline item. ## Reverse timeline Display timeline items in reverse order, considering the alignment of items, offering flexibility, and enhancing the user experience. ## Templates The Blazor Timeline component supports templates to customize the default appearance, including styling the dot items, templated content, and more. ## Customization Customize timeline items’ dot sizing, dot outer spacing, connector styling, and more, enabling it to fit the application’s needs. ### Dot sizing Customizing the size of the dot items enhances the Timeline component’s appearance. ### Dot outer spacing Adjust the space between dot items and connectors in the Timeline component. ### Connector styling Customize the size, color, and dashed styling of the connector for each item. ### Dot styling Customizing the shape, outline color, and spacing of the dot items enhances their appearance and makes them stand out. ## Built-in themes The Blazor Timeline supports these built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize one of these built-in themes or create new themes to achieve their desired look and feel by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio application](https://blazor.syncfusion.com/themestudio/?theme=fluent) ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility practices to work with screen readers and assistive devices. - Based on [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, UI visual elements such as foreground color, background color, line spacing, text, and images are designed. - Supports right-to-left (RTL) text direction for users working with RTL languages like Hebrew, Arabic, or Persian. ## Developer-friendly APIs The Blazor Timeline component offers APIs for customizing its appearance and behavior, as well as templates for changing its look and feel. With these APIs, developers can create a unique and highly customized timeline that fits seamlessly into their applications. ## Blazor Timeline Code example Easily get started with the Blazor Timeline using a few simple lines of C# code, as demonstrated below. Also, explore our [Blazor Timeline Example](https://blazor.syncfusion.com/demos/timeline/default-functionalities?theme=fluent2), which shows you how to include the Blazor Timeline component with highlight customization. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/rXVfCNLICuWZDrLR) - razor [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor OTP Input Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-otp-input # Blazor OTP Input Component - Offers a rich set of features and a user-friendly experience for one-time password entry. - Fully customizable appearance, including input types, styles, separators, and more to meet specific application needs. - Responsive design adapts seamlessly to any device. ## Overview The Blazor OTP Input is a versatile form component designed for entering one-time passwords (OTP) during multi-factor authentication. It accepts a single character per input field, ensuring a focused and straightforward user experience. It offers extensive customization options with several built-in features, including input types, input lengths, styling modes, placeholders, separators, and more. ## Input types The Blazor OTP Input component has three input types: - Number: The default input type, allowing digit entries only. - Text: Allows alphanumeric and special character entries for complex OTP inputs. - Password: Similar to the text type, but masks input characters for privacy. ## Styling modes The built-in styling modes are as follows: - Outlined: The default styling mode, displaying a border around the input fields. - Filled: Fills the input fields with a background color and includes an underline. - Underlined: Highlights each input field with an underline for a sleek look. ## Placeholders Display a hint character in each input field to indicate the expected value. If defined as a single character, it will be shown in all fields; otherwise, each field will display a part of the string based on its length. ## Separators Specify a character to be placed between input fields, customized to enhance the visual separation of OTP inputs. ## Validation state The Blazor OTP Input component allows you to set the validation state, displaying success, warning, or error states based on the input validation. ## Customization Customize the length of the OTP Input, styling for each field, the focusing state, and more. ### Input length Adjust the length of the input fields, with a default display of four input fields. ### Rounded fields Customize the appearance of the OTP Input with rounded fields, enhancing its visual appeal. ### Field styling Customize the color, background color, and focus color of the input fields to enhance their appearance and make them stand out. ## Built-in themes The Blazor OTP Input supports these built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize one of these built-in themes or create new themes to achieve their desired look and feel by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio application](https://blazor.syncfusion.com/themestudio/?theme=fluent) ## Accessibility - Full support for [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility practices to work with screen readers and assistive devices. - UI visual elements such as foreground color, background color, line spacing, text, and images are designed based on [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards. - Right-to-left (RTL) text direction can be set for users working with RTL languages like Hebrew, Arabic, or Persian. ## Developer-friendly APIs The Blazor OTP Input component offers APIs for customizing its appearance and behavior, as well as templates for customizing its look and feel. With these APIs, developers can create a unique and highly customized OTP Input that fits seamlessly into their applications. ## Blazor OTP Input Code example Easily get started with the Blazor OTP Input using a few simple lines of C# code, as demonstrated below. Also, explore our [Blazor OTP Input Example](https://blazor.syncfusion.com/demos/otp-input/default-functionalities?theme=fluent2), which shows you how to include the Blazor OTP Input component with highlight customization. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/hNryZsjGikFwlAIu) - razor [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor 3D Charts | Live Tracking | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-3d-charts # Blazor 3D Charts - Beautiful and Interactive Control - Visualize and analyze data with column and bar charts. - Interact and explore 3D charts with features such as tooltip, selection, highlights, and more. - Experience seamless rotation and tilt in 3D Charts. ## Overview Blazor 3D Chart is a graphical representation of data in three dimensions, showcasing relationships and trends among variables. Unlike traditional 2D charts, 3D charts add depth to the visualization, allowing for a more immersive and comprehensive understanding of data patterns. ### Interactive 3D charts The tooltip cursor allows users to interact with the chart and obtain detailed information about data points. ### Admirable feature set The Blazor 3D Chart supports legends, axis types, data labels, rotation, tilt, selection, and highlights. ### Adapts to any resolution The 3D charts have a highly responsive layout and an optimized design for desktops, touchscreens, and phones. They work well on all mobile phones that use iOS, Android, or Windows OS. ### Attractive, customizable themes Cutting-edge design with several built-in themes, such as Material 3, Fluent, Tailwind CSS, Bootstrap, Material, and Fabric. ### Globalization and localization Users from different locales can use the control to format dates, currency, and numbers to suit their preferences. ### Elegant animation The 3D Chart for Blazor provides fluid animation to present data with smooth transitions. ## Blazor 3D Charts Code Example Easily get started with the Blazor 3D Chart using a few simple lines of C# code as demonstrated below. Also, explore our [Blazor 3D Chart Example](https://blazor.syncfusion.com/demos) that shows you how to render and configure 3D Charts in Blazor. - razor ## Series types The 3D charts can plot over six chart types, including column, bar, stacking column, stacking bar, 100% stacked column, and 100% stacked bar. ## Legend The 3D charts support legends that provide additional information about a series with customization options. ## Tooltip The 3D chart control provides options to display tooltips with details about pointer values on mouse hover. ## Selection and Highlight Select or highlight data points in a series for easy understanding of the selected data. Adding pattern and color to the selected data makes charts more interactive. ## Print and Export Export Blazor 3D Charts to PDF documents or to image formats such as PNG and JPEG on the client side. Print the rendered 3D charts and graphs directly from the browser. ## Axis types The 3D charts can plot different data types such as numbers, datetime, logarithmic, and string. The chart’s axis elements can be customized further to make an axis more readable. ## Data labels The 3D charts support data labels to annotate points to improve the readability of data. ## Customization Customize the color of data points, the depth of the wall, and the wall color of the 3D charts using built-in APIs. ## Multiple series Plot multiple series in a single chart to compare different data values. Enabling legends and tooltips provides more information about individual series. ## Interactive chart The end-user experience is greatly enhanced by including a set of interactive features such as rotation, tilt, selection, and highlight. ### Keyboard navigation Every element in the Blazor 3D Chart is keyboard accessible. Major features like tooltips, legends, selection, and highlights can be used with keyboard commands alone. No mouse interaction is required. This helps in creating highly accessible applications. ### Screen reader The Blazor 3D Charts view has complete WAI-ARIA accessibility support. The 3D chart’s UI includes high-contrast visual elements that help visually impaired people to have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers. ### Right to left (RTL) Right-to-left rendering allows displaying the text and layout of 3D charts from right to left. This improves the user experience and accessibility for RTL languages. [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Rich Text Editor | WYSIWYG Editor | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-rich-text-editor # Blazor Rich Text Editor - Markdown Editor Component - Edit WYSIWYG HTML with rich tools for web and mobile apps. - Integrate into blogs, messaging apps, email composers, and forums. - Use as an inline editor for in-place editing of any editable element. - Enjoy a cutting-edge UI and toolbar customization. ## Overview The Blazor Rich Text Editor is a feature-rich WYSIWYG HTML editor and WYSIWYG Markdown editor. It is used to create blogs, forum posts, notes sections, support tickets (incidents), comment sections, messaging applications, and more. The control provides an efficient user interface for a better editing experience with mobile support. It has various of tools to edit and format rich content and returns valid HTML markup or Markdown (MD) content. It allows users to insert images, links, tables, and lists with modular architecture. ### WYSIWYG editor The Blazor Rich Text Editor component can be used as a [WYSIWYG HTML editor](https://blazor.syncfusion.com/documentation/rich-text-editor/editor-modes#html-editor) or a [Markdown editor](https://www.syncfusion.comblazor-rich-text-editor/wysiwyg-markdown-editor), and it also supports [iframe](https://blazor.syncfusion.com/documentation/rich-text-editor/iframe) editing with configurable iframe characteristics. ### Easy interaction Users can [easily format the text and paragraphs](https://blazor.syncfusion.com/documentation/rich-text-editor/style). Set the foreground and background colors, font type, italicization, underlining, strikethrough, and bolding. You can also add ordered (numbered) or unordered (bulleted) lists and change the editor’s size. ### Flexible editing For a better editing experience, the Blazor Rich Text Editor component offers a variety of tools and choices. Users can quickly insert [images](https://blazor.syncfusion.com/documentation/rich-text-editor/tools/insert-image), [videos](https://blazor.syncfusion.com/documentation/rich-text-editor/tools/video), [hyperlinks](https://blazor.syncfusion.com/documentation/rich-text-editor/tools/link-manipulation), and [tables](https://blazor.syncfusion.com/documentation/rich-text-editor/tools/table-manipulation); merge [table cells](https://blazor.syncfusion.com/documentation/rich-text-editor/tools/table-manipulation#cell-merge-and-split); and [configure keys](https://blazor.syncfusion.com/documentation/rich-text-editor/enter-key). ### Preview the HTML code Examine and edit the HTML code directly in the source code and [view the preview result](https://blazor.syncfusion.com/demos/rich-text-editor/default-functionalities?theme=bootstrap5) in the (HTML live editor). ### Toolbar with rich set of tools The WYSIWYG Rich Text Editor for Blazor offers a [variety of toolbar](https://blazor.syncfusion.com/demos/rich-text-editor/types?theme=bootstrap5) options that are fully customizable, such as multirow, expanding, quick, and floating toolbars. The tool commands are grouped based on related functionality. ### Adapts to any resolution The Rich Text Editor has a highly responsive layout and an optimized design for desktops, tablets, and smartphones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Integrate with third-party libraries It’s easy to integrate third-party libraries like a spell checker, code mirror, etc., with the Rich Text Editor to improve the content. ### Globalization and localization [Enable users from different locales](https://blazor.syncfusion.com/documentation/rich-text-editor/globalization) to use the Rich Text Editor by formatting dates, currency, and numbering to suit preferences. ## Smart Rich Text Editor with AI integration Empower your writing with the AI-enhanced Blazor Rich Text Editor. Correct grammar, rephrase sentences, translate languages, and summarize content instantly, all within your app. [Smarter writing starts here](https://blazor.syncfusion.com/demos/ai-richtexteditor/ai-assistant?theme=bootstrap5) ## Blazor Rich Text Editor code example [Get started with the Blazor Rich Text Editor](https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started) using a few simple lines of C# code, as demonstrated below. Also, explore this [Blazor Rich Text Editor example](https://blazor.syncfusion.com/demos/rich-text-editor/default-functionalities?theme=bootstrap5), which shows how to render and configure the editor in Blazor. - razor ## HTML editor toolbar The Blazor WYSIWYG text editor toolbar provides a variety of commands for editing and formatting the content. You can format text and paragraphs and insert images, hyperlinks, tables, and lists, etc. The tool commands are grouped based on related functionality. - [HTML editor toolbar simple example](https://blazor.syncfusion.com/demos/rich-text-editor/types) ### Multi-row toolbar The overflow toolbar commands are wrapped into following rows within the toolbar. - [Multiple-row toolbar documentation](https://blazor.syncfusion.com/documentation/rich-text-editor/toolbar#multi-row-toolbar) ### Expand toolbar The overflow toolbar commands hidden in the next row become visible when the toolbar is expanded via the expand icon. - [Expand toolbar documentation](https://blazor.syncfusion.com/documentation/rich-text-editor/toolbar#expand-toolbar) ### Quick toolbar This toolbar contains frequently used commands related to text, images, tables, and links. It helps access and format these elements quickly. You can customize the toolbar itself. - [Quick toolbar documentation](https://blazor.syncfusion.com/documentation/rich-text-editor/toolbar#quick-toolbar) ### Floating toolbar The HTML WYSIWYG editor toolbar does not stick to the top of the editor, but floats within the editor area while scrolling the editor page. - [Floating toolbar documentation](https://blazor.syncfusion.com/documentation/rich-text-editor/toolbar#floating-toolbar) ### Fully customizable The toolbar buttons of the Blazor Rich Text Editor component are fully customizable. Add or remove buttons and group commands into categories. Users can design the toolbar based on application needs, like an HTML blog editor or HTML email composer. ### Custom tool Add your own commands (tools) with actions to the toolbar alongside the built-in commands. - [Custom tools documentation](https://blazor.syncfusion.com/documentation/rich-text-editor/tools/custom-tool) ## Inline mode Make the editor show up when you click or select the content in an editable area. - [Inline HTML editor example](https://blazor.syncfusion.com/demos/rich-text-editor/inline?theme=bootstrap5) ## Mention and hashtag When composing content in the Blazor Rich Text Editor, users or groups can be tagged or selected from the suggestion list. - [Mention and hashtag example](https://blazor.syncfusion.com/demos/rich-text-editor/mention-integration?theme=bootstrap5) ## Editing experience The Blazor Rich Text Editor provides a wide range of tools and options for a better editing experience. ### Insert images You can insert images in your content from a local path or server path with image captions and then link URLs to the images. You can upload images to a server with drag-and-drop or file upload. Additionally, the editor offers options to insert images in BLOB or Base64 formats. - [Insert image documentation](https://blazor.syncfusion.com/documentation/rich-text-editor/tools/insert-image) ### Insert hyperlinks You can insert or change hyperlinks with customization options such as display text, tooltip, and links to be opened in a new window. - [Insert links documentation](https://blazor.syncfusion.com/documentation/rich-text-editor/tools/link-manipulation) ### Insert tables You can insert and edit HTML tables to display grid-like tabular data in the Rich Text Editor. Manipulate a table and its elements dynamically: insert or remove rows and columns, resize the whole table or specific rows or columns, remove a table. - [Insert HTML tables examples](https://blazor.syncfusion.com/demos/rich-text-editor/overview) ### Table cell merge and split Merge two or more row or column cells into a single cell with their contents. Also, a single cell can be split both horizontally and vertically. - [Table cell merge and split examples](https://blazor.syncfusion.com/demos/rich-text-editor/default-functionalities?theme=bootstrap5) ### Text alignment Align your content to the left, center, or right, or justify it. ### Enter and Shift+Enter key configuration The Rich Text Editor allows users to customize the tag inserted when pressing the Enter key and Shift+Enter keys. The following tags can be configured: - P: When ‘P’ is configured, pressing Enter or Shift+Enter will create a ‘p’ tag. - DIV: When ‘DIV’ is configured, pressing Enter or Shift+Enter will create a ‘div’ tag. - BR: When ‘BR’ is configured, pressing Enter or Shift+Enter will create a ‘br’ tag. - [Enter and Shift+Enter key configuration examples](https://blazor.syncfusion.com/demos/rich-text-editor/enterkeyconfiguration?theme=bootstrap5) ## Formatting text - Format the selected content, whole paragraphs, or specific words or characters. - Format headings, quotations, code, paragraphs, etc. - Bold, italicize, underline, strikethrough, or capitalize letters and words. - Change paragraph indentation and spacing. - Select fonts and sizes. - Use subscripts and superscripts. - Select font color and the background color for the content. ## Auto formatting for Markdown syntax Autoformat enables quick content formatting using Markdown-like shortcodes. This eliminates the need for toolbar buttons or dropdowns for common formatting. As Markdown syntax such as # for headings, ** for bold, and * for italics are typed, the editor automatically converts it into HTML elements. ## Checklists Checklists (to-do lists) can be created directly within the Rich Text Editor. Users can easily add interactive checkbox items to their content, enabling task tracking and management within documents. ## Adding custom lists Create ordered (numbered) or unordered (bulleted) lists to organize the content in the Blazor Rich Text Editor. Change the bullet appearance for the unordered lists to circles or squares. Use different numbering formats for ordered lists such as lowercase Greek or uppercase Roman. ## Quick insert for table rows and columns Users can insert rows and columns into a table quickly. When hovering the mouse near the table edges, a “+” icon appears, enabling users to add rows or columns with a single click. ## Line height Users can adjust vertical spacing between lines of text, giving them control over how tightly or loosely the text is packed within paragraphs. This helps improve readability and visual balance in the content layout. ## Full screen text editor This built-in option makes the WYSIWYG HTML editor full screen (a full-page editor) for editing the content. ## Paste from Microsoft Word and Excel The Blazor Rich Text Editor offers built-in options to paste content with images from Microsoft Word, Microsoft Outlook, and Microsoft Excel by filtering out tags, attributes, and styles. Additionally, choose whether the content should be pasted as plain text, with cleaned styles, or with source formatting. ## Auto hyperlink to URL The control turns text into a hyperlink automatically when a user types a URL as plain text. ## Form validations The RTE seamlessly supports forms and obtains values on form submission. The two types of validation are: - Required validation - Maximum length validation - [Form validation documentation](https://blazor.syncfusion.com/documentation/rich-text-editor/form-validation) ## Limit content length Users can restrict the number of characters in a particular section. ## Resizable editor The Blazor Rich Text Editor can be resized, allowing users to widen or shrink the content area. - [Resizable editor documentation](https://blazor.syncfusion.com/documentation/rich-text-editor/resizable-editor) ## Format painter Use the format painter to copy formatting and apply it to your content, eliminating the need for tedious reformatting. Access the format painter through the toolbar or keyboard shortcuts for quick and easy application. Take advantage of the sticky mode by double-clicking the toolbar button, which allows you to apply formats to multiple locations. ### Cut, copy, and paste The Blazor Rich Text Editor component supports clipboard operations (cut, copy, and [paste](https://blazor.syncfusion.com/documentation/rich-text-editor/paste-cleanup)). ### Undo redo manager The Blazor Rich Text Editor manages the history of [undo and redo](https://blazor.syncfusion.com/documentation/rich-text-editor/miscellaneous#undoredo-manager) actions, enabling users to experiment with editing. ### Print the text editor content Print the WYSIWYG Rich Text Editor content either by using the print option from the toolbar or programmatically with applied formats. ### Touch-friendly and responsive WYSIWYG editor The Blazor Rich Text Editor (mobile HTML editor) recognizes touch gestures, allowing users to swipe left or right to move the toolbar. The responsive, mobile-friendly design provides the best user experience on all mobiles, tablets, and desktop form factors. ### Built-in and customizable themes The Blazor Rich Text Editor is shipped with several built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. ### Developer-friendly APIs There are sufficient client-side APIs available to enhance the process of content editing. ### Keyboard navigation The RTE ensures that every cell is accessible using the keyboard. Major features like sort, select, and edit can be performed using keyboard commands alone; no mouse interaction is required. This helps in creating highly accessible applications using this component. - [Keyboard navigation documentation](https://blazor.syncfusion.com/documentation/rich-text-editor/keyboard-support) ### Screen reader The editor view has complete WAI-ARIA accessibility support. The Rich Text Editor UI includes high-contrast visual elements that help visually impaired people to have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers. - [Screen reader documentation](https://blazor.syncfusion.com/documentation/rich-text-editor/accessibility) ### Right to left (RTL) The RTE supports right-to-left rendering, allowing the text and layout of the text editor to be displayed from right to left. This improves the user experience and accessibility for users of RTL languages such as Arabic, Farsi, and Hebrew. - [Right to left documentation](https://blazor.syncfusion.com/documentation/rich-text-editor/globalization#enable-rtl-mode) Edit HTML with WYSIWYG tools 25+ interactive demos ## Other supported frameworks The Rich Text Editor is also available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [React Rich Text Editor](https://www.syncfusion.com/react-components/react-rich-text-editor) - [Angular Rich Text Editor](https://www.syncfusion.com/angular-components/angular-wysiwyg-rich-text-editor) - [JavaScript Rich Text Editor](https://www.syncfusion.com/javascript-ui-controls/js-rich-text-editor) - [Vue Rich Text Editor](https://www.syncfusion.com/vue-components/vue-wysiwyg-rich-text-editor) ## Supported browsers The Blazor Rich Text Editor works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. [Get started with the Blazor server-side Rich Text Editor](https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started) [Start with Blazor WebAssembly Rich Text Editor](https://blazor.syncfusion.com/documentation/rich-text-editor/how-to/blazor-web-assembly) [Get started with the Blazor WebAssembly Rich Text Editor](https://blazor.syncfusion.com/documentation/rich-text-editor/how-to/blazor-web-assembly) [Documentation](https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started) [Features and bugs](https://www.syncfusion.com/feedback/blazor-components?control=rich-text-editor) These Blazor Rich Text Editor blog and tutorial videos posts will guide you in building your first app with this Blazor component. They provide problem-solving strategies, describe features and functionalities, announce new feature releases, explain best practices, and showcase example scenarios. Explore our latest posts on our blog and tutorial video channels for Blazor Rich Text Editor updates. [Blazor AI Integration: How to Use OpenAI (ChatGPT) in Syncfusion Rich Text Editor](https://www.syncfusion.com/blogs/post/blazor-ai-integration-openai-rich-text-editor) [Export Blazor Rich Text Editor Content to PDF](https://www.syncfusion.com/tutorial-videos/blazor/rich-text-editor?title=export-blazor-rich-text-editor-content-to-pdf) [Seamlessly Import and Export in Blazor Rich Text Editor](https://www.syncfusion.com/blogs/post/import-export-blazor-rich-text-editor) [Import and Export RTF in Blazor Rich Text Editor](https://www.syncfusion.com/tutorial-videos/blazor/rich-text-editor?title=import-and-export-rtf-in-blazor-rich-text-editor) ##### Blazor MultiColumn ComboBox Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-multicolumn-combobox # Blazor MultiColumn ComboBox Component - A dropdown table displaying detailed information across multiple columns. - Built-in features like paging, grouping, sorting, filtering, and virtualization. - Fully customizable pop-up list (using templates) and UI. ## Overview The Blazor MultiColumn ComboBox is a dropdown component that displays items in a detailed, table-like format with multiple columns, providing more information than standard dropdown lists. It enhances user interaction through features such as data binding from various sources, item grouping, and advanced filtering for quick searches. Additionally, it supports sorting, virtualization for large datasets, paging, and customizable templates for headers, footers, and list items. ## Data binding The Blazor MultiColumn ComboBox lets users bind data from various local and remote data sources, such as IEnumerable/List, RESTful services, OData services, and WCF services. It utilizes a data manager to handle data and allows for customization of data requests and processing. ## Columns Customize the appearance of each column with a variety of options. The MultiColumn ComboBox supports auto-generating columns, which simplifies the process by automatically creating columns based on the data source. Additionally, you can modify the column header text to reflect specific data, adjust the column width for clear display, and set the column alignment (left, center, or right) to enhance readability and visual balance according to your application’s needs. ## Paging The Blazor MultiColumn ComboBox offers built-in support to manage large datasets using its paging feature. The component can handle extensive data collections by breaking them into manageable pages, thereby enhancing performance and improving the user experience. ## Filtering The Blazor MultiColumn ComboBox allows users to find what they are looking for quickly with its built-in filtering feature. This functionality enables users to type in search queries and see results in the dropdown, making navigation fast. ## Sorting The Blazor MultiColumn ComboBox allows users to sort rows in either ascending or descending order by simply clicking the header of a column. Users can sort data in multiple columns by holding the Ctrl key while clicking the header. This feature enables users to organize complex datasets more effectively. ## Grouping Organize items into categories within the MultiColumn ComboBox. Grouping related items together allows users to filter and select items more efficiently. ## Virtualization Enhance the performance of the MultiColumn ComboBox by displaying only the items currently in view. Virtualization allows for smooth scrolling and efficient management of large datasets while minimizing load times. ## Dropdown styles with templates Customize the appearance of the dropdown list to create a unique look by modifying the header, footer, and list items with templates. ### Column header templates Define custom templates for column headers to align their appearance with the design of your application. ### Column templates Customize the display of data in each column to create a unique look and feel. ### Footer templates Add custom footers to the dropdown. They can include summary information, additional components, or any other content you wish to display. ## Custom input value The MultiColumn ComboBox allows users to input custom values that may not be present in the predefined list. Users can enter new or unique values directly into the input field, thereby broadening the range of possible entries beyond the original options. ## Floating labels The MultiColumn ComboBox includes floating label functionality, which allows labels to float above the input field when the user interacts with the component or when a value is selected. This feature enhances form usability by providing clear context without occupying additional space. ## Edit form support Seamlessly integrate the MultiColumn ComboBox with the Blazor edit form component. This integration ensures that the component can be used within forms, enabling smooth data entry, validation, and submission workflows. ## Pop-up dimensions The MultiColumn ComboBox offers customizable pop-up dimensions, allowing you to define the width and height of the dropdown to suit your application’s layout and data requirements. This feature ensures that the dropdown displays enough data without overwhelming the user interface. ## Built-in themes The MultiColumn ComboBox component includes several built-in themes, such as Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and high contrast. Users can customize these built-in themes or create new ones by overriding Sass variables or using the Theme Studio application. - [Theme Studio application](https://ej2.syncfusion.com/documentation/appearance/theme-studio) ## Accessibility The MultiColumn ComboBox is designed with accessibility in mind, ensuring compliance with the latest web accessibility standards, such as WAI-ARIA. It supports full keyboard navigation and screen reader compatibility, making the component usable for individuals with disabilities. ## Blazor MultiColumn ComboBox code example Easily get started with the Blazor MultiColumn ComboBox using a few simple lines of C# code, as demonstrated in the following example. Also explore this [Blazor MultiColumn ComboBox example](https://blazor.syncfusion.com/demos/), which shows you how to render and configure the Blazor MultiColumn ComboBox component. - razor [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor AI AssistView Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-ai-assistview # Blazor AI AssistView Component - Effortlessly integrate AI services with a user-friendly interface. - Built-in toolbars for efficient management of prompts and responses. - Fully customizable prompts, responses, custom views, and more. - Real-time streaming responses for dynamic interaction. ## Overview The Blazor AI AssistView is a versatile and modern UI component that seamlessly integrates generative AI services into the web applications. It enables users to send prompts, execute commands through a feature-rich toolbar, and display AI-generated responses. ## Built-in toolbars The AI AssistView offers predefined toolbar items, such as copy and edit for prompts and copy, like, and dislike for responses. These toolbars provide quick access to common actions, making interactions more efficient. ## Prompt suggestions The AI AssistView provides options for both initial and on-demand prompt suggestions, helping users start or refine their prompts. Additionally, custom header can be set for suggestions, further enhancing the user experience. ## Header toolbar The Header toolbar enables the addition of custom items to the header area to execute commands such as reload, user settings, and more. It also supports the customization of toolbar items, including icon with text, alignment, and other options. ## Custom views Users can create custom views with or without the default assist view. This flexibility enables users to design personalized layouts with templated content to suit specific requirements. ## Templates Supports templates for customizing the appearance of the banner content, prompts, responses, and more. These templates allows users to create a unique and highly personalized AI AssistView that integrates effortlessly into the applications. ### Banner template Customize the banner content using a banner template to display additional information, such as a welcome note, an introduction to integrated AI services, and more. This banner is positioned at the top of the prompt and response conversation area within the AI AssistView. ### Prompt response item template Using templates for prompt and response items allows you to customize content, such as displaying the date and time of each entry, and adjusting avatar styling, and more. These templates provide more context for each prompt and response. ### Footer template Use the footer template to customize the default footer area and manage prompt request actions with a personalized design. This flexibility allows users to create unique footers that meet their specific needs and enhances the overall experience. ## Built-in themes The Blazor AI AssistView supports these built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize these built-in themes or create new themes to achieve their desired look and feel by overriding SASS variables or using our Theme Studio application. - [Theme Studio application](https://blazor.syncfusion.com/themestudio/?theme=fluent) ## Accessibility - Full support for [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility practices for screen readers and assistive devices. - UI visual elements such as foreground color, background color, line spacing, text, and images are designed based on [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards. - Right-to-left (RTL) text direction can be set for users of RTL languages like Hebrew, Arabic, or Persian. ## Developer-friendly APIs The Blazor AI AssistView component offers APIs and templates for customizing its appearance and behavior. With these APIs, developers can create a unique and highly customized AI AssistView that fits seamlessly into their applications. ## Blazor AI AssistView Code example Easily get started with the Blazor AI AssistView using a few simple lines of C# code, as demonstrated below. Also, explore our [Blazor AI AssistView Example](https://blazor.syncfusion.com/demos/ai-assistview/default-functionalities?theme=fluent2), which shows you how to include the Blazor AI AssistView component with highlight customization. [Edit in Blazor Playground](https://blazorplayground.syncfusion.com/LNhytsXHzgByxCKJ) - razor [Documentation](https://blazor.syncfusion.com/documentation) ##### Blazor Smart Paste Button | Smart Component | Syncfusion URL: https://www.syncfusion.com/blazor-components/blazor-smart-paste-button # Blazor Smart Paste Button - Smart Clipboard Pasting Component - Paste the clipboard data to reduce manual input. - Populates multiple form fields with one click, speeding up data entry. - AI ensures accurate formatting to match form fields. ## Overview The Blazor Smart Paste Button is an AI-powered enhancement of Syncfusion’s Button component, enabling intelligent clipboard pasting with contextual accuracy and proper formatting to boost productivity. ## Blazor Smart Paste Button Code Example Get started with the Blazor Smart Paste Button using a few simple lines of C# code as demonstrated below. Also explore our [Blazor Smart Paste Button example](https://blazor.syncfusion.com/demos/ai-smartpaste/annotations?theme=bootstrap5) which shows you how to render and configure the component. - razor [[email protected]](https://www.syncfusion.com/cdn-cgi/l/email-protection) ## Form auto-filling The Smart Paste Button is a smart component that intelligently scans clipboard content before pasting, ensuring relevance to the current form context. It automatically detects input fields (
Advanced UWP
Communicating with Windows 10 and Other Apps, the second in a five-part series written by Succinctly series author Matteo Pagani. To download the complete white paper, and other papers in the series, visit the White Paper section of Syncfusion’s Technology Resource Portal. ## Other supported frameworks Card is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the different Card platforms from the links below, - [Blazor Cards](https://www.syncfusion.com/blazor-components/blazor-card) - [React Cards](https://www.syncfusion.com/react-components/react-card) - [Vue Cards](https://www.syncfusion.com/vue-components/vue-card) - [JavaScript Cards](https://www.syncfusion.com/javascript-ui-controls/js-card) ## Angular version compatibility With continuous improvement in Angular versions, the Angular Card is kept up to date to make it compatible with the latest version. ### Angular 11 - [Getting started with Angular 11 Card](https://support.syncfusion.com/kb/article/11058/how-to-get-started-easily-with-syncfusion-angular-11-card) - [Angular 11 Card example](https://github.com/SyncfusionExamples/ej2-angular-11-card) ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular ListView - Customizable Templated Component | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-listview # Angular ListView - Efficient Data Navigation with High-Performance - Built-in support for flexible data binding, sorting, grouping, nested navigation, multiple selection, templates, and more. - This high-performance control can load a huge amount of data on demand when scrolling down. - Data can be elegantly visualized with cards, images, icons, avatars, and badges for better understanding. ## Overview The Angular ListView component is a list-like interface that allows you to select an item or multiple items. It represents data in an interactive hierarchical structure across different layouts and views. ## Data binding Powerful data binding allows data to be loaded from an array of primitive data, JSON data collections, or remote data sources. The component supports complex data with field mapping; different kinds of data services such as OData, OData V4, and web API; and data formats such as XML, JSON, JSONP, CSV, and HTML tables. - [Data binding example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/listview/remote-list) - [Data binding documentation](https://ej2.syncfusion.com/angular/documentation/listview/data-binding) ## Virtualization or load on demand The Angular ListView supports UI virtualization to improve performance while loading huge amounts of data. This creates a fixed number of items regardless of data volume and displays only the relevant data. - [Load-on-demand example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/listview/virtualization) - [Load-on-demand documentation](https://ej2.syncfusion.com/angular/documentation/listview/virtualization) ## Sortable list Sort data programmatically in ascending or descending order. Also use custom sorting logic. - [Sorting documentation](https://ej2.syncfusion.com/angular/documentation/listview/how-to/add-and-remove-list-items-from-listview/#sorting) ## Group list Group ListView data programmatically. Users can identify a group name from group headers in the view and also use custom sorting logic. - [Grouping documentation](https://ej2.syncfusion.com/angular/documentation/listview/grouping) ## Multilevel ListView The Angular ListView represents a nested data object structure as a list of lists. The initial screen displays the first-level list items and the next level is displayed when interacting with them. - [Nested list documentation](https://ej2.syncfusion.com/angular/documentation/listview/nested-list) ### Single selection When a user clicks or taps an item, ListView enables the selection of the list item by default. - [Selection documentation](https://ej2.syncfusion.com/angular/documentation/listview/how-to/add-and-remove-list-items-from-listview/#fetch-selected-items-from-listview-template-sample) ### Checkboxes The Angular ListView component supports multiple selection through checkboxes on the right or left of the list items. This helps users select or clear a series of items without using the keyboard. - [Checklist documentation](https://ej2.syncfusion.com/angular/documentation/listview/check-list/) ### Manipulation Users can disable the ListView selection by handling events. Preserve and restore the selected values in the ListView to help users continue their work from a previously saved state. - [Get selected items documentation](https://ej2.syncfusion.com/angular/documentation/listview/how-to/get-selected-items-from-listview) ## Multiline text Arrange the list item content with multiline text, icons, and avatars. - [Multiline documentation](https://ej2.syncfusion.com/angular/documentation/listview/customizing-templates) ## UI customization Completely customize the ListView header, list items, and group header using template options. This helps users arrange their content in flexible formats like image view, multiline text view, and mixed mode. - [Customization example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/listview/group-template) - [Customization documentation](https://ej2.syncfusion.com/angular/documentation/listview/customizing-templates) ## Grouping ListView supports wrapping nested elements into groups based on categories. The category of each list item can be mapped with the groupBy field in the data table, which also supports single-level navigation. - [Grouping documentation](https://ej2.syncfusion.com/angular/documentation/listview/grouping) ## Searching and filtering Search and filter list view data based on the user input using the Data Manager. - [Filtering data documentation](https://ej2.syncfusion.com/angular/documentation/listview/how-to/filter-list-items-in-the-listview) ## Dual list Design a dual list using Angular ListView to move data from one list to another. - [Dual documentation](https://ej2.syncfusion.com/angular/documentation/listview/how-to/create-dual-list-from-listview) ## ListView with Pager The Angular ListView seamlessly integrates with the Angular Pager control. - [ListView with Pager documentation](https://ej2.syncfusion.com/angular/documentation/listview/how-to/integrate-pager-component-with-listview) ## Touch-friendly UI The ListView component responds to screen size changes and adapts its contents to fit any device. It also recognizes touch gestures, enabling items to be selected or cleared when a tap or double-tap action is performed. This provides the best user experience for phones, tablets, and desktops. - [Check ListView examples in different mobile devices](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/listview/default) ## Built-in and customizable themes Several built-in, Sass-based themes are available: Fluent, Tailwind CSS, Bootstrap 5, Bootstrap, Material, and high contrast. Users can customize these themes by either overriding the existing Sass styles or creating custom themes using the Theme Studio application. - [Theme Studio application](https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio) ## Angular version compatibility With continuous improvements to Angular, the Angular ListView is kept up to date to make it compatible with the latest version. ### Angular 11 - [Getting started with Angular 11 ListView](https://support.syncfusion.com/kb/article/11042/how-to-get-started-easily-with-syncfusion-angular-11-listview) - [Angular 11 ListView example](https://github.com/SyncfusionExamples/ej2-angular-11-list-view) ### Angular 7 - [Getting started with Angular 7 ListView](https://support.syncfusion.com/kb/article/11784/how-to-get-started-easily-with-syncfusion-angular-8-listview) - [Angular 7 ListView example](https://github.com/SyncfusionExamples/ej2-angular-7-listview) ### Angular 6 - [Getting started with Angular 6 ListView](https://support.syncfusion.com/kb/article/11721/how-to-get-started-easily-with-syncfusion-list-view-in-angular-6) - [Angular 6 ListView example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/listview/default) ## Other supported frameworks ListView is also available in our Blazor, React, Vue, and JavaScript frameworks. Check out the ListView for different platforms from these links: - [Blazor ListView](https://www.syncfusion.com/blazor-components/blazor-listview) - [React ListView](https://www.syncfusion.com/react-components/react-listview) - [Vue ListView](https://www.syncfusion.com/vue-components/vue-listview) - [JavaScript ListView](https://www.syncfusion.com/javascript-ui-controls/js-listview) ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#Listbox) accessibility that helps ListView be accessed by on-screen readers and assistive devices. - Follows the [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standard with design of UI visual elements such as foreground color, background color, line spacing, text, and images. - Follows [WAI-ARIA best practices](https://www.w3.org/WAI/ARIA/apg/#Listbox) for implementing keyboard interaction. ## Developer-friendly APIs In ListView, developers can control all the UI elements and behaviors. A rich set of developer-friendly APIs provides the best user experience. - [ListView API reference](https://ej2.syncfusion.com/angular/documentation/api/list-view/) ## Angular ListView Code Example Easily get started with the Angular ListView using a few simple lines of TS code example as demonstrated below. Also explore our [Angular ListView Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/listview/default) that shows you how to render and configure a ListView in Angular. - ts // specifies the template string for the Listview component `` ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Tooltip | Popover Tooltip | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-tooltip # Angular Tooltip - Smart and Dynamic-Positioning Popover - Automatically adjust the display position based on the view page. - Customize the content with icons, images, or a dynamic AJAX template and much more. - Enhance the open and close of a popover with out-of-the box animations. ## Overview The Angular Tooltip component is a pop-up that shows information or a message when users hover over, click, focus on, or touch an image, button, anchor tag, etc. The information displayed in the Tooltip can include simple text, images, hyperlinks, and custom templates. The component supports built-in themes such as Material, Bootstrap, and Fabric. ## Angular Tooltip code example Easily get started with the Angular Tooltip using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular Tooltip example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/tooltip/default) that shows you how to render and configure a Tooltip in Angular. - html - ts "control-section" 'Tooltip content' ViewEncapsulation ## Position and mouse trails The Angular Tooltip has twelve different options to position it around the target. You can configure the Tooltip to follow the mouse or not. To position the tip pointer, there are four options: right, left, top, and bottom. - [Tooltip positions in Angular example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/tooltip/default) - [Tooltip positions in Angular documentation](https://ej2.syncfusion.com/angular/documentation/tooltip/position) ## Smart positioning/auto positioning The Angular Tooltip intelligently auto positions its content and arrows. It also fits in the best location of the view port or container. - [Auto positioning example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/tooltip/smart-position) - [Auto positioning documentation](https://ej2.syncfusion.com/angular/documentation/tooltip/position#dynamic-positioning) ## Dynamic content You can load dynamic content for Tooltip on demand using an AJAX callback. - [Tooltip AJAX content example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/tooltip/ajax-content) - [Tooltip AJAX content documentation](https://ej2.syncfusion.com/angular/documentation/tooltip/content#dynamic-content-via-ajax) ## Animation effect Show or hide completely customizable animations in the Angular Tooltip. You can include animation effect, duration, and delay. You can also control transition effects at the application level. - [Types of animation effects documentation](https://ej2.syncfusion.com/angular/documentation/tooltip/animation#animation-effects) ## Custom tooltip Using templates, the tooltip content is loaded with inline HTML, images, iframe, videos, and maps. You can also add a title to the content. - [HTML tooltip example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/tooltip/html-content) - [Tooltip template documentation](https://ej2.syncfusion.com/angular/documentation/tooltip/content#template-content) ## Show and hide You can control the show and hide triggers of the Tooltip using auto, hover, click, focus, and custom modes. Implement your own custom mode to control the show and hide behaviors. - [Display behavior documentation](https://ej2.syncfusion.com/angular/documentation/tooltip/open-mode) ## Offsets Customize the offset position of a tooltip from the target element. This offset value is defined in pixels. - [Tooltip offset position documentation](https://ej2.syncfusion.com/angular/documentation/tooltip/position#setting-offset-values) ## Sticky Tooltip Prevent the tooltip from hiding after a short duration using the sticky mode. - [Sticky mode documentation](https://ej2.syncfusion.com/angular/documentation/tooltip/open-mode#sticky-mode) ## Triggers You can show tooltips when you hover over, click, touch, and focus on any element. - [Show on hover, click, and focus documentation](https://ej2.syncfusion.com/angular/documentation/tooltip/open-mode) ## Fancy tooltip You can completely customize the tooltip using CSS. - [Full customization documentation](https://ej2.syncfusion.com/angular/documentation/tooltip/customization) - [Tooltip height and width documentation](https://ej2.syncfusion.com/angular/documentation/tooltip/setting-dimension) ## Dimension Customization Both automatic and custom pixel values can be used to set tooltip’s height and width. - [Dimension customization documentation](https://ej2.syncfusion.com/angular/documentation/tooltip/setting-dimension/#setting-dimension) ## Scroll mode When the tooltip’s size exceeds the container space, the scroll mode displays an HTML scroll bar. - [Scroll mode documentation](https://ej2.syncfusion.com/angular/documentation/tooltip/setting-dimension#scroll-mode) ## Built-in themes Angular Tooltip is shipped with several built-in themes: Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and high contrast. Users can customize any one of these built-in themes or create new themes to achieve their own desired look and feel. They can do this by either simply overriding SASS variables or using our Theme Studio application. - [Theme studio application](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) ## Easy integration You just need a message and target element to make the Tooltip fully functional. It will work out of the box. However, it provides many options to change the position, animation, and appearance. ## Touch-friendly The Angular Tooltip responds to screen size and adapts its contents to fit any touch device. It recognizes touch gestures and displays its message when performing a touch and hold action. It will hide after 1500ms. This provides the best user experience for touch devices such as phones and tablets. ## Schematics Angular schematics are a workflow tool that allows you to generate components, modules, and resolve dependency issues. The main goal of schematics is to simplify development in the Angular environment. ## HTML5 SVG and canvas Angular Tooltip supports both SVG and canvas elements. Users can directly attach tooltips to HTML5 or elements to show data visualization elements. - [Tooltip on SVG and canvas documentation](https://ej2.syncfusion.com/angular/documentation/tooltip/how-to/display-tooltip-on-svg-and-canvas-elements) ## Angular version compatibility Through continuous improvement in Angular versions, the Angular Tooltip is kept up to date to make it compatible with the latest version. ### Angular 11 - [Getting started with Angular 11 Tooltip](https://support.syncfusion.com/kb/article/11065/how-to-get-started-easily-with-syncfusion-angular-11-tooltip) - [Angular 11 Tooltip example](https://github.com/SyncfusionExamples/ej2-angular-11-tooltip) ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#tooltip) accessibility to make the component accessible to screen readers and assistive devices. - Follows the [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standard in the design of UI element visuals such as foreground color, background color, line spacing, text, and images. - Follows [WAI-ARIA best practices](https://www.w3.org/TR/wai-aria-practices/#tooltip) for implementing keyboard interaction. ## Developer-friendly APIs In Angular Tooltip, you have control over all the UI elements and behaviors. It provides the best user experience through a rich set of developer-friendly APIs. ## Other supported frameworks The Tooltip is available for the Blazor, React, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [Blazor Tooltip](https://www.syncfusion.com/blazor-components/blazor-tooltip) - [React Tooltip](https://www.syncfusion.com/react-components/react-tooltip) - [JavaScript Tooltip](https://www.syncfusion.com/javascript-ui-controls/js-tooltip) - [Vue Tooltip](https://www.syncfusion.com/vue-components/vue-tooltip) ## Supported browsers The Angular Tooltip works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/tooltip/getting-started) ##### Angular Material Accordion | Collapsible Panels | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-accordion # Angular Accordion - A Seamless Collapsible Panel - Fully-featured responsive collapsible panels (panel bar) with stacked headers. - Beautiful animations when expanding and collapsing panels. - Flexibility to make standalone panels or panel groups. ## Overview The Angular Accordion is a container-based component with vertically collapsible panels (vertical accordion) and stacked headers that expand or collapse one or more panels at a time within the available space. ## Expand and collapse The Angular Accordion component allows you to customize the expand and collapse actions. ### Expand mode A single panel or multiple panels can expand or collapse (panel toggle) at a time by clicking the panel header (interactions) or programmatically. - [Accordion expand type documentation](https://ej2.syncfusion.com/angular/documentation/accordion/expand-mode/) ### Collapsible mode Collapse all the panels at once. With customization options, a specific panel is set to be in an open state while the rest of the panels are collapsed. ## Accordion templates The Accordion component allows you to customize the header and content panel appearance using given HTML elements. - [Accordion panel customization documentation](https://ej2.syncfusion.com/angular/documentation/accordion/how-to/to-keep-single-pane-open-always/) ## JSON array binding The Accordion component can be rendered based on a JSON array collection of properties such as headers and content. Data binding can be achieved by an array collection of items. - [Item-based rendering example](https://ej2.syncfusion.com/angular/demos/#/material/accordion/default) - [Remote data source documentation](https://ej2.syncfusion.com/angular/documentation/accordion/how-to/load-accordion-with-data-source/) ## Nested accordions Add nested levels of the collapsible panel within the parent accordion. - [Nested accordion documentation](https://ej2.syncfusion.com/angular/documentation/accordion/how-to/#set-the-nested-accordion) ## Accordion navigation menu The Angular Accordion component can use a nested vertical (hierarchical) navigation menu with links, including external links, in the accordion header. ## Icon support Add prefix icons or images to the panel header. The default expand and collapse icon used in the header is customizable. - [Accordion icons example](https://ej2.syncfusion.com/angular/demos/#/material/accordion/icon) ## Responsive accordion The Angular Accordion component adapts responsively in devices based on the available space for modern web and mobile applications. ## Dynamic AJAX content The Angular Accordion allows you to load external content dynamically to a panel using the AJAX library. - [Accordion AJAX content example](https://ej2.syncfusion.com/angular/demos/#/material/accordion/ajax) ## Animation The Angular material collapsible panels support several types of built-in fancy animation for panel expanding and collapsing actions. Animation behavior is customizable. - [Custom animation documentation](https://ej2.syncfusion.com/angular/documentation/accordion/how-to/set-custom-animation/) ## Developer-friendly APIs Developers can control the appearance and behavior of accordions using a rich set of APIs. - [Accordion API Reference](https://ej2.syncfusion.com/angular/documentation/api/accordion/) ## State persistence During browser navigation, the expanded or collapsed state of an accordion persists. ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#accordion) accessibility that helps the accordion component be accessed by on-screen readers and assistive devices. - Follows [WAI-ARIA Best Practices](https://www.w3.org/TR/wai-aria-practices/#accordion) for implementing keyboard interaction. - Designed the UI element visuals such as foreground color, background color, line spacing, text and images based on [WCG 2.0 standard](https://www.w3.org/TR/WCAG20/). ## Built-in themes The Angular Accordion component is shipped with several built-in themes such as Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and High Contrast. Users can customize any one of these built-in themes or create new themes by either simply overriding SASS variables or using our [Theme Studio](https://ej2.syncfusion.com/themestudio/?theme=material) application. ## Angular Accordion Code Example Easily get started with the Angular Accordion using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular Accordion Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/accordion/default) that shows you how to render and configure a Accordion in Angular. - html - ts // specifies the template string for the Accordion component ` ` ## Other supported frameworks Accordion is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the different Accordion platforms from the links below, - [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) - [React Accordion](https://www.syncfusion.com/react-components/react-accordion) - [Vue Accordion](https://www.syncfusion.com/vue-components/vue-accordion) - [JavaScript Accordion](https://www.syncfusion.com/javascript-ui-controls/js-accordion) ## Angular version compatibility With continuous improvement in Angular versions, the Angular Accordion is kept up to date to make it compatible with the latest version. ### Angular 11 - [Getting started with Angular 11 Accordion](https://support.syncfusion.com/kb/article/10873/how-to-get-started-easily-with-syncfusion-angular-11-accordion) - [Angular 11 Accordion example](https://github.com/SyncfusionExamples/ej2-angular-11-accordion) ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Context Menu | Right Click Menu Component | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-context-menu # Angular Context Menu Component - Easily Customizable Menu Items - An advanced context menu is easily configurable with other components using fluent API. - Automatic collision detection and handling with submenu flip-and-fit. - Option to customize menu items for templating or include other components like Checkbox, Radio Button, etc. ## Overview The Angular Context Menu or right-click menu is a graphical user interface component that is easy to use and appears when the user right-clicks or performs a touch and hold action. The list of items in the context menu can be defined, multilevel menus created, and event handlers attached to the menu items for seamless integration with other components. ## Multi-level nesting Multi-level nested items are supported in context menu. You can browse the sub menu by mouse hover/click in menu items. The appearance of Angular context menu varies for desktop and mobile. In Mobile, users can view Multilevel nested items in single layer with provision to backtrack parent item. - [Multi-level nesting documentation](https://ej2.syncfusion.com/angular/documentation/context-menu/templates#multilevel-nesting) ## Menu Item Icons You can include icons or sprite images in menu items easily to add the visual representation of the action in context menu. - [Content menu with icons documentation](https://ej2.syncfusion.com/angular/documentation/context-menu/icons-and-navigation) ## Context Menu Templates Templates is used to create custom user experience. You can create custom Context Menu by using template for each element of Angular Context menu. - [Templates support](https://ej2.syncfusion.com/angular/documentation/context-menu/templates) ## Integration with other components Angular Context menu can be used with any component. Adding a context menu to other components require simple configurations. ## Built-in themes Angular Context Menu supports built-in themes such as Bootstrap 5, Tailwind CSS, Fluent, high contrast, and more. Users can customize these built-in themes or create new themes to achieve the desired look and feel either by simply overriding SASS variables or using the Theme Studio application. - [Theme Studio Application](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) ## Web Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) for working with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing keyboard interaction. - Based on [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, we designed the UI element visuals such as foreground color, background color, line spacing, text, and images. - Supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian. ## Angular Context Menu Code Example Easily get started with the Angular Context Menu component using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular Context Menu Example](https://ej2.syncfusion.com/angular/demos/#/material/context-menu/default) that shows you how to render and configure a Context Menu in Angular. - html - ts "contextmenu-section" "contextmenu-control" "contextmenutarget" "row ft-one-column segment" "row ft-two-column" "col-lg-6 col-md-6 col-sm-12 col-xs-12 col-img-small" "col-lg-6 col-md-6 col-sm-12 col-xs-12 col-content-small" "images/combo-box/angular-combobox-data-binding.png" "Angular Combo Box data binding from different data sources" "https://ej2.syncfusion.com/angular/demos/#/material/combo-box/data-binding" "https://ej2.syncfusion.com/angular/demos/#/material/combo-box/custom-value.html" "images/combo-box/angular-editable-combobox-with-custom-value.png" "Angular ComboBox that allows custom values in the pop-up list" "row multi-column-conent-container" "https://www.syncfusion.com/tutorial-videos/angular/combobox?title=how-to-group-and-filter-items-in-the-angular-combobox" "col-lg-12 col-md-12 col-sm-12 col-xs-12 multi-col-contents" "col-lg-4 col-md-6 col-sm-12 col-xs-12 three-col-content" "images/combo-box/angular-combobox-custom-filtering.png" "Angular ComboBox filtering search based on custom algorithm" "custom-filtering" "images/combo-box/angular-combobox-diacritic-sensitivity-search.png" "Angular ComboBox filtering with diacritic symbol sensitivity" "diacritic-sensitivity" "images/combo-box/angular-combobox-filter-settings.png" "Angular ComboBox filtering with case sensitivity and minimum search characters" "filter-settings" "images/combo-box/angular-combobox-category-grouping.png" "Angular ComboBox Grouping of pop-up list items based on category" "grouping-with-category" "https://ej2.syncfusion.com/angular/demos/#/material/combo-box/grouping-icon" "images/combo-box/angular-combobox-autofill-suggestion.png" "Angular ComboBox autofill option while typing" "https://ej2.syncfusion.com/products/typescript/combobox/sixth-sample/?editable=false" >
"cascading-combo-boxes" "https://ej2.syncfusion.com/angular/documentation/combo-box/how-to/cascading" "drop-down-styles-with-templates" "https://www.syncfusion.com/tutorial-videos/angular/combobox?title=customize-the-angular-combobox-using-templates" "images/combo-box/angular-combobox-header-template.png" "Styling Angular ComboBox pop-up list with a header template" "header-template" "https://ej2.syncfusion.com/angular/documentation/combo-box/templates/#header-template" "images/combo-box/angular-combobox-item-template.png" "Styling Angular ComboBox pop-up list with item template" "https://ej2.syncfusion.com/angular/documentation/combo-box/templates#item-template" "images/combo-box/angular-combobox-footer-template.png" "Styling Angular ComboBox pop-up list with footer template" "footer-template" "https://ej2.syncfusion.com/angular/documentation/combo-box/templates#footer-template" "customizing-the-ui" "images/combo-box/angular-combobox-popup-list-items-with-icons.png" "Angular bootstrap ComboBox pop-up list with icons" "icons-in-list-items" "images/combo-box/angular-combobox-empty-record-template.png" "Angular ComboBox pop-up list custom appearance when no records are found" "images/combo-box/angular-combobox-popup-list-dimention-customization.png" "Angular ComboBox the pop-up list dimensions customization" "customize-dimensions" "images/combo-box/angular-combobox-form-validation.png" "Combo Box Angular with form validation" "https://ej2.syncfusion.com/themestudio/?theme=bootstrap" "images/combo-box/combobox-angular-material.png" "Combobox Material Angular" "col-lg-6 col-md-6 col-sm-12 col-xs-12 two-col-content" "mobile-responsive-ui" "web-accessibility" "https://www.w3.org/WAI/ARIA/apg/#combobox" "https://www.w3.org/TR/WCAG20/" "developer-friendly-apis" "angular-combobox-code-example" "https://ej2.syncfusion.com/angular/demos/#/material/combo-box/default" "code-snippet-tabs" "code-snippet-1" "#49bpv2px53s7bclzegqrcf404gequk59-html" data-original-lang= "#vtw7zrlm1n8w1b56hacvtwjts8rjtuwo-ts" "49bpv2px53s7bclzegqrcf404gequk59-html" "prettyprint linenums language-html"
"vtw7zrlm1n8w1b56hacvtwjts8rjtuwo-ts" "prettyprint linenums language-ts" "other-supported-frameworks" "https://www.syncfusion.com/blazor-components/blazor-combobox" "https://www.syncfusion.com/react-components/react-combobox" "https://www.syncfusion.com/vue-components/vue-combobox" "https://www.syncfusion.com/javascript-ui-controls/js-combobox" "single-column-link-section" "not-sure-how-to-create-your-first-angular-combobox-our-documentation-can-help" "https://ej2.syncfusion.com/angular/documentation/combo-box/getting-started" "ft-column-header text-left" "frequently-asked-questions" "ft-column-header text-left question" "why-should-you-choose-syncfusion-angular-combobox-component" "ft-column-header text-left answer" "https://ej2.syncfusion.com/angular/documentation/combo-box/grouping" "https://ej2.syncfusion.com/angular/documentation/combo-box/filtering" "https://ej2.syncfusion.com/angular/documentation/combo-box/style" "https://ej2.syncfusion.com/angular/documentation/combo-box/templates" "can-i-purchase-the-syncfusion-angular-combobox-component-separately" "https://www.syncfusion.com/company/contact-us" "what-is-the-price-for-syncfusion-angular-combobox-component" "https://www.syncfusion.com/sales/teamlicense" "can-i-download-and-utilize-the-syncfusion-angular-combobox-for-free" "https://www.syncfusion.com/products/communitylicense" "where-can-i-find-the-syncfusion-angular-combobox-demo" "how-do-i-get-started-with-syncfusion-angular-combobox-component" @syncfusion/ej2-navigations `
Right click / Touch hold to open the ContextMenu
` ## Other supported frameworks Context Menu is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the different Context Menu platforms from the links below, - [Blazor Context Menu](https://www.syncfusion.com/blazor-components/blazor-context-menu) - [React Context Menu](https://www.syncfusion.com/react-components/react-context-menu) - [Vue Context Menu](https://www.syncfusion.com/vue-components/vue-context-menu) - [JavaScript Context Menu](https://www.syncfusion.com/javascript-ui-controls/js-context-menu) ## Angular version compatibility With continuous improvement in Angular versions, the Angular Context Menu is kept up to date to make it compatible with the latest version. ### Angular 11 - [Getting started with Angular 11 Context Menu](https://support.syncfusion.com/kb/article/10880/how-to-get-started-easily-with-syncfusion-angular-11-context-menu) - [Angular 11 Context Menu example](https://github.com/SyncfusionExamples/ej2-angular-11-context-menu) ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Sidebar | Navigation Drawer | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-sidebar # Angular Sidebar: A Responsive Side Menu Component - A simple side navigation menu with docking options. - A progressive layout can be built by pushing, sliding, or overlaying the Sidebar content. - A responsive design with touch-friendly gestures for easy interaction. ## Overview The Angular Sidebar, also called the side navigation menu, can be used to simplify the navigation hierarchy. Users can place primary or secondary content alongside the main content in this control. It provides a flexible container that can be expanded or collapsed based on user interactions. Any type of HTML content or component can be placed in the Sidebar for quick access and easy navigation, like quick references, menus, lists, and tree views. ## Transition and animation Different types of slide-out content in the Angular Sidebar component give users the flexibility to view or hide content over or above the main content by pushing, sliding, or overlaying it. ## HTML content positioning to the sides The Angular Sidebar control positions its content to the left or right side of the main content area. This option allows the placement of two sidebars in a page, to the left and right, to show primary and secondary content simultaneously. ## Dock the HTML side panel content When the side content is docked to give the main content more space, the navigation text is represented as a shortened view of icons. - [Docking example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/sidebar/docking-sidebar) ## Toggle Sidebar menu Bind custom actions to an element (hamburger menu or buttons) to toggle the Sidebar. - [Sidebar with list view example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/sidebar/sidebar-list) ## Responsive Sidebar Auto closing the Sidebar component’s content allows the main content area to be more readable. - [Responsive Sidebar example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/sidebar/responsive-panel) ## Animate Sidebar Show or hide the Angular Sidebar with CSS3 animation effects. - [Types of animation effects documentation](https://ej2.syncfusion.com/angular/documentation/sidebar/how-to/sidebar-with-variation-animation/) ## Backdrop Apply a shadow effect to the content area until the sidebar menu closes. - [Angular Sidebar backdrop example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/sidebar/api) ## Incorporate Syncfusion controls Easily integrate any Syncfusion Angular UI control within the Sidebar. - [Sidebar with ListView example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/sidebar/sidebar-list) ## Fit to target The Angular Sidebar can render within any HTML target element. - [Target configuration documentation](https://ej2.syncfusion.com/angular/documentation/sidebar/custom-context/) ## Mobile-friendly side navigation menu The Angular Sidebar component’s responsive mode gives an adaptive, redesigned UI appearance for mobile devices. - [Sidebar menu example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/sidebar/sidebar-menu) ## Media query Control the expand and close behavior of Angular Sidebar based on screen resolution. - [Sidebar with auto-close documentation](https://ej2.syncfusion.com/angular/documentation/sidebar/auto-close/) ## Developer-friendly APIs Developers have control over all the UI elements and behaviors of the component to provide the best user experience with a rich set of developer-friendly APIs. - [Learn more](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/sidebar/api) ## Built-in themes The Angular Sidebar component is shipped with several built-in themes: Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and high contrast. Users can customize any one of these built-in themes or create new themes by either simply overriding SASS variables or using our [Theme Studio](https://ej2.syncfusion.com/themestudio/?theme=material) application. ## Angular Sidebar code example Easily get started with the Angular SideBar using a few simple lines of HTML and TS code, as demonstrated in the following. Also explore our [Angular Sidebar example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/sidebar/default), which shows you how to render and configure a Sidebar in Angular. - html - ts "default-sidebar" app/app.component.html app/app.component.css ## Other supported frameworks Sidebar is also available in our Blazor, React, Vue, and JavaScript frameworks. Check out the Sidebar in different platforms from these links: - [Blazor Sidebar](https://www.syncfusion.com/blazor-components/blazor-sidebar) - [React Sidebar](https://www.syncfusion.com/react-components/react-sidebar) - [Vue Sidebar](https://www.syncfusion.com/vue-components/vue-sidebar) - [JavaScript Sidebar](https://www.syncfusion.com/javascript-ui-controls/js-sidebar) ## Angular version compatibility The Angular Sidebar is kept up to date to make it compatible with the latest Angular version. ### Angular 11 - [Getting started with Angular 11 SideBar](https://support.syncfusion.com/kb/article/10887/how-to-get-started-easily-with-syncfusion-angular-11-sidebar) - [Angular 11 Sidebar example](https://github.com/SyncfusionExamples/ej2-angular-11-sidebar) ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Tabs | Tab Panel Component | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-tabs # Angular Tabs - Simple, Responsive, and Scrollable Tab Bar - Provides a simple user interface (UI) to segregate related content in less space. - Supports both scrollable and pop-up tabs when there are a greater number of tabs. ## Overview Angular Tabs or Tab Panel component is a simple user interface (tabs UI) for organizing related content and occupying a compact space. The tabs are aligned horizontally, and each tab is associated with its header. One of the tabs must always be selected and visible. The Tabs component has a rich set of features such as animation, orientation, templating, header styles, a close button for each tab, a scrollbar or pop-up when there are many tabs, JSON support, and more. ## Scrollable tabs The Angular Tabs component manages additional tabs efficiently using scrollable tabs when there are a greater number of tabs than can be shown. This simplifies the design and aligns the tabs in a single line. Users can swipe left or right over the tab header area to scroll and make clearly visible the out-of-sight tabs in mobile. - [Scrollable tabs documentation](https://ej2.syncfusion.com/angular/documentation/tab/adaptive/#scrollable) - [Scrollable tabs demo](https://ej2.syncfusion.com/angular/demos/#/material/tab/responsive-modes) ## Pop-up mode The pop-up mode is another type of overflow mode in which a pop-up holds the additional tabs when there are a greater number of tabs than can be shown. You can view the out-of-sight tabs by exploring the pop-up mode. - [Tabs with pop-up documentation](https://ej2.syncfusion.com/angular/documentation/tab/adaptive/#popup) - [Tabs with pop-up example](https://ej2.syncfusion.com/angular/demos/#/material/tab/responsive-modes) ## Nested tabs Users can nest one tab within another tab to design a complex layout. - [Nested Tabs documentation](https://ej2.syncfusion.com/angular/documentation/tab/how-to/load-content-through-post/#add-nested-tabs) ## Drag and drop The Angular Tabs control allows users to drag and drop tabs to easily re-prioritize the tab item order. Also, it allows adding tabs dynamically from an external source such as a ListView, TreeView, etc. - [Draggable tabs example](https://ej2.syncfusion.com/angular/demos/#/material/tab/drag-and-drop) - [Draggable tabs documentation](https://ej2.syncfusion.com/angular/documentation/tab/drag-and-drop) ## Tabs headers (label) The tab bar has a good visual representation for segregating active tabs and inactive tabs. It has an enormous interaction area for navigation in mobile tab view. The tab headers can be icons, plain text, or both. The position of the icons can also be changed to the left, right, top, and bottom inside tab headers. ## Header styles The Angular Tabs component provides various built-in styles to customize the headers easily. - [Header style example](https://ej2.syncfusion.com/angular/demos/#/material/tab/orientation) - [Header style documentation](https://ej2.syncfusion.com/angular/documentation/tab/header) ### Headers placement A row of tabs can be aligned horizontally on the top or bottom of tab content to make a top-to-bottom or bottom-to-top hierarchy in a tab bar. - [Header placement example](https://ej2.syncfusion.com/angular/demos/#/material/tab/orientation) ## Remove button on tabs Users can configure the Remove button for each tab or specific tabs to remove it dynamically. - [Close button on each tab example](https://ej2.syncfusion.com/angular/demos/#/material/tab/orientation) ## Animation Navigate among tabs with nice, built-in animation effects (for example: slide animation) when you click or tap a tab. The Angular Tab navigation happens on swiping within the content or tapping a tab header in a mobile tab view. - [Animate Tabs Navigation documentation](https://ej2.syncfusion.com/angular/documentation/api/tab/#animation) ## Dynamic tabs content Users can dynamically load the content to the tab pane on activating it. They can also load the content from external pages using the AJAX library. - [Tabs content using AJAX documentation](https://ej2.syncfusion.com/angular/documentation/tab/how-to/load-content-through-post/#load-content-through-ajax) ## Adjustable height Users can adjust a tab’s height automatically according to its content, parent container, or the height of the highest tab panel. - [Height adjustable documentation](https://ej2.syncfusion.com/angular/documentation/api/tab/#heightadjustmode) ## Easy integration It’s easy to integrate other Angular components as content of the tab’s pane. The Angular Tabs component can also be integrated with other components such as Dialog and Card. - [Integrate Angular component as content documentation](https://ej2.syncfusion.com/angular/documentation/tab/how-to/load-content-through-post/#render-other-components-in-tab-using-template) ## Wizard-like application The easy-to-use Angular Tabs component design forms wizard-like applications that are used to perform multi step processes. - [Wizard-like application example](https://ej2.syncfusion.com/angular/demos/#/material/tab/wizard) - [Wizard-like application documentation](https://ej2.syncfusion.com/angular/documentation/tab/how-to/load-content-through-post/#create-wizard-using-tab) ## Themes The Angular Tabs component has several built-in themes such as Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and High Contrast. They help to design material tabs, bootstrap tabs, etc. The users can customize any one of these built-in themes or create new themes to achieve their own desired look and feel, either by simply overriding SASS variables or using our Theme Studio application. - [Theme studio application](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) ## Accessibility - Full support for [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#tabpanel) accessibility that helps the Tab component to be accessible by on-screen readers and assistive devices. - Component follows [WAI-ARIA Best Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel) for implementing keyboard interaction. - UI element visuals such as foreground color, background color, line spacing, text, and images are based on [WCG 2.0 standard](https://www.w3.org/TR/WCAG20/). ## Developer-friendly API Developers can control the appearance and behavior of the Tabs component using a rich set of APIs, such as those for adding a new tab or removing a tab. - [Angular Tabs API Reference](https://ej2.syncfusion.com/angular/documentation/api/tab/) ## Angular Tabs Code Example Easily get started with the Angular Tabs using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular Tabs Example](https://ej2.syncfusion.com/angular/demos/#/material/tab/default) that shows you how to render and configure the Tabs in Angular. - html - ts "action-description" "control-section e-tab-section" "e-sample-resize-container" heightAdjustMode= ViewEncapsulation /** * Default Tab Component */ 'control-content' 'tab.component.css' DefaultTabComponent // Mapping Tab items Header property ## Other supported frameworks Tabs is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the different Tabs platforms from the links below, - [Blazor Tabs](https://www.syncfusion.com/blazor-components/blazor-tabs) - [React Tabs](https://www.syncfusion.com/react-components/react-tabs) - [Vue Tabs](https://www.syncfusion.com/vue-components/vue-tabs) - [JavaScript Tabs](https://www.syncfusion.com/javascript-ui-controls/js-tabs) ## Angular version compatibility With continuous improvement in Angular versions, the Angular Tabs is kept up to date to make it compatible with the latest version. ### Angular 11 - [Getting started with Angular 11 Tab](https://support.syncfusion.com/kb/article/10882/how-to-get-started-easily-with-syncfusion-angular-11-tab) - [Angular 11 Tab demo](https://github.com/SyncfusionExamples/ej2-angular-11-tab) ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Toolbar | Material Navigation Bar | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-toolbar # Angular ToolBar - Responsive Angular Material Nav Bar - Responsive Angular toolbar (navbar) with scrollable and pop-up modes for accommodating many commands. - Better user experience for navigating through standard toolbar commands. - Built-in features for aligning commands with different priorities, templating, orientation, and more. ## Overview The Angular Toolbar (navigation bar) is a responsive and feature-rich component that provides an interface for selecting a command from a collection of commands. Its features include different orientations, responsive modes (scrollable and pop-up), templating, and button alignment based on priority. ## Rendering It has support for Template and Item rendering. ### Template rendering The Angular Navbar component allows you to customize the command appearance with HTML elements like images, text buttons, [toggle buttons](https://www.syncfusion.com/angular-components/angular-toggle-switch-button), select boxes, text boxes, and [autocomplete](https://www.syncfusion.com/angular-components/angular-autocomplete). This helps you make toolbar search boxes and toolbar menu-like applications. - [Toolbar template documentation](https://ej2.syncfusion.com/documentation/toolbar/template-configuration) ### Item rendering The Angular Material Toolbar component provides data-binding support, rendered based on a JSON array collection of properties such as text, type, and alignment. Data binding can be achieved by forming an array collection of items. - [Item-based rendering documentation](https://ej2.syncfusion.com/angular/documentation/toolbar/item-configuration) ## Responsiveness It adapts to the available space with two type of display modes, scrollable and pop-up, for modern web and mobile applications. - [Responsive mode documentation](https://ej2.syncfusion.com/angular/documentation/toolbar/responsive-mode) ## Scrollable Scrollable display mode displays Angular Toolbar commands in a single line with horizontal scrolling enabled when the items overflow the visible space. You can swipe over the toolbar commands to scroll. - [Scrollable mode documentation](https://ej2.syncfusion.com/angular/documentation/toolbar/responsive-mode#scrollable) ## Pop-up menu The pop-up menu is another type of overflow mode in which the toolbar container holds the items that can be placed within the available space. The items that do not fit the viewing area are moved to the overflow pop-up container. You can view the overflow tab headers by clicking the pop-up icon. - [Toolbar popup menu example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/toolbar/popup) ### Commands display priority You can prioritize the commands to be displayed in the pop-up or toolbar when minimum space is available to view them. - [Commands display documentation](https://ej2.syncfusion.com/angular/documentation/toolbar/responsive-mode#priority-of-commands) ### Pin items in pop-up You can set specific items to display always in the pop-up regardless of the available space on the toolbar. ## Multiple rows Displays the overflow toolbar items as an inline of a toolbar. ## Extended Hide the overflowing toolbar items in the next row. Show the overflowing toolbar items when you click the expand icons. If the pop-up content overflows the height of the page, the rest of the elements will be hidden. ## Commands alignment The Toolbar commands are positioned with left, right, or center alignment of the toolbar area. - [Toolbar alignment example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/toolbar/alignment) ## Buttons The Angular Toolbar component default command is a button type, and it can render given text input. - [Button documentation](https://ej2.syncfusion.com/angular/documentation/toolbar/item-configuration#button) ### Icons and images support You can add icons or images with or without text to the buttons. The icons can be positioned to the left or right. ### Text mode You can add button text when necessary, which means you can decide to show text in the pop-up alone, toolbar alone, or in both. ## Integration with other components The Angular Toolbar can be easily integrated with other components such as [Data Grid](https://www.syncfusion.com/angular-components/angular-grid), [Scheduler](https://www.syncfusion.com/angular-components/angular-scheduler), and [Rich Text Editor](https://www.syncfusion.com/angular-components/angular-wysiwyg-rich-text-editor). - [Integration with other components documentation](https://ej2.syncfusion.com/angular/documentation/toolbar/item-configuration#input) ## Tooltip To describe the actions of a command, a tooltip can be added. By default, HTML is supported, but the Angular Tooltip component can also be used. - [Tooltip documentation](https://ej2.syncfusion.com/angular/documentation/toolbar/how-to/set-tool-tip-to-the-commands) ## Command customization The Angular Toolbar provides customizable commands with styles such as CSS classes and HTML attributes such as ID, class, and styles. ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#toolbar) accessibility that helps the toolbar be accessible to on-screen readers and assistive devices. - Follows [WAI-ARIA Best Practices](https://www.w3.org/TR/wai-aria-practices/#toolbar) for implementing keyboard interaction. - Follows [WCG 2.0 standard](https://www.w3.org/TR/WCAG20/) in design of UI element visuals such as foreground color, background color, line spacing, text, and images. - [Toolbar keyboard interaction example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/toolbar/keyboard-interaction) - [Keyboard shortcuts documentation](https://ej2.syncfusion.com/angular/documentation/toolbar/accessibility#keyboard-interaction) ## Developer-friendly APIs Developers can control the appearance and behaviors of the toolbar using a rich set of APIs. ## Built-in themes The Angular Toolbar component is shipped with several built-in themes: Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and High Contrast. Users can customize any one of these built-in themes or create new themes by either simply overriding SASS variables or using our [Theme Studio](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) application. ## Angular ToolBar Code Example Easily get started with the Angular ToolBar using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular ToolBar Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/toolbar/default) that shows you how to render and configure a ToolBar in Angular. - html - ts "control-section" // specifies the template string for the Toolbar component ## Other supported frameworks Toolbar is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the different Toolbar platforms from the links below, - [Blazor Toolbar](https://www.syncfusion.com/blazor-components/blazor-toolbar) - [React Toolbar](https://www.syncfusion.com/react-components/react-toolbar) - [Vue Toolbar](https://www.syncfusion.com/vue-components/vue-toolbar) - [JavaScript Toolbar](https://www.syncfusion.com/javascript-ui-controls/js-toolbar) ## Angular version compatibility With continuous improvement in Angular versions, the Angular Tool Bar is kept up to date to make it compatible with the latest version. ### Angular 11 - [Getting started with Angular 11 Tool Bar](https://support.syncfusion.com/kb/article/11068/how-to-get-started-easily-with-syncfusion-angular-11-toolbar) - [Angular 11 Tool Bar example](https://github.com/SyncfusionExamples/ej2-angular-11-toolbar) ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Tree View | Hierarchical Data Model Tree List | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-tree-view # Angular Tree View - Highly Customizable Tree List Component - Display hierarchical data in a tree-view structure. - Load a wide range of nodes with optimal performance. - Drag and drop multiple selected tree nodes anywhere. - Select multiple nodes using built-in check boxes. - Edit node text in-line with editable nodes support. - Easily customize nodes, and expand or collapse icons. ## Overview The Angular Tree View (Tree List) is a graphical user interface component that represents hierarchical data in a tree structure. It provides advanced features like load on demand, checkboxes, multiple selection, tree navigation, drag and drop, tree node editing, and template support. ### High performance [Load on demand (lazy load)](https://ej2.syncfusion.com/angular/documentation/treeview/data-binding) is enabled by default to reduce bandwidth usage when consuming large amounts of data. Only first-level nodes are loaded initially, and then child nodes are loaded when their parent node is expanded. ### Seamless data binding [Bind data to the Tree View](https://ej2.syncfusion.com/angular/documentation/treeview/data-binding) component from any valid data source in JSON format. The tree data can be local or remote and retrieved via various adapters, such as OData, OData V4, URL, JSON, and web API. ### Adapts to any resolution Tree View has a highly responsive layout and an optimized design for desktops, touchscreens, and phones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Admirable feature set The Angular Tree View supports [load on demand, bound and unbound modes, drag and drop, multiselection, and editing](https://ej2.syncfusion.com/angular/documentation/treeview/getting-started). ### Create your own template designs It can be customized via [node template support](https://ej2.syncfusion.com/angular/documentation/treeview/template), which allows you to design a custom structure for tree nodes. Node templates can be used for parent nodes, child nodes, or both, and can include images and any custom element structure. ### Visualize hierarchical data The Angular Tree View is a graphic user interface element that displays hierarchical data as a tree structure. It can be populated with nested arrays of JSON objects from a hierarchical data source. ### Attractive, customizable themes Cutting-edge design with several built-in themes, such as Fluent, Tailwind CSS, Bootstrap, Material, and Fabric. Utilize the [online Theme Studio tool](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) to customize themes of treeview easily. ### Globalization and localization Enable users from different locales to use the component by formatting dates, currency, and numbering to suit preferences. ## Angular Tree View code example Easily get started with the Angular Tree View using a few simple lines of HTML and TSX code as demonstrated below. Also explore our [Angular Tree View example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treeview/default) that shows you how to render and configure the Tree View in Angular. - html - tsx > ## Tree node with icons Display nodes with labels and icons to present the content in a more readable format. This is helpful in making a typical directory tree and file system. - [Example of icons and images](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treeview/icons) ## Check box The Angular Tree View component provides built-in support for check boxes, allowing users to select more than one item. The Tree View check boxes also have a tri-state mode, which is applicable only for parent nodes. In this mode, the parent node will go into the indeterminate state when the child nodes are partially checked. - [Checkbox example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treeview/treeview-checkbox) - [Checkbox documentation](https://ej2.syncfusion.com/angular/documentation/treeview/check-box) ## Drag and drop In Angular Tree View, Nodes can be dragged and dropped at all levels of the same Tree View. - [Tree View drag and drop example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treeview/drag-and-drop) - [Tree View drag and drop documentation](https://ej2.syncfusion.com/angular/documentation/treeview/drag-and-drop) ### Inside the tree Tree nodes can be dragged and dropped from one parent node to another within the same level or at different levels. ### Outside the tree Extending the drop behavior allows users to drop tree nodes from one tree view to another. ### External container Drop tree nodes to any external container or component by extending the Angular Tree View node drop action. ## Multiple node selection The Angular Tree View component allows users to select multiple nodes. When the drag-and-drop feature is enabled, all the selected nodes can be dragged at the same time. - [Tree View multiple node selection example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treeview/multiple-selection) ## Editable nodes Edit the tree nodes’ label text on the client side by double-clicking it. When editing treeview nodes, the treeview data source will also be updated with the modified data. - [Tree View node editing documentation](https://ej2.syncfusion.com/angular/documentation/treeview/node-editing) ## Sorting tree nodes Render the Tree View nodes in the ascending or descending order based on the label text for improved readability. ## Node template The Angular Tree View component can be customized through its node template support, which allows you to define a custom structure for tree nodes. You can use node templates specifically for parent nodes, child nodes, or both, and include images and any custom element structure. - [Template example](https://ej2.syncfusion.com/demos/#/bootstrap5/treeview/template.html) - [Tree View node template documentation](https://ej2.syncfusion.com/angular/documentation/treeview/template) ## Expand collapse icons Easily customize the expand and collapse icons based on the requirement of your application. - [How to customize the expand collapse icons](https://ej2.syncfusion.com/angular/documentation/treeview/how-to/customize-the-expand-and-collapse-icons) ## Tooltips for tree nodes It supports tooltips for tree nodes that display information about the nodes while hovering over them. You can bind a tooltip from a data source along with node fields. - [Tooltip documentation](https://ej2.syncfusion.com/angular/documentation/treeview/how-to/set-tool-tip-for-tree-nodes) ## Context menu A context menu can be integrated with the Tree View component to open when a node is right-clicked. The menu helps users perform node manipulations such as adding, removing, and renaming nodes. - [Context menu documentation](https://ej2.syncfusion.com/angular/documentation/treeview/how-to/process-the-tree-node-operations-using-context-menu) ## Text wrap A node’s text wraps when it reaches edge of the Tree View. The node’s height will be adjusted automatically based on the content. - [Text wrap API documentation](https://ej2.syncfusion.com/angular/documentation/api/treeview/#allowtextwrap) ## Tree node customization It allows you to customize the tree nodes by level. For example, apply specific styles to leaf nodes, first child nodes, and second level nodes, etc. - [Tree node customization documentation](https://ej2.syncfusion.com/angular/documentation/treeview/how-to/customize-the-tree-nodes-based-on-levels) ## Tree node validation You can add validation to the tree node’s text on editing like required, a minimum or maximum length, etc. - [Tree node validation](https://ej2.syncfusion.com/angular/documentation/treeview/how-to/validate-the-text-when-renaming-the-tree-node) ### Keyboard navigation The Angular Tree View component ensures that every cell is [accessible using the keyboard](https://ej2.syncfusion.com/angular/documentation/treeview/accessibility#keyboard-navigation). Major features like sort, select, and edit can be performed using keyboard commands alone; no mouse interaction is required. This helps in creating highly accessible applications using this component. ### Screen reader The Angular Tree View has complete WAI-ARIA accessibility support. The Data Grid UI includes high-contrast visual elements that help visually impaired people to have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers. ### Right to left (RTL) Right-to-left rendering allows displaying the text and layout of the Tree View from right to left. This improves the user experience and accessibility for RTL languages. ## Angular version compatibility With continuous improvement in Angular versions, the Angular Tree View is kept up to date to make it compatible with versions starting from 4 to the latest version. - [More details on Angular Tree View version compatibility](https://support.syncfusion.com/kb/article/12182/angular-treeview-version-compatibility) ## Other supported frameworks The Tree View is available for the Blazor, React, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [Blazor TreeList](https://www.syncfusion.com/blazor-components/blazor-treeview) - [React TreeList](https://www.syncfusion.com/react-components/react-treeview) - [JavaScript Tree List](https://www.syncfusion.com/javascript-ui-controls/js-tree-view) - [Vue Tree List](https://www.syncfusion.com/vue-components/vue-tree-view) ## Supported browsers The Angular Tree View works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/treeview/getting-started) ##### Angular Calendar | Customizable Calendar | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-calendar # Angular Calendar - The Best Calendar For Mobile and Desktop - A lightweight and easily configurable UI calendar component. - Next-level features such as multiple date selection, date range restriction, week numbers, and configurable first day of the week. - Modern themes, including Material design. ## Overview Angular Calendar is a rich UI component used to display dates and days of the week or month. It provides month, year, and decade views to quickly navigate to the desired date. It supports minimum, maximum, and disabled dates to restrict the date selection. ### Easy to interact The user can be [restricted to choosing a date](https://ej2.syncfusion.com/angular/documentation/calendar/date-range) from a predetermined range of dates. Any date in the Angular Calendar can be disabled to make it inactive. ### Calendar views Calendar has [predefined views](https://ej2.syncfusion.com/angular/documentation/calendar/calendar-views) that provide a flexible approach to navigate back and forth when selecting dates. ### Islamic calendar The Angular Calendar component lets users show the [Islamic calendar](https://ej2.syncfusion.com/angular/documentation/calendar/islamic-calendar)(Hijri calendar) in addition to the Gregorian calendar. ### Adapts to any resolution A highly responsive calendar component with a design optimized for both desktops and mobile devices. It works well on mobile phones that use iOS, Android, or Windows. ### Attractive, customizable themes Cutting-edge design with several built-in themes, such as Fluent, Tailwind CSS, Bootstrap, Material, and Fabric. Utilize the [online Theme Studio tool](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) to customize themes of calendar easily. ### Globalization and localization With built-in globalization options, a culture-specific date format and the first day of the week can be chosen. The text of the month, day, and today button can be [translated to any supported language](https://ej2.syncfusion.com/angular/documentation/calendar/globalization). ## Angular Calendar Code Example Easily get started with the Angular Calendar using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular Calendar Component Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/calendar/default) that shows you how to render and configure a Calendar in Angular. - html - ts "control-section" "control_wrapper" ` ` ## Month or year picker Select only the month or year as a value (month picker or year picker) in the Angular calendar. - [Custom view documentation](https://ej2.syncfusion.com/angular/documentation/calendar/calendar-views) ## Date selection within a date range You can restrict the Angular Calendar component so that only a date value within a specific range of dates can be entered or selected by specifying the minimum and maximum date options. - [Date range documentation](https://ej2.syncfusion.com/angular/documentation/calendar/date-range) ## Multiple date selection Configure the Angular Calendar to allow users to select single or multiple date values (sequence or random date selection). - [Multiple date selection](https://ej2.syncfusion.com/angular/documentation/calendar/multi-select) ## Change first day of week Automatically update the first day of the week based on the specified culture or change it based on your application requirements. - [First day of week documentation](https://ej2.syncfusion.com/angular/documentation/calendar/how-to/change-the-first-day-of-week) ## Week number Show the week number of a selected date by enabling the week number option in the Angular Calendar. - [Week number documentation](https://ej2.syncfusion.com/angular/documentation/calendar/how-to/render-the-calendar-with-week-numbers) ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility guidelines that allow the calendar to be accessed by screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing keyboard interaction. - Uses[WCAG 2.0](https://www.w3.org/TR/WCAG20/)-based design for UI element visuals such as foreground color, background color, line spacing, text, and images. - Supports right-to-left (RTL) direction for users working in right-to-left languages like Hebrew and Arabic. ### Keyboard navigation The Angular Calendar component ensures that every cell is accessible using the keyboard. Major features like sort, select, and edit can be performed using keyboard commands alone; no mouse interaction is required. This helps in creating highly accessible applications using this component. - [Keyboard navigation documentation](https://ej2.syncfusion.com/angular/documentation/calendar/accessibility#keyboard-navigation) ### Screen reader The Angular Calendar view has complete WAI-ARIA accessibility support. The Calendar UI includes high-contrast visual elements that help visually impaired people to have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers. ### Right to left (RTL) Right-to-left rendering allows displaying the text and layout of the Calendar from right to left. This improves the user experience and accessibility for RTL languages. - [RTL documentation](https://ej2.syncfusion.com/angular/documentation/calendar/globalization#right-to-left) ## Angular version compatibility With continuous improvement in Angular versions, the Angular Calendar is kept up to date to make it compatible with versions starting from 4 to the latest version. - [More details on Angular Calendar version compatibility](https://support.syncfusion.com/kb/article/12279/angular-calendar-version-compatibility) Multi-view calendar Islamic calendar support [Explore Complete Angular Comparison](https://www.syncfusion.com/pages/angular-competitive-upgrade/) ## Other supported frameworks The Calendar is available for the Blazor, React, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) - [React Calendar](https://www.syncfusion.com/react-components/react-calendar) - [JavaScript Calendar](https://www.syncfusion.com/javascript-ui-controls/js-calendar) - [Vue Calendar](https://www.syncfusion.com/vue-components/vue-calendar) ## Supported browsers The Angular Calendar works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/calendar/getting-started) --- title: Angular Scheduler Component & Event Calendar | Syncfusion description: Angular Scheduler for event calendars, booking systems, and resource scheduling apps. Supports drag-drop editing, timezone support, and high performance. image: "https://ft.syncfusion.com/featuretour/ft-og-images/angular/angular-scheduler.png" url: "https://www.syncfusion.com/angular-components/angular-scheduler" --- # Angular Scheduler Component for Building Calendar & Scheduling Apps - An Angular Scheduler is an event calendar UI component that allows you to display, create, edit, and manage appointments, meetings, and events in Angular applications. - It supports multiple calendar views, recurring events, drag-and-drop scheduling, resource scheduling, and time zone handling. ## Overview The Syncfusion Angular Scheduler is a flexible and high-performance event calendar component built for managing time-based data and resources in Angular applications. It is commonly used to build booking systems, appointment scheduling solutions, and resource planning applications where accuracy, usability, and scalability matter. Designed to handle complex scheduling scenarios, it helps teams deliver rich, user-friendly calendar experiences without extensive custom UI work. ### High performance Optimized rendering and efficient data handling ensure [fast load times](https://ej2.syncfusion.com/angular/documentation/schedule/virtual-scrolling) and smooth scheduling, even when managing large volumes of events in enterprise applications. ### Flexible data binding [Connect easily](https://ej2.syncfusion.com/angular/documentation/schedule/data-binding) to REST APIs, JSON, or cloud data sources. Supports real-time updates and seamless integration with modern application backends. ### Accessibility compliant Built with accessibility best practices, including keyboard navigation and screen reader support, ensuring inclusive user experiences. ### Fully responsive [Adaptive layout](https://ej2.syncfusion.com/angular/documentation/schedule/resources#compact-view-in-mobile) delivers a consistent scheduling experience across desktops, tablets, and mobile devices without additional configuration. ### Customizable themes Personalize the scheduler’s appearance using built-in themes or custom styling to match your application’s design and branding. Utilize the [online Theme Studio tool](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) to customize themes of Scheduler easily. ### Globalization support Supports [multiple languages](https://ej2.syncfusion.com/angular/documentation/schedule/localization), time zones, and regional formats, enabling developers to build scheduling applications for global users. ## Installation & Quick Start Follow these three steps to integrate the Scheduler into your Angular application. ### Install the Scheduler Package Install the [Syncfusion Angular Scheduler package using npm](https://www.npmjs.com/package/@syncfusion/ej2-angular-schedule). - bash ### Import the required CSS styles Import the required Syncfusion CSS files in src/styles.css to apply proper layout and theme styling. - css "../node_modules/@syncfusion/ej2-base/styles/material3.css" "../node_modules/@syncfusion/ej2-buttons/styles/material3.css" "../node_modules/@syncfusion/ej2-calendars/styles/material3.css" "../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css" "../node_modules/@syncfusion/ej2-inputs/styles/material3.css" "../node_modules/@syncfusion/ej2-lists/styles/material3.css" "../node_modules/@syncfusion/ej2-navigations/styles/material3.css" "../node_modules/@syncfusion/ej2-popups/styles/material3.css" "../node_modules/@syncfusion/ej2-angular-schedule/styles/material3.css" ### Initialize the Scheduler component Import and render the Scheduler component in src/app/app.component.ts. Inject the desired views such as Day, Week, WorkWeek, Month, or Agenda to enable flexible scheduling capabilities. - typescript '@syncfusion/ej2-angular-schedule' [Get Started Now](https://www.syncfusion.com/downloads/angular?tag=es-ft-angular-scheduler-downloads-code-example) ## AI Scheduler for Smarter Planning The AI Scheduler organizes your calendar with ease. Just type instructions like, “Meet the team every Friday at 10 AM”, and it handles the rest. It checks for conflicts, suggests optimal times, and organizes your calendar visually. ## Angular Scheduler Use Cases Build powerful scheduling and booking applications using the Syncfusion Angular Scheduler. It supports real-world scenarios such as healthcare scheduling, resource booking, hospitality reservations, and workforce management. ### Healthcare scheduling Manage patient appointments, doctor availability, and recurring visits efficiently. Prevent conflicts and support accurate scheduling across departments and locations. ### Resource and room booking Enable users to reserve meeting rooms, equipment, or shared spaces. Prevent double bookings and manage resource availability with ease. ### Hotel reservations Handle room bookings and guest schedules efficiently. Easily update and reschedule reservations using intuitive scheduling interactions. ### Employee shift scheduling Plan employee shifts, assign roles, and manage workforce availability. Simplify staff coordination and scheduling operations. ## Multiple Calendar views A wide variety of built-in view modes are available: day, week, workweek, month, agenda, month-agenda, year, and timeline. Easily configure each individual view with different, view-specific options. ### Day, week, and workweek views Display appointments for a single day or across multiple days. ### Month view Display events and appointments on a single day or multiple days for an entire month. ### Agenda view Load events virtually and display them as a list in a sequential order grouped by day. An option exists to specify the number of days to load initially in the agenda view. ### Month agenda view Display the calendar layout and the events of the currently selected date. A round indicator at the bottom of a date shows the presence of one or more events on that day. ### Year view Year view displays all the months of a particular year in a calendar view format. In that calendar view, dates containing events and appointments are highlighted with dots placed under the individual date. When you click on the date, the event pop-up will be displayed and the events will be listed. ### Timeline views Angular Scheduler provides five built-in timeline views: timeline day, timeline week, timeline workweek, timeline month, and timeline year. Each view displays events accurately across a horizontal time axis for a single day or multiple days. To provide better performance, timeline views load resources, events, and appointments virtually on every scroll action. - [More details on timeline scheduling](https://www.syncfusion.com/angular-components/angular-scheduler/timeline-views) ## Recurring event scheduling Easily create and manage recurring appointments with flexible recurrence rules. Schedule daily, weekly, monthly, or custom recurring events, and handle exceptions or modifications without affecting the entire series. This makes it ideal for applications such as appointment booking systems, healthcare scheduling, and workforce planning tools. ## Resource scheduling Efficiently manage and schedule multiple resources such as meeting rooms, employees, equipment, or service providers. Group events by resource, track availability, and prevent scheduling conflicts. This is essential for resource planning, workforce management, and reservation systems. - [More details on multiple resources](https://www.syncfusion.com/angular-components/angular-scheduler/multiple-resources) ## Drag-and-drop scheduling Enable intuitive scheduling with built-in drag-and-drop and resizing capabilities. Users can quickly move appointments, adjust durations, or update schedules directly from the interface. This improves scheduling efficiency and provides a seamless user experience in calendar and scheduling applications. ## Timezone support Regardless of the system time zone, the Angular Event Calendar supports setting the required time zone for the control itself, as well as events. ## Real-time data synchronization Real-time appointment data accurately synchronizes with our Angular Scheduler. ### Outlook and Google Calendar integration Easily synchronize events between our Angular Event Calendar and Google or Outlook Calendar via the Google Calendar API or Microsoft Outlook’s object library. ### Real-time updates Bidirectional data communication conveys the server-side appointment updates made on Scheduler to all the connected clients through SignalR. ## Advanced event-handling options The Angular Event Calendar provides clear, vibrant, exact representations of events and appointments across the Scheduler timeline, based on their assigned time duration. - [Learn more about event editing options](https://www.syncfusion.com/angular-components/angular-scheduler/scheduler-events) ### Add and edit capabilities There is built-in support for better event handling, such as easier appointment creation and editing using the default event editor or through intuitive drag-and-resize actions. In addition, you can also add custom data fields to both the events and resource data source. ### Multi-event selection Easily select multiple events at once by pressing and holding the Ctrl key while clicking on events. On mobile devices, do the same by tapping and holding an event, and continue selecting by single-tapping other events. After successfully selecting events, delete or reposition them simultaneously. ### Tooltip The customizable tooltip displays event information while the mouse pointer is hovering over the event. Do the same on mobile devices by tapping and holding an event. ### Appearance customization Change the look and feel of Angular Scheduler events and appointments by customizing their default appearance and style using any HTML or CSS. ### Clipboard The Angular Scheduler supports clipboard functionality, allowing users to manage events efficiently. Users can copy selected events using the Ctrl+C shortcut, cut events with Ctrl+X, and paste events into different time slots using Ctrl+V. ### Inline appointment With this feature enabled, users can create or edit appointments inline with a single click on a scheduler cell or an appointment subject. Pressing Enter after typing the new subject will update and save the appointment. ## Customizable scheduler views Real-time appointment data accurately synchronizes with our Angular Scheduler. ### Unique view configurations Easily configure each individual view mode with different calendar settings. For example, you can enable the grouping feature in month view and apply event templates in week view. ### Extensible view intervals Display multiple days, weeks, and months by extending each view mode based on the provided interval count. ## Block time interval You can block specific time ranges on Angular Event Calendar to prevent the creation of events and appointments in that time slot. ## Adaptive rows A built-in option has been added to the Angular Event Calendar to automatically increase the height of the rows in month and timeline views when new concurrent events or appointments are added. ## Context menu Context menu integrated with Angular Scheduler opens when a cell or appointment is right-clicked. ## Feature-rich calendar options The Angular Event Calendar inherits almost all the calendar-specific features, such as first day of the week and timescale. ### First day of the week Customize the first day of the week, which defaults to Sunday, as per the default locale. You can utilize this option for individual views, also. ### Custom start and end hours Display the event scheduler layout with specific time durations by hiding the unwanted hours. ### Flexible timescale Use customizable timescale options to view a timeline of events clearly and set a different duration. ### Working time The active cells of the scheduler (displayed in white) visually represent the work days and working hours. ### Highlighting current time Indicate the current date with a highlighted date header. Mark accurately the current time on all views. ### Hiding weekend days Hiding weekend days from the Scheduler allows you to display only working days across all views. ### Week number display Display the week number of the current date range beside the date header in day, week, and workweek views. Also display the week number in the month view as the first column. The week number is determined by the first day of the week and week rules (first day or first full week, or first four day week). ### Time mode The Scheduler control supports both 12-hour and 24-hour time formats. ## Completely customizable UI Customize the appearance of any part of the Scheduler interface using HTML and CSS styles. ### Date header Change the default appearance of the header bar by adding any kind of CSS, custom text, or image. ### Complete Scheduler UI A built-in client-side event allows the end users to customize any part of the Scheduler user interface. ### Header bar Add custom items to the default header bar options. You can hide or show common header bar options. ### Scheduler cells Out-of-the-box template options allow you to easily customize the cells by adding any kind of text, image, or CSS. ### Quick pop-ups Easily customize pop-ups that open when single-clicking on cells, events, or appointments with your own UI or template design. ### Open event editor externally The Angular Event Calendar offers a built-in method to open the default event editor window programmatically. ## User-friendly interactions The modern and trendy UI design of the Angular Scheduler makes the user interactions simpler and more efficient. ### Quick event overview Clicking or tapping on events displays their important details, such as subject and time, along with edit and delete options. ### Cell selection Click and drag the pointer over the Scheduler cells for multiple-cell selection. You can do the same with keyboard shortcuts. ### Event container Clicking on the text indicator (+n more) in month and timeline views will open an event container listing all the hidden event and appointment details of a day. ### Quick navigation The Angular Scheduler provides an intuitive way to navigate back and forth among the date ranges using an inline calendar, and also to navigate between different view modes. ## Interactive features The Angular Scheduler allows users to export its events in two ways: as an Excel file or as an ICS file. ### Export to Excel The Angular Scheduler allows you to export all its events to an Excel document by default. It also provides additional customization options to export custom event data collections. ### Export and import ICS The Angular Event Calendar supports exporting all its event data to iCal format, and it supports importing events from an iCal file into the Scheduler. ### Developer-friendly APIs Developers can have full control over the UI and behavior of the event calendar through its built-in, developer-friendly APIs. It allows you to customize even the complex Scheduler functionalities with ease. ## Accessibility The Angular Scheduler component is easily accessed by screen readers. Complete keyboard interaction support has also been provided. ### Completely accessible The Angular Scheduler component has complete WAI-ARIA accessibility support. The Scheduler UI includes high-contrast visual elements, giving visually impaired people the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers. ### Interactive keyboard Various keyboard shortcuts are available to perform almost all the Scheduler actions, such as multiple cell or event selection and navigating to other views. ### Right to left (RTL) Render the event scheduler following the proper right-to-left conventions. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) ##### Angular Badge Component | Material Badge | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-badge # Angular Badge Component: Responsive Notification Badge - An easily customizable, pure HTML5/CSS notification badge that provides widely used badge types, standard colors, and predefined color variants. - The Badge is commonly used to display a notification count or status information in different sizes and contextual color variants. - Easy integration with other components such as Avatar, ListView, and Menu. ## Overview The Angular Badge is a pure CSS component used to add notifications, messages, or statuses in different shapes and sizes. The Badge component can be easily integrated with ListView, Avatar, and other container controls. ## Notification badge The CSS Badge displays unread notification counts in different colors to indicate their priority level. - [Facebook notification badge documentation](https://ej2.syncfusion.com/angular/documentation/badge/types#notification) ## Pill badge Create badges with rounded edges using the pill badge variant. - [Pill badge documentation](https://ej2.syncfusion.com/angular/documentation/badge/types#pill) ## Link badge Create clickable link badges using the link CSS badge variant with an anchor element. It has hover and focus states. - [Link badge documentation](https://ej2.syncfusion.com/angular/documentation/badge/types#link) ## Overlap badge Create badges that overlap with profile icons or images, similar to social media notification count badges. - [Overlap badge documentation](https://ej2.syncfusion.com/angular/documentation/badge/types#overlap) ## Badge position The notification badge can be positioned at the top or bottom of profile icons or images. It is placed at the top by default. - [Badge position documentation](https://ej2.syncfusion.com/angular/documentation/badge/types#position) ## Predefined styles Eight predefined contextual color variants are available for badges. ## Types of badges The CSS Badge control supports six different styles: default, circle, pill, notification, ghost, and dot. - [Types of badges documentation](https://ej2.syncfusion.com/angular/documentation/badge/types) ## UI customization Completely customize the CSS Badge attributes, like dimensions and colors. - [Badge customization documentation](https://ej2.syncfusion.com/angular/documentation/badge/how-to/badge-customization) ## Integration with other components Integrate the Angular Badge into various components to achieve different UIs, such as displaying the number of unread messages in an email category or the status of product support. - [Badge integration documentation](https://ej2.syncfusion.com/angular/documentation/badge/how-to/integrate-badge-into-listview) ## Angular Badge code example Easily get started with Angular Badge using a few simple lines of HTML and TS code, as demonstrated below. Also explore our [Angular Badge example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/badge/default) that shows you how to render the Angular Badge. - html - ts "col-lg-12 control-section" "sample_container badge-list" (actionComplete)= "onActionComplete()" "width: inherit;height: inherit;" ViewEncapsulation ./dataSource.json /** * Sample for CSS Basic Layout Badge */ ListviewController // Data source for listview, badge field is the class data for Badges onActionComplete getElementsByClassName e-list-group-item ## Other supported frameworks The Badge component is also available in our React, Vue, and JavaScript frameworks. Check out the Badge in different platforms from these links: - [React Badge](https://www.syncfusion.com/react-components/react-badge) - [Vue Badge](https://www.syncfusion.com/vue-components/vue-badge) - [JavaScript Badge](https://www.syncfusion.com/javascript-ui-controls/js-badge) ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Toast Notification | Customizable Pop-up | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-toast # Angular Toast Notifications - A Lightweight Pop-up Alert Component - Animated notification pop-up that is small and nonblocking. - Fully customizable notification with timing and a progress bar. - Predefined standard notification types such as alert, success, error, warning, and information. ## Overview The Angular Toast is a small, nonblocking notification pop-up. It is a readable message displayed at the bottom of the screen or at a specific target and disappears automatically after a few seconds (time out) with different animation effects. The control has various built-in options for customizing visual elements, animations, durations, and dismissing toasts. ## Angular Toast Code Example Easily [get started with the Angular Toast](https://ej2.syncfusion.com/angular/documentation/toast/getting-started) using a few simple lines of HTML and TSX code as demonstrated below. Also explore our [Angular Toast example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/toast/default) that shows you how to render and configure the Toast in Angular. - html - ts "action-description" "col-lg-12 control-section toast-default-section" "e-sample-resize-container" "col-lg-12 col-sm-12 col-md-12 center" "toastBtnDefault" "margin: auto;text-align: center" ViewEncapsulation ToastPositionModel '@syncfusion/ej2-angular-notifications' '@syncfusion/ej2-angular-buttons' /** * Sample for Basic Toast */ 'control-content' DefaultController childElementCount 'document:click' ## Interactive toasts Users can create a more interactive toast message by configuring inputs and buttons on the notification pop-up that help them react quickly (for example, users can reply to a chat message directly from the toast pop-up). - [Interactive toasts example](https://ej2.syncfusion.com/angular/demos/#/material/toast/api) - [Action buttons configuration documentation](https://ej2.syncfusion.com/angular/documentation/toast/action-buttons) ## Visual elements A normal toast notification can be designed with plain text and optional images, icons, inputs, and buttons. Users can load HTML content and change the content dynamically inside the toast with templates. - [Toast template example](https://ej2.syncfusion.com/angular/demos/#/material/toast/template) - [Toast elements documentation](https://ej2.syncfusion.com/angular/documentation/toast/config) ## Positioning notifications The Angular Toast notifications component is easily positioned wherever you want by using built-in positions or custom axis values (X, Y). - [Toast positioning example](https://ej2.syncfusion.com/angular/demos/#/material/toast/positions) - [Toast positioning documentation](https://ej2.syncfusion.com/angular/documentation/toast/position) ## Animation Users can configure different animations to show or hide the toast and and modify the animation duration based on the content length of the notification message and reading time. - [Toast animation example](https://ej2.syncfusion.com/angular/demos/#/material/toast/api) - [Toast animation documentation](https://ej2.syncfusion.com/angular/documentation/toast/animation) ## Dismiss toasts Users can dismiss all Angular Toast notifications through user input or timeouts. Notifications can also be dismissed by swiping or tapping them. - [Toast timeout documentation](https://ej2.syncfusion.com/angular/documentation/toast/timeout) ## Multiple notifications Users can display multiple toast notifications in a sequence (queue up) within a set duration. Also, users can change the order of a toast notification sequence to place the newest on top. - [Multiple toast notifications documentation](https://ej2.syncfusion.com/angular/documentation/toast/how-to/show-multiple-toasts-in-various-positions) ## Toast message types Users can easily design common Angular toast notifications using built-in classes such as alert, success, warning, information, and error. - [Toast types example](https://ej2.syncfusion.com/angular/demos/#/material/toast/types) - [Toast types documentation](https://ej2.syncfusion.com/angular/documentation/toast/how-to/show-different-types-of-toast) ## Timing (duration) The Angular Toast notification component can be configured with a duration time for a complete message to be read before it is hidden. You can extend the timeout dynamically after focusing on it. - [Toast timeout documentation](https://ej2.syncfusion.com/angular/documentation/toast/timeout) ## Progress bar Users can enable a progress bar inside the toast to track the progress of an operation and the expiration of a toast message. - [Toast progress bar documentation](https://ej2.syncfusion.com/angular/documentation/toast/config#progress-bar) ## Toast message verification Users can verify duplicate toast notifications and allow only distinct messages on the screen. They can restrict the maximum number of toasts to be displayed. Also, users can prevent toast messages from hiding and make them stick with the screen. - [Toast validations example](https://ej2.syncfusion.com/angular/demos/#/material/toast/api) - [Prevent duplicate toast message documentation](https://ej2.syncfusion.com/angular/documentation/toast/how-to/prevent-duplicate-toast-display) ## Appearance Customize the look and feel of the Toast by changing its fill color, background, border, and item opacity. - [Appearance documentation](https://ej2.syncfusion.com/angular/documentation/toast/style) ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#tabpanel) accessibility, making it accessible to screen readers and assistive devices. - Follows the [WCAG 2.0 standards](https://www.w3.org/TR/WCAG20/) in the design of its UI visual elements, such as foreground color, background color, line spacing, text, and images. - [Toast accessibility documentation](https://ej2.syncfusion.com/angular/documentation/toast/accessibility) ## Developer-friendly API Developers can control the appearance and behaviors of the Toast notification component, including its positioning, using a rich set of APIs. - [Angular Toast notification API example](https://ej2.syncfusion.com/angular/demos/#/material/toast/api) - [Angular Toast notification API reference](https://ej2.syncfusion.com/angular/documentation/api/toast/) ## Other supported frameworks Toast is also available for the Blazor, React, JavaScript, and Vue frameworks. Check out the different Toast versions from the links below: - [Blazor Toast](https://www.syncfusion.com/blazor-components/blazor-toast) - [React Toast](https://www.syncfusion.com/react-components/react-toast) - [JavaScript Toast](https://www.syncfusion.com/javascript-ui-controls/js-toast) - [Vue Toast](https://www.syncfusion.com/vue-components/vue-toaster) ## Supported browsers The Angular Toast notification works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) --- title: Angular Data Grid | Fast & Flexible Grid Component | Syncfusion description: Angular Data Grid (Angular Grid) is a powerful, high-performance component for displaying, editing, and managing data tables in an Angular application. image: "https://ft.syncfusion.com/featuretour/ft-og-images/angular/angular-grid.png" url: "https://www.syncfusion.com/angular-components/angular-data-grid" --- # Angular Data Grid – A Powerful Grid for Modern Apps - Millions of records load in just a second. - Mobile-first design that adapts to any resolution. - Flexible editing and intuitive record selection modes. - Out-of-the-box Excel-like filtering and grouping options. - Countless column customizations and data summaries. - Seamless data exporting options like PDF, CSV, and Excel. ## Angular Data Grid overview The Angular Data Grid is a feature-rich grid component for displaying data in a tabular format. Its wide range of functionalities includes data binding, editing, Excel-like filtering, custom sorting, grouping, row reordering, freezing rows and columns, aggregating rows, and exporting to Excel, CSV, and PDF formats. ### High performance A focus on fast-paced performance allows users [to load millions of records](https://www.syncfusion.comangular-data-grid/performance) in just a second. ### Seamless data binding Bind data seamlessly with various [local and remote data sources](https://www.syncfusion.com/angular-components/angular-data-grid/data-binding) such as JSON, OData, WCF, and RESTful web services with the help of a data manager. ### Adapts to any resolution The Data Grid has a [highly responsive layout](https://ej2.syncfusion.com/angular/documentation/grid/adaptive) and an optimized design for desktops, tablets, and smartphones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Flexible editing The Angular Data Grid performs [create, read, update, and delete operations](https://www.syncfusion.comangular-data-grid/editing) (CRUD) more easily with a list of business objects or remote data service with the help of a data manager. ### Create your own template designs ### Attractive customizable themes Cutting-edge design with built-in themes such as Fluent, Tailwind CSS, Bootstrap, Material, Fabric, and more. Utilize the [online Theme Studio tool](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) to customize themes easily. ### Easy export and printing [Export the Data Grid](https://www.syncfusion.comangular-data-grid/excel-export) in various file formats, including Excel, [PDF](https://ej2.syncfusion.com/angular/documentation/grid/pdf-export/pdf-export), and CSV. [Print](https://ej2.syncfusion.com/angular/documentation/grid/print) all the rows, regardless of the number of pages, as well as just the currently viewed page. ### Globalization and localization [Enables users from different locales](https://ej2.syncfusion.com/angular/documentation/grid/global-local) to use the control by formatting dates, currency, and numbering to suit preferences. ## AI-ready grid for enterprise data analysis Accelerate data analysis in Angular apps with a data grid designed for AI enhancements. Easily plug in semantic search and anomaly detection for smarter data workflows. - Semantic search: Use natural language processing (NLP) models to allow users to search with everyday phrases, improving usability, with no exact keywords required. - Anomaly detection: Add machine learning (ML) tools to highlight data anomalies and ensure consistency automatically. ## Angular Data Grid code example Easily get started with the Angular Data Grid using a few simple lines of HTML and TS code, as demonstrated below. Also explore our [Angular Data Grid example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/grid/default), which shows you how to render and configure a Data Grid in Angular. - html - ts "control-section" 'ej2-grid-container' DefaultComponent ## Skeleton loading indicator The Data Grid shows the shimmer effect as a loading indicator while fetching data and binding it to the grid during initial rendering, refreshing, or after performing grid actions like sorting, filtering, and grouping. The data grid offers two types of loading indicator effects: spinner and shimmer. ## Adaptive UI layout The Data Grid user interface is customized and redesigned for great views and usability on small screens. Its features include filter, sort, search, column chooser, column menu, pager dropdown, and edit dialogs, which are adaptive to the screen size and render row elements vertically. ## Columns Columns define the schema of the data source in the Data Grid. They support formatting, auto-generating columns, column definitions, freezing rows and columns, column spanning, text wrapping, column chooser, column menu, and other features. - [More details on column behaviors](https://www.syncfusion.com/angular-components/angular-data-grid/column) ## Paging Paging is used to view a segment of data from the assigned data source. The Angular Data Grid offers a built-in pager UI with options to customize its entire UI. It also has an on-demand paging mode for effective data retrieval from remote web services. - [More details on paging feature]() ## Sorting Sort rows either in ascending or descending order against a column by simply clicking the header. Sort multiple columns’ data by holding the Ctrl key + header click. In addition, define your own custom sorting logic as needed. - [More details on sorting feature](https://www.syncfusion.com/angular-components/angular-data-grid/sorting) ## Filtering Filtering helps view particular or related records that meet a given criteria in a data grid. The Data Grid supports various filter types, including powerful, Excel-like filters. Choose the appropriate filter type, define your own custom filtering logic, and customize the filtering UI. Diacritic characters can also be filtered. - [More details on filtering feature](https://www.syncfusion.com/angular-components/angular-data-grid/filtering) ## Selection Select rows or cells using the checkbox or by simply clicking them. Select more than one row or cell by holding Ctrl, Shift, or Command, or programmatically. - [More details on selection feature](https://www.syncfusion.com/angular-components/angular-data-grid/selection) ## Editing The Angular Data Grid supports create, read, update, and delete operations (CRUD). In addition to built-in editor components to edit a particular column value, custom editor components can be created using templates. With the help of a data manager, you can perform editing operations with array collection or a remote data service. - [More details on editing feature](https://www.syncfusion.com/angular-components/angular-data-grid/editing) ## Grouping Group rows to display the data in an organized hierarchical structure in ascending or descending order to facilitate easier expansion and collapse of records. There is an option to group records of the desired column by simply dragging and dropping that column into an interactive drop area. - [More details on grouping feature](https://www.syncfusion.com/angular-components/angular-data-grid/grouping) ## Aggregation Easily visualize the aggregates of the Data Grid column values using the summary option. Aggregates can be customized to show their value in individual summary rows, individual group summary rows, or group caption rows. - [More details on aggregation feature](https://www.syncfusion.com/angular-components/angular-data-grid/aggregation) Frozen rows and columns are visible at the top and on the left, right, both, or in a fixed position, making the remaining grid content scrollable. This feature is mainly used to compare cell values. ## Pinned rows Pinned rows keep specific rows fixed at the top of the grid. This enhancement ensures that key records remain visible during operations such as paging, sorting, and filtering, providing continuous accessibility across all data interactions. ## Sticky header The Angular Data Grid header has to be in a fixed position when scrolling the document vertically to visualize the grid content along with the column header. ## Row drag and drop The Angular Data Grid allows users to drag and drop rows to another Data Grid or custom component. Users can also drag and drop rows within the same Data Grid using the drag icon and transfer rows between different groups. ## Master-detail grid An Angular master-detail grid is a use-case scenario in which a record’s details are viewed in a separate data grid by clicking a particular row. ## State management The state management in the Angular Data Grid component allows you to maintain the grid’s state even after a browser refresh or when navigating to a different page within the same browser session. This feature is especially beneficial for retaining the grid’s configuration and data following a page reload. ## Live update The Data Grid updates live data in its cells at specific time intervals. These updates occur without causing any lag or slowdown, ensuring that the system remains highly responsive and efficient. ## Charts Integrated with Data Grid The Data Grid integrates with the Charts component, transforming the selected grid data into dynamic, interactive visualizations. This combination of tables and charts lets users gain clearer insights at a glance. Users can customize the chart types, axes, and visuals. ### Row height Row height is a major factor when displaying the number of records in the viewport. It is easily customizable and the row height can also be set conditionally. ### Copy to clipboard The clipboard allows users to copy data from selected rows or cells into it. The Ctrl+C and Ctrl+Shift+H key combinations copy data with and without headers, respectively. ### Context menu Perform various actions in a Data Grid using the pop-up menu that appears when the cell, header, or pager is right-clicked. In addition to built-in default menu items, custom context menu items can be added. ### Width and height Set the width and height properties to change the size of a data grid. When the content overflows the grid element, horizontal and vertical scrollbars will appear. To fill the data grid’s parent container, simply set the height and width to 100%. ### Stacked headers Stacked headers allow grouping and visualizing column headers in a stacked manner. The number of columns that can be stacked is unlimited. Perform all Data Grid actions even when the columns are stacked. ### Keyboard navigation The Angular Data Grid component ensures that every cell is accessible using the keyboard. Major features like sort, select, and edit can be performed using keyboard commands alone; no mouse interaction is required. This helps in creating highly accessible applications using this component. ### Screen reader The Angular Data Grid view has complete WAI-ARIA accessibility support. Its UI includes high-contrast visual elements that help visually impaired people to have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers. ### Right to left (RTL) Right-to-left rendering allows displaying the text and layout of the Data Grid from right to left. This improves the user experience and accessibility for RTL languages. ## Mobile-optimized and touch-friendly The Data Grid component improves usability and provides an optimized and responsive design for desktops, tablets, and phones across all operating systems, including iOS, Android, and Windows. ### Touch support User-friendly touch gestures and an interactive UI design provide the best user experience. All Data Grid features work on touch devices with zero configuration. ### Responsive pager The Data Grid pager acts intelligently and changes its complete UI responsively based on the dimension. Its optimized design provides the best UI interaction on different devices. ## Angular version compatibility The Angular Data Grid is kept up-to-date with the continuous improvement in Angular versions to make it compatible with versions from 4 to the latest version. - [More details on Angular Data Grid version compatibility](https://support.syncfusion.com/kb/article/12156/angular-grid-version-compatibility) ## Other supported frameworks The Data Grid is available for the Blazor, React, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [Blazor Data Grid](https://www.syncfusion.com/blazor-components/blazor-datagrid) - [React Data Grid](https://www.syncfusion.com/react-components/react-data-grid) - [JavaScript Data Grid](https://www.syncfusion.com/javascript-ui-controls/js-data-grid) - [Vue Grid](https://www.syncfusion.com/vue-components/vue-grid) ## Supported browsers The Angular Data Grid works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Features and bugs](https://www.syncfusion.com/feedback/angular?control=datagrid) [How to Update Data Without Rerendering an Entire Grid in Angular](https://www.syncfusion.com/blogs/post/how-to-update-data-without-rerendering-an-entire-grid-in-angular) [How to Load a Million+ Records in Less Than a Second in Syncfusion Angular Data Grid](https://www.syncfusion.com/blogs/post/how-to-load-a-million-records-in-less-than-a-second-in-syncfusion-angular-data-grid) [Efficiently Bind Data to the Angular Data Grid and Perform CRUD Operations Using GraphQL](https://www.syncfusion.com/blogs/post/efficiently-bind-data-to-the-angular-data-grid-and-perform-crud-operations-using-graphql) [Binding a Firebase Data Source to Data Grid Using AngularFire2](https://www.syncfusion.com/blogs/post/binding-a-firebase-data-source-to-grid-using-angularfire2) ##### Angular DateRangePicker | Range Picker | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-daterangepicker # Angular DateRangePicker - A Responsive Range Picker Component - An advanced daterangepicker component with highly customizable options. - A first Material-designed daterangepicker for all devices. - A rich feature set including spans of days, range restriction, predefined dates (like last 30 days), validation, and automatic formatting takes this component to the next level of usage. ## Overview The Angular DateRangePicker is a lightweight and mobile-friendly component that allows end users to select start and end date values as a range from a calendar pop-up or by entering values directly in the HTML input text box. ### Customizable date formats The Angular DateRangePicker component’s input value can be customized in addition to the default [culture-specific date format](https://ej2.syncfusion.com/angular/documentation/daterangepicker/globalization#date-format-customization). ### Preset range Define [preset ranges](https://ej2.syncfusion.com/angular/documentation/daterangepicker/customization#preset-ranges) (like last 30 days or last week) to set date ranges frequently used by the end users. ### Adapts to any resolution The Date Range Picker has a highly responsive layout and an optimized design for desktops, touch screens, and smart phones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Specific date restrictions [Restricts dates](https://ej2.syncfusion.com/angular/documentation/daterangepicker/range-selection#restrict-the-range-within-a-range) outside the min and max date ranges, allowing only valid dates to be entered. Users cannot enter or choose restricted dates. ### Attractive customizable themes Cutting edge design with 5+ built-in themes such as Fluent, Tailwind CSS, Bootstrap, Material, Fabric, and more. Utilize the [online Theme Studio tool](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) to customize themes of Date Range Picker easily. ### Globalization and localization [Enables users from different locales](https://ej2.syncfusion.com/angular/documentation/daterangepicker/globalization) to use the DateRangePicker by formatting dates, currency, and numbering to suit preferences. ## Angular DateRangePicker Code Example Easily get started with the Angular DateRangePicker using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular DateRangePicker Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/daterangepicker/default) that shows you how to render and configure a DateRangePicker in Angular. - html - ts "control-section" "control_wrapper" ViewEncapsulation default-style.css DefaultDateRangePickerComponent ## Multi-language Date Range Picker A multi-language Angular DateRangePicker allows changing the names of months, days, and the today button text to any supported language (globalization). The date format and first day of the week are set to a specific culture. - [Multi-language documentation](https://ej2.syncfusion.com/angular/documentation/daterangepicker/globalization) ## Date selection within a range Enter or select a value within a specific range of dates by defining the min and max properties. - [Example of date selection](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/daterangepicker/date-range) ## Date-range validation The Angular Date Range Picker allows display of date ranges. When the date value is out of this range, validation error is triggered. The invalid and out-of-date-range values are set in a disabled state to prevent users from entering them or selecting them. - [Date range validation documentation](https://ej2.syncfusion.com/angular/documentation/daterangepicker/how-to/custom-validation-using-form-validator) ## Customize DateRangePicker Control the appearance of the component. Customize the style based on your application’s look and feel. Also [change the format of the day](https://ej2.syncfusion.com/angular/documentation/daterangepicker/how-to/customize-the-daterangepicker-day-header) that to be displayed in header. - [Customization documentation](https://ej2.syncfusion.com/angular/documentation/daterangepicker/customization) ## Week numbers Week numbers offer a handy way to organize and refer to weeks within a year, making it easier to plan events, manage projects, or schedule activities. ## First day of week Customize which day of the week appears as the first day in the calendar view of the DateRangePicker. This is particularly useful for adapting the calendar to regional or cultural preferences, as different locales often start the week on different days. - [First day of week documentation](https://ej2.syncfusion.com/angular/documentation/daterangepicker/customization#first-day-of-week) ### Keyboard navigation The Angular DateRangePicker component ensures that every cell is accessible using the keyboard. Major features like sort, select, and edit can be performed using keyboard commands alone; no mouse interaction is required. This helps in creating highly accessible applications using this component. - [Keyboard navigation documentation](https://ej2.syncfusion.com/angular/documentation/daterangepicker/accessibility#keyboard-navigation) ### Screen reader The Angular DateRangePicker view has complete WAI-ARIA accessibility support. The DateRangePicker UI includes high-contrast visual elements that help visually impaired people to have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers. ### Right to left (RTL) Right-to-left rendering allows displaying the text and layout of the DateRangePicker from right to left. This improves the user experience and accessibility for RTL languages. - [RTL documentation](https://ej2.syncfusion.com/angular/documentation/daterangepicker/globalization#right-to-left) ## Angular version compatibility With continuous improvement in Angular versions, the Angular DateRangePicker is kept up to date to make it compatible with versions starting from 4 to the latest version. - [More details on Angular DateRangePicker version compatibility](https://support.syncfusion.com/kb/article/12248/angular-daterangepicker-version-compatibility?isInternalRefresh=False) ## Other supported frameworks The DateRangePicker is available for the Blazor, React, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [Blazor DateRangePicker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) - [React DateRangePicker](https://www.syncfusion.com/react-components/react-date-range-picker) - [JavaScript DateRangePicker](https://www.syncfusion.com/javascript-ui-controls/js-daterangepicker) - [Vue DateRangePicker](https://www.syncfusion.com/vue-components/vue-date-range-picker) ## Supported browsers The Angular Date Range Picker works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/daterangepicker/getting-started) ##### Angular DateTime Picker | Lightweight Material Design | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-datetime-picker # Angular DateTime Picker - A Highly Customizable Control - A user-friendly and advanced text input datetime picker. - Built-in validation, auto date and time format, range restriction and three different standard themes, including Material design. - Highly customizable interface. ## Overview Angular DateTime Picker or Angular Material DateTime Picker is a lightweight and mobile-friendly component that allows end users to enter or select date and time values from a pop-up calendar and drop-down time list. It provides month, year, and decade views for quick navigation to the desired date. ## Masked date-time input Allows users to enter valid dates and times in the correct format and avoid data input errors during data entry. - [Masked date and time](https://ej2.syncfusion.com/angular/documentation/datetimepicker/date-time-masking/) ## Custom date and time format Change the default culture’s specific date and time format in the text box to improve readability or enter the value properly. - [Date and time customization](https://ej2.syncfusion.com/angular/documentation/datetimepicker/customization/#day-and-time-cell-format) ## Date and time range You can restrict the DateTime Picker, so that only date and time values within a specific range can be entered or selected by specifying the min and max date time options. - [Angular Date Time Range documentation](https://ej2.syncfusion.com/angular/documentation/datetimepicker/date-time-range/) ## Disable dates Disable any date in the Angular DateTime Picker to show it as an inactive date. Easily prevent weekends and holidays from selection by disabling them in the pop-up calendar. - [Disable dates example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/datetimepicker/disabled) ## DateTime Picker in multiple languages Update the culture-specific datetime format and first day of the week, and translate the names of months, days, and today button text to any supported language with our globalization feature. - [DateTime Picker localization](https://ej2.syncfusion.com/angular/documentation/datetimepicker/globalization/) ## Date and time validation Allow only valid values to be entered in the Angular DateTime Picker component’s input by validating them with disabled, out-of-min, and out-of-max date-time. [Date and time validation](https://ej2.syncfusion.com/angular/documentation/datetimepicker/how-to/custom-validation-using-form-validator/) ## Custom DateTime Picker Apart from the standard built-in themes, Angular DateTime Picker allows complete control to customize its appearance to suit your application. - [Customization documentation in Angular DateTime Picker](https://ej2.syncfusion.com/angular/documentation/datetimepicker/customization/) ## Highlight weekends Highlight any date in a year or every weekend in a month as special days using custom styling. ## Change the first day of the week Auto-update the first day of the week based on the specified culture or change it based on your application. ## Week number in popup calendar Show the week number of the selected day in the pop-up calendar by enabling the week number option. ## Islamic DateTimePicker In addition to the Gregorian DateTimePicker, the Angular DateTimePicker component supports displaying the Islamic DateTimePicker (Hijri DateTimePicker). ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices) accessibility that allows the DateTime Picker to be accessed by screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices) best practices for implementing keyboard interaction. - Uses [WCAG 2.0](https://www.w3.org/TR/WCAG20/) based design for UI element visuals such as foreground color, background color, line spacing, text, and images - Supports right-to-left (RTL) direction for users working with right-to-left languages like Hebrew and Arabic. ## Responsive UI The Angular Date Time Picker provides a responsive mode that gives an adaptive UI appearance for mobile devices. ## Developer-friendly APIs You can control all UI elements and their behaviors according to the end user’s requirements using a rich set of developer-friendly APIs. ## Built-in themes The Angular DateTime Picker supports several built-in themes such as Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and High Contrast. Users can customize any one of these built-in themes or create new themes to achieve their own desired look and feel either by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio Application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Other supported frameworks DateTime Picker is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the different DateTime Picker platforms from the links below, - [Blazor DateTime Picker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) - [React DateTime Picker](https://www.syncfusion.com/react-components/react-datetime-picker) - [Vue DateTime Picker](https://www.syncfusion.com/vue-components/vue-datetimepicker) - [JavaScript DateTime Picker](https://www.syncfusion.com/javascript-ui-controls/js-datetime-picker) ## Angular version compatibility With continuous improvement in Angular versions, the Angular Date Time Picker is kept up to date to make it compatible with the latest version. ### Angular 11 - [Getting started with Angular 11 Date Time Picker](https://support.syncfusion.com/kb/article/10876/how-to-get-started-easily-with-syncfusion-angular-11-datetime-picker) - [Angular 11 Date Time Picker example](https://github.com/SyncfusionExamples/ej2-angular-11-datetime-picker) ## Angular DateTime Picker Code Example Easily get started with the Angular DateTime Picker using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular DateTime Picker Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/datetimepicker/default) that shows you how to render and configure a DateTime Picker in Angular. - html - ts "control-section" "control_wrapper" ViewEncapsulation default-style.css DefaultDateTimePickerComponent ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Dropdown List | Custom Select Filter | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-dropdown-list # Angular Dropdown List - Flexible Input Component - A quick replacement of the HTML select tags. - Built-in support for filtering, hierarchical data binding, grouping, and UI customization with templates. - Ability to create a cascading drop-down list that helps users populate data to the next level drop-down based on the selected value of the parent. ## Overview The Angular Dropdown List is a quick replacement of the HTML select tags. It has a rich appearance and allows users to select a single value that is non-editable from a list of predefined values. It has several out-of-the-box features, such as data binding, filtering, grouping, UI customization, accessibility, and preselected values. ## Data binding You can bind data from a variety of data sources in an array from primitive data, JSON data collections, or a remote data source using different kinds of adaptors such as OData, OData V4, URL, JSON, and Web API. The component uses the data manager to manage data and has customization options for data requests and processing. - [Dropdown List data binding example](https://ej2.syncfusion.com/angular/demos/#/material/drop-down-list/data-binding) - [Dropdown List data binding documentation](https://ej2.syncfusion.com/angular/documentation/drop-down-list/data-binding) ## Filtering and searching drop-down lists The Angular UI Dropdown List Component has built-in filtering support with a rich set of filtering configurations available to match all your application needs. Enable the filtering functionality to show the search input box in the drop-down pop-up list. - [Dropdown List filtering example](https://ej2.syncfusion.com/angular/demos/#/material/drop-down-list/filtering) ### Custom filtering The Angular Dropdown List Component filter queries can be customized. You can also use your own filter libraries to filter data like Fuzzy search. ### Diacritic sensitive search The Angular Dropdown List Component has built-in diacritic character sensitivity support. This behavior can be turned on or off. - [Diacritic search example](https://ej2.syncfusion.com/angular/demos/#/material/drop-down-list/diacritics-filtering) ### Filter settings The filtered search can be customized with case sensitivity, and you can set the number of characters required to make a filtered search. - [Filter setting documentation](https://ej2.syncfusion.com/angular/documentation/drop-down-list/filtering) ## UI customization with templates The appearance (style) of each item displayed in the selection pop-up list, header and footer of the selection pop-up list, and the drop-down input box (select box) in angular dropdown menu can be customized. - [Dropdown List template example](https://ej2.syncfusion.com/angular/demos/#/material/drop-down-list/template) ### Header template Design your own header for the pop-up list using a header template. - [Header template documentation](https://ej2.syncfusion.com/angular/documentation/drop-down-list/templates#header-template) ### Item template Define the custom appearance of each list item using an item template. - [Item template documentation](https://ej2.syncfusion.com/angular/documentation/drop-down-list/templates#item-template) ### Footer template Design your own custom footer for the pop-up list using a footer template. - [Footer template documentation](https://ej2.syncfusion.com/angular/documentation/drop-down-list/templates#footer-template) ### Value template Define a custom appearance for a selected value in the drop-down input box using a value template. - [Value template documentation](https://ej2.syncfusion.com/angular/documentation/drop-down-list/templates#value-template) ### Empty record template Configure the custom look of a pop-up list when no items are available to display in the filter search functionality. - [No record template documentation](https://ej2.syncfusion.com/angular/documentation/drop-down-list/templates#no-records-template) ### Drop-down icons Each list item of the pop-up list is configurable with a custom icon to improve readability and visualization. - [Dropdown List icons example](https://ej2.syncfusion.com/angular/demos/#/material/drop-down-list/grouping-icon) ## Cascading drop-down list Create a cascading drop-down list to help the user populate data to the next-level drop-downs based on the selected value of the parent Dropdown List. - [Cascading drop-down list documentation](https://ej2.syncfusion.com/angular/documentation/drop-down-list/how-to/cascading) ## Grouping with category Group the pop-up list items with the corresponding category, making it easy to pick an item quickly from the select drop-down and increase the visual experience of the user. - [Dropdown List grouping documentation](https://ej2.syncfusion.com/angular/documentation/drop-down-list/grouping) ## Angular form validations The Angular Dropdown List seamlessly supports angular template-driven forms and reactive forms. The two types of validation are, - Required validation - Maximum length validation - [Template-driven form example](https://ej2.syncfusion.com/angular/demos/#/material/drop-down-list/template-driven) - [Reactive form example](https://ej2.syncfusion.com/angular/demos/#/material/drop-down-list/reactive-form) ## Dropdown List pop-up dimension The width and height of the pop-up option list is customizable. - [Dropdown list pop-up dimension documentation](https://ej2.syncfusion.com/angular/documentation/drop-down-list/getting-started#configure-the-popup-list) ## Sortable list items You can display items in ascending or descending order in a pop-up select option list. - [Sortable list items documentation](https://ej2.syncfusion.com/angular/documentation/api/drop-down-list#sortorder) ## Drop-down floating label The Angular Dropdown List component placeholder can float like a martial design with impressive animation. - [Dropdown List floating label documentation](https://ej2.syncfusion.com/angular/documentation/api/drop-down-list#floatlabeltype) ## Responsive drop-down list The component provides a responsive mode that gives an adaptive, redesigned UI appearance to mobile devices and is at ease with touch actions. ## Localization All the static texts in the user interfaces of the Angular Dropdown List can be localized to any desired language. - [Localization documentation](https://ej2.syncfusion.com/angular/documentation/drop-down-list/localization) ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#combobox) accessibility that makes a list view accessible to on-screen readers and assistive devices. - Follows [WAI-ARIA best practices](https://www.w3.org/WAI/ARIA/apg/#combobox) for implementing keyboard interaction. - Designed with UI element visuals such as foreground color, background color, line spacing, text, and images based on the [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standard. - Supports right-to-left (RTL) direction for users working in right-to-left languages like Hebrew, Arabic, or Farsi. - [Dropdown List keyboard shortcut documentation](https://ej2.syncfusion.com/angular/documentation/drop-down-list/accessibility#keyboard-interaction) ## Developer-friendly APIs Developers can customize all UI elements and component their behaviors according to the end user’s requirement using the component’s rich set of client-side APIs. - [Dropdown List APIs documentation](https://ej2.syncfusion.com/angular/documentation/api/drop-down-list/#properties) ## Angular version compatibility With continuous improvement in Angular versions, the Angular Dropdown List is kept up to date to make it compatible with the latest version. ### Angular 11 - [Getting started with Angular 11 Dropdown List](https://support.syncfusion.com/kb/article/11082/how-to-get-started-easily-with-syncfusion-angular-11-dropdown-list) - [Angular 11 Dropdown List example](https://github.com/SyncfusionExamples/ej2-angular-11-dropdown-list) ## Other supported frameworks Dropdown List is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the different Dropdown List platforms from the links below, - [Blazor Dropdown List](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) - [React Dropdown List](https://www.syncfusion.com/react-components/react-dropdown-list) - [Vue Dropdown List](https://www.syncfusion.com/vue-components/vue-dropdown-list) - [JavaScript Dropdown List](https://www.syncfusion.com/javascript-ui-controls/js-dropdown-list) ## Angular DropDownList Code Example Easily get started with the Angular DropDownList using a few simple lines of TS codes as demonstrated below. Also explore our [Angular DropDownList Example](https://ej2.syncfusion.com/angular/demos/#/material/drop-down-list/default) that shows you how to render and configure a DropDownList in Angular. - html - ts // specifies the template string for the DropDownList component /ejs-dropdownlist> // defined the array of data ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Dropdown Menu Component | Submenu | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-dropdown-menu # Angular Dropdown Menu - Multilevel Submenu Component - Built-in support for Success, Warning, Info, and Danger button styles. - Automatic collision detection and handling with pop-up menu flip-and-fit. - Quick configuration for popup menu item customization. ## Overview The Angular Dropdown Menu is a graphical user interface component that lets users choose from a list of actions that can be triggered. It has built-in support for icons and their positioning, various sizes, separators, RTL, and UI customization. ## Dropdown button size You can make use of different dropdown button sizes (default and small). ## Menu items with icons Users tend to perceive visual information better than text. The Angular Dropdown Menu has built-in options to include an icon to the left or above the text, or provide an icon-only button. - [Dropdown Menu items with icons documentation](https://ej2.syncfusion.com/angular/documentation/drop-down-button/popup-items#icons) ## Popup menu The popup menu is a toggleable container that holds a list of action items or custom content that will open or close when the button is clicked. You can customize all the items in a dropdown menu. - [Popup menu documentation](https://ej2.syncfusion.com/angular/documentation/drop-down-button/popup-items) ## Menu divider and separator You can use a horizontal line separator to represent similar action items as a group within the list of available items. - [Dropdown Menu items with divider documentation](https://ej2.syncfusion.com/angular/documentation/drop-down-button/popup-items#separator) ## Icon-only Dropdown Button You can make use of the icon-only Dropdown Button without button text. - [Icon-only dropdown button documentation](https://ej2.syncfusion.com/angular/documentation/drop-down-button/icons/) ## Dropdown Menu position Customize position values to display the Angular Dropdown Menu above, to the right, or to the left of the dropdown button. - [Dropdown Menu open upward position documentation](https://ej2.syncfusion.com/angular/documentation/drop-down-button/how-to/position-popup-open) ## UI Customization You can customize the dropdown button size, appearance, and feel. The dropdown menu popup element is completely customizable. - [Dropdown Menu popup customization documentation](https://ej2.syncfusion.com/angular/documentation/drop-down-button/popup-items#popup-templating) ### Dropdown Button without arrow icon You can configure a dropdown to open the popup menu without the arrow icon. - [Dropdown button without arrow documentation](https://ej2.syncfusion.com/angular/documentation/drop-down-button/how-to/hide-dropdown-arrow) ### Popup menu with multilevel submenu You can configure context menu component to add submenu items in Angular Dropdown Menu. ## Other supported frameworks Dropdown Menu is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the different Dropdown Menu platforms from the links below, - [Blazor Dropdown Menu](https://www.syncfusion.com/blazor-components/blazor-dropdown-menu) - [React Dropdown Menu](https://www.syncfusion.com/react-components/react-dropdown-menu) - [Vue Dropdown Menu](https://www.syncfusion.com/vue-components/vue-dropdown-menu) - [JavaScript Dropdown Menu](https://www.syncfusion.com/javascript-ui-controls/js-dropdown-menu) ## Angular version compatibility With continuous improvement in Angular versions, the Angular Dropdown Menu is kept up to date to make it compatible with the latest version. ### Angular 11 - [Getting started with Angular 11 Dropdown Menu](https://support.syncfusion.com/kb/article/10998/how-to-get-started-easily-with-syncfusion-angular-11-dropdown-menu) - [Angular 11 Dropdown Menu example](https://github.com/SyncfusionExamples/ej2-angular-11-dropdown-menu) ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility to work with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing keyboard interaction. - Follows [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards in the design of UI element visuals such as foreground color, background color, line spacing, text and images. - Supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian. ## Developer-friendly APIs In Dropdown Menu, you have control over all the UI elements and their behaviors. It provides the best user experience to users through a rich set of developer-friendly APIs. - [Dropdown Menu API reference](https://ej2.syncfusion.com/angular/documentation/api/drop-down-button/) ## Angular Dropdown Menu Code Example Easily get started with the Angular Dropdown Menu using a few simple lines of TS codes as demonstrated below. Also explore our [Angular Dropdown Menu Example](https://ej2.syncfusion.com/angular/demos/#/material/button/dropdown-button) that shows you how to render and configure a Dropdown Menu in Angular. - html - ts "control-section" "dropdownbutton-section" "dropdownbutton-control" "col-xs-12 col-sm-12 col-lg-6 col-md-6" ejs-dropdownbutton "e-ddb-icons e-profile" ViewEncapsulation @syncfusion/ej2-angular-splitbuttons /** * DropDownButton Controller */ dropdown-button.html dropdown-button.css DropDownButtonController //DropDownButton items definition e-ddb-icons e-dashboard e-ddb-icons e-notifications e-ddb-icons e-settings e-ddb-icons e-logout ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular File Upload | Upload Multiple Files | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-file-upload # Angular File Upload - Input File Upload Control with Progress Bar - Improved HTML5 file upload with a progress bar and flexible UI file list. - Multiple-file upload with form support, drag and drop, progress bar, folder upload, and more. - Upload large files with pause, resume, retry, and cancel options using chunking. ## Overview Angular File Upload or Material File Upload is a component for uploading one or multiple files, images, documents, audio, video, and other files to a server. It is an improved version of the HTML5 upload component () with a rich set of features that include multiple file selection, progress bars, auto-uploading, drag and drop, folder (directory) uploading, file validation, and more. ### Multiple-file upload Select [multiple files and upload](https://ej2.syncfusion.com/angular/documentation/uploader/async#multiple-file-upload) them to a server at the same time. This is useful for uploading images to a gallery and for file-sharing applications. ### Drag and drop Upload multiple files by simply [dragging them from the file explorer to the drop area](https://ej2.syncfusion.com/angular/documentation/uploader/file-source) (drop zone), which is a more user-friendly way to select and upload multiple files. ### Folder upload [Accepts a folder](https://ej2.syncfusion.com/angular/documentation/uploader/file-source#directory-upload) (directory) as a file source for uploading all the files (including subfolders) of the selected folder. ### AJAX file uploader Using the AJAX library, the Angular File Upload component easily [uploads files in asynchronous mode](https://ej2.syncfusion.com/angular/documentation/uploader/async). ### Utilize chunk upload for large files Manage upload of [large file uploads efficiently using chunk upload](https://ej2.syncfusion.com/angular/documentation/uploader/chunk-upload) that slices a large file into smaller chunks and uploads to the server in a sequential order asynchronously. ### Create your own template designs Allows users to create a custom UI in the Angular File Upload based on their application need using a [wide range of template options](https://ej2.syncfusion.com/angular/documentation/uploader/template). ### Attractive customizable themes Cutting edge design with 5+ built-in themes such as Fluent, Tailwind CSS, Bootstrap, Material, Fabric, and more. Utilize the [online Theme Studio tool](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) to customize themes of File Upload easily. ### Globalization and localization [Enables users from different locales](https://ej2.syncfusion.com/angular/documentation/uploader/localization) to use the File Upload by formatting dates, currency, and numbering to suit their preferences. ## Angular File Upload Code Example Easily get started with the Angular File Upload using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular File Upload Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/uploader/default) that shows you how to upload files in Angular. - html - ts "control-section" "control_wrapper" 'defaultfileupload' [asyncSettings]= 'onFileRemove($event)' > ViewEncapsulation @syncfusion/ej2-base UploaderComponent RemovingEventArgs @syncfusion/ej2-angular-inputs @syncfusion/ej2-popups app.component.html app.component.css https://ej2.syncfusion.com/services/api/uploadbox/Save https://ej2.syncfusion.com/services/api/uploadbox/Remove getElementsByClassName ## Resumable upload A built-in feature is available to pause, resume, retry, and cancel a file upload in Angular. This helps users upload high-resolution images, videos,and other large files safely. Additionally, it provides an option to pause and resume automatically based on server connection. - [Resumable upload documentation](https://ej2.syncfusion.com/angular/documentation/uploader/chunk-upload#resumable-upload) ## Upload images with previews The Angular File Upload component allows you to upload images and resize images, show an image preview or thumbnail, etc. before uploading them. - [Image preview example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/uploader/image-preview) ## Custom file upload button The action buttons of the Angular File Upload component are completely customizable, including its file list, which helps create your own design for the File Upload UI. - [Custom file upload button documentation](https://ej2.syncfusion.com/angular/documentation/uploader/how-to/customize-button-with-html-element) ## File types (file extensions) Upload various file types and limit the file types from client-side, which is mandatory before uploading a file to the web application. - [File type documentation](https://ej2.syncfusion.com/angular/documentation/uploader/validation#file-type) ## File validation (filter) Add validation to check file size limits with minimum and maximum ranges, number of files required, total size, and MIME type before uploading a file to a server. - [File validation example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/uploader/file-validation) - [File validation documentation](https://ej2.syncfusion.com/angular/documentation/uploader/validation) ## Paste image to upload The Angular File Upload component processes images from the clipboard. Copy and paste the images to be uploaded to a server. - [Paste upload documentation](https://ej2.syncfusion.com/angular/documentation/uploader/file-source#paste-to-upload) ## Delete uploaded files The Angular File Upload component provides a simple interface to delete the wrongly uploaded files from a server. - [Delete uploaded file documentation](https://ej2.syncfusion.com/angular/documentation/uploader/async#remove-action) ## Preload uploaded files Users can configure previously uploaded files from the server. This is useful to view and remove files from the server. - [Preload files example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/uploader/preload-files) - [Preload files documentation](https://ej2.syncfusion.com/angular/documentation/uploader/async#preload-files) ## Auto-upload Initiate an automatic upload to upload files immediately upon adding them to the upload queue. - [Auto-upload documentation](https://ej2.syncfusion.com/angular/documentation/uploader/async#auto-upload) ## Progress bar The File Upload component in Angular displays a built-in progress bar (progress indicator) with the progress percentage during each file upload. The Uploader Progressbar is completely customizable. - [Custom progress bar documentation](https://ej2.syncfusion.com/angular/documentation/uploader/how-to/customize-progressbar) ## Right-to-left (RTL) The Angular File Upload component supports right-to-left rendering, which improves the user experience and accessibility for those who use RTL languages. ## Additional parameters The Angular File Upload component allows you to pass additional parameters along with an upload request as an HTTP header or custom parameters. - [Additional HTTP header documentation](https://ej2.syncfusion.com/angular/documentation/uploader/async#adding-additional-http-headers-with-upload-action) - [Custom form data documentation](https://ej2.syncfusion.com/angular/documentation/uploader/how-to/add-additional-data-on-upload) ## Angular standard forms The Angular File Uploader seamlessly works with Angular standard template-driven forms, reactive forms, and native HTML forms. - [Template-driven forms example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/uploader/file-upload-with-template-driven-forms) - [Reactive forms example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/uploader/file-upload-with-reactive-forms) ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility, which allows the Angular File Upload component to be accessed by on-screen readers and assistive devices. - Follows the [WAI-ARIA Best Practices](https://www.w3.org/WAI/ARIA/apg/) for implementing keyboard interaction. - The UI element visuals, such as foreground color, background color, line spacing, text, and images, were designed based on the [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standard. ## Touch support The Angular File Upload component provides the best user experience across phone, tablet, and desktop form factors. ## Angular version compatibility With continuous improvement in Angular versions, the Angular File Upload is kept up to date to make it compatible with versions starting from 7 to the latest version. - [More details on Angular File Upload version compatibility](https://support.syncfusion.com/kb/article/12088/angular-file-upload-version-compatibility) ## Other supported frameworks The File Upload is available for the Blazor, React, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) - [React File Upload](https://www.syncfusion.com/react-components/react-file-upload) - [JavaScript File Upload](https://www.syncfusion.com/javascript-ui-controls/js-file-upload) - [Vue File Upload](https://www.syncfusion.com/vue-components/vue-file-upload) ## Supported browsers The Angular File Upload works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/uploader/getting-started) ##### Angular Input Mask | Masked Text Box Component | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-input-mask # Angular Input Mask - Effective, Custom Masking Component - Allows users to enter only valid data through the input mask. - Supports custom mask formats with regular expressions (regex) to validate application-specific data. - Allows the validation of specific data formats such as phone numbers and date masks with different mask combinations. ## Overview The Angular Input Mask or masked text box is a component that provides an easy and reliable way to collect user input based on a standard mask. It allows you to capture phone numbers, date values, credit card numbers, and other standard format values. ## Standard mask The Angular Input Mask component supports the standard masks listed on [MSDN](https://docs.microsoft.com/en-us/dotnet/api/system.windows.forms.maskedtextbox.mask). - [Standard mask documentation](https://ej2.syncfusion.com/angular/documentation/maskedtextbox/mask-configuration#standard-mask-elements) ## Custom mask Other than the standard mask elements, any custom character also can be a mask element by defining rules for it. - [Custom mask documentation](https://ej2.syncfusion.com/angular/documentation/maskedtextbox/mask-configuration#custom-characters) ## Regular expression Angular Input Mask elements can be regular expressions, which is useful when defining user-specific data such as IP addresses. - [Regular expression mask documentation](https://ej2.syncfusion.com/angular/documentation/maskedtextbox/mask-configuration#regular-expression) ## Mask input combinations The Angular Input Mask component allows different mask combinations based on the standard and custom masks. So, you can form different mask formats based on your application scenarios. - [Number, string, and date mask example](https://ej2.syncfusion.com/angular/demos/#/material/maskedtextbox/default) ### Number mask From the standard mask elements, form a number mask for capturing any finite-length number to get inputs such as phone numbers and credit card numbers. ### String mask In the case of a country code or product key input, where the input string requires uppercase characters, the string mask format will enforce this. ### Date mask The Angular Input Mask can form any date format to get similarly formatted date values. This is helpful in getting culture-specific date values by defining the corresponding date mask. ## Form support and validation As a form component, the captured value of a masked textbox component proceeds in the raw format when submitting the form. You can also integrate the form validator plugin to perform any custom validation. ## Adornments The Input Mask control supports custom adornments using the prependTemplate and appendTemplate properties, which allow users to render custom elements like icons, buttons, or dropdowns to enhance user interaction with prefix and suffix elements. - [Adornments example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/maskedtextbox/adornments) - [Adornments documentation](https://ej2.syncfusion.com/angular/documentation/maskedtextbox/adornments) ## HTML5 input type support You can create a masked text box component from the HTML5 [tel](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel) input. It opens the numeric keypad on mobile devices, which is useful for obtaining phone numbers or any other number-only inputs. ## Other supported frameworks The Input Mask is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the different, platform-specific features through the following links: - [Blazor Input Mask](https://www.syncfusion.com/blazor-components/blazor-input-mask) - [React Input Mask](https://www.syncfusion.com/react-components/react-input-mask) - [Vue Input Mask](https://www.syncfusion.com/vue-components/vue-input-mask) - [JavaScript Input Mask](https://www.syncfusion.com/javascript-ui-controls/js-input-mask) ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility to work with screen readers and assistive devices. - Follows [WAI-ARIA best practices](https://www.w3.org/WAI/ARIA/apg/) for implementing keyboard interaction. - Offers UI element visuals such as foreground color, background color, line spacing, text, and images designed based on the [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards. ## Developer-friendly APIs Developers can customize all UI elements and control behaviors of the Angular Input Mask according to the end user’s requirements using its rich set of client-side APIs. ## Angular Input Mask code example Easily get started with the Angular Input Mask by using a few simple lines of TS code, as demonstrated below. Also explore our [Angular Input Mask example](https://ej2.syncfusion.com/angular/demos/#/material/maskedtextbox/default), which you how to render and configure the component. - html - ts // sets mask format to the MaskedTextBox /ejs-maskedtextbox ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Numeric Textbox Component | Currency Textbox | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-numeric-textbox # Angular Numeric Textbox for Only Numbers - A great option for HTML5 input-type numbers with a modern look. - Input can be automatically formatted as percentages or currency. - Input values are handled with a min–max range validation as well as decimal validation. ## Overview The Angular Numeric Textbox component is a quick replacement of the number-type HTML input element. It’s used to get number inputs from users. It has several out-of-the-box features such as number format support, precision control, and spin buttons. ## Number formats Format a numeric text box with one of the number formats listed on [MSDN](https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-numeric-format-strings) or [custom](https://docs.microsoft.com/en-us/dotnet/standard/base-types/custom-numeric-format-strings) numeric format strings. Through number formatting, you can achieve percentage and currency text box behavior. - [Standard formats documentation](https://ej2.syncfusion.com/angular/documentation/numerictextbox/formats/#standard-formats) ## Custom formats The Numeric Textbox supports any custom format. A custom format allows you to place any symbol or text as a prefix or suffix to the input number. - [Custom formats documentation](https://ej2.syncfusion.com/angular/documentation/numerictextbox/formats/#custom-formats) ## Number precision You can control the precision of the input number value and limit the precision to any length while the value is being typed. - [Number precision documentation](https://ej2.syncfusion.com/angular/documentation/numerictextbox/getting-started/#precision-of-numbers) ## Spin buttons Spin buttons provide a flexible option for interacting with the Numeric Textbox. You can increase or decrease the input value easily. You can customize the appearance of the spin buttons and hide them from the component if they are not needed. - [How to customize the spin button icons](https://ej2.syncfusion.com/angular/documentation/numerictextbox/how-to/customize-the-ui-appearance-of-the-control/#customize-spin-up-and-down-icons) ## Incremental steps Increment or decrement a value based on a predefined step value. This can help users input large values. ## Form support and validation The Numeric Textbox has min–max range validation support. This prevents your users from entering out-of-range values. You can integrate the form validator plugin to perform any custom validation. ## HTML5 input type support The Numeric Textbox component can be extended from the HTML5 [tel](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel) input. This opens the numeric keypad on mobile devices, which makes it easy to enter numeric values. ## Globalization The Angular Numeric Textbox component comes with built-in globalization support. It adapts to supported cultures through simple settings. - [Globalization documentation](https://ej2.syncfusion.com/angular/documentation/numerictextbox/globalization/) ## Adornments The Numeric Textbox control supports custom adornments using the prependTemplate and appendTemplate properties, which allow users to render custom elements like icons, buttons, or dropdowns to enhance user interaction with prefix and suffix elements. - [Adornments example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/numerictextbox/adornments) - [Adornments documentation](https://ej2.syncfusion.com/angular/documentation/numerictextbox/adornments) ## Right-to-left (RTL) The component supports right-to-left (RTL) rendering for users working in right-to-left languages like Hebrew, Arabic, or Persian. ## Other supported frameworks The Numeric Textbox is also available for Blazor, React, Vue, and JavaScript frameworks. Check out the different, platform-specific features through the following links: - [Blazor Numeric Textbox](https://www.syncfusion.com/blazor-components/blazor-numeric-textbox) - [React Numeric Textbox](https://www.syncfusion.com/react-components/react-numeric-textbox) - [Vue Numeric Textbox](https://www.syncfusion.com/vue-components/vue-numeric-textbox) - [JavaScript Numeric Textbox](https://www.syncfusion.com/javascript-ui-controls/js-numeric-textbox) ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#spinbutton) accessibility to work with screen readers and assistive devices. - Follows [WAI-ARIA best practices](https://www.w3.org/TR/wai-aria-practices/#spinbutton) for implementing keyboard interaction. - Follows the [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standard in the design of the UI element visuals such as foreground color, background color, line spacing, text, and images. ## Developer-friendly APIs The Angular Numeric Textbox component has a rich set of developer-friendly APIs. You can handle all UI elements and behaviors of the control to provide the best experience to your end users. - [Numeric Textbox API documentation](https://ej2.syncfusion.com/angular/documentation/api/numerictextbox/) ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Dialog Component | Customizable Modal Dialog | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-modal-dialog # Angular Dialog - Feature-rich Modal Dialog Component - Highly customizable and configurable user interface (UI) to make a dialog box. - Display critical information, errors, warnings, confirmations, alerts, questions, and message boxes. - Use built-in features such as action buttons, drag-and-drop, positioning, animations, and themes. ## Overview The Angular Dialog is a useful user interface (UI) component for informing users about critical information, errors, warnings, and questions, as well as confirming decisions and collecting input from users. The component has a rich set of built-in features such as action buttons, positioning, animations, dragging, resizing, templating, and more with mobile dialog support. The dialog provides two different types: modal dialogs and non-modal dialogs (modeless) based on interactions. ## Modal dialogs (modal window) The Angular modal dialog component comes with two different types of dialogs, modal and non-modal (modeless): - Modal dialogs force users to interact with them before continuing. So, it is used to show important interaction information and non-continuous process information (for example, a sign-up or login form). - Non-modal dialogs allow users to interact outside the dialog box even if it is in an active state, which is suitable for frequent and nonblocking dialogs (for example, find-and-replace dialogs). - [Modal dialog example](https://ej2.syncfusion.com/angular/demos/#/material/dialog/modal-dialog) - [Modal dialog documentation](https://ej2.syncfusion.com/angular/documentation/dialog/getting-started#modal-dialog) ## Dialog UI elements The Angular dialog component provides necessary UI elements (header (title), body (content), and action area/footer) for better customization. - [Dialog templating example](https://ej2.syncfusion.com/angular/demos/#/material/dialog/template) - [Dialog templating documentation](https://ej2.syncfusion.com/angular/documentation/dialog/template) ## Action buttons The Angular dialog component provides built-in support to perform actions through buttons, which define necessary callback functions to handle user input. - [Action buttons documentation](https://ej2.syncfusion.com/angular/documentation/api/dialog/#buttons) ## Positioning Users can position a dialog wherever they want in a page. It is easy to configure this through built-in positions or any custom axis value (for example, top left, bottom right, top right, bottom left, 100 75, etc.). - [Positioning example](https://ej2.syncfusion.com/angular/demos/#/material/dialog/position) - [Positioning documentation](https://ej2.syncfusion.com/angular/documentation/dialog/getting-started#positioning) ## Draggable The Angular modal dialog can be moved anywhere in a page by dragging its header, which is performed by using the Draggable library. - [Draggable example](https://ej2.syncfusion.com/angular/demos/#/material/dialog/draggable) - [Draggable documentation](https://ej2.syncfusion.com/angular/documentation/dialog/getting-started#draggable) ## Overlays Angular Modal dialogs create overlays on open modal windows that provide options for a user to control the closing behavior of a dialog while interacting with it. ## Additional dialogs Users can launch multiple dialogs simultaneously or one above the other based on their z-index (z-depth) to make additional dialogs (nested modal dialogs). - [Additional dialog example](https://ej2.syncfusion.com/angular/demos/#/material/dialog/multiple-dialogs) ## Animation A variety of smooth, built-in animations are available to configure for the opening and closing of modal dialogs. They perform based on CSS3 animation from the Animation library. - [Animation dialog example](https://ej2.syncfusion.com/angular/demos/#/material/dialog/animation) - [Animation dialog documentation](https://ej2.syncfusion.com/angular/documentation/dialog/animation) ## Resizable The Angular modal dialog can be resized from any of the edges or borders of the dialog within the target container by using its handle (grip) or hovering on it. - [Resizable dialog example](https://ej2.syncfusion.com/angular/demos/#/material/dialog/resizable) - [Resizable dialog documentation](https://ej2.syncfusion.com/angular/documentation/dialog/resize) ## Close options The modal dialog can be closed by clicking on a close icon, with an overlay click, or by pressing the ESC key. Users can restrict the closing behavior of a dialog based on its callback function parameters. - [Closing options documentation](https://ej2.syncfusion.com/angular/documentation/dialog/how-to/close-dialog-while-click-on-outside-of-dialog) ## Remote content via AJAX Users can directly load content from a remote source (for example, an external webpage) to a dialog using the AJAX library. - [Remote content example](https://ej2.syncfusion.com/angular/demos/#/material/dialog/dialog-contents-via-ajax) - [Remote content documentation](https://ej2.syncfusion.com/angular/documentation/dialog/how-to/load-dialog-content-using-ajax) ## Alert and confirmation dialogs Create Angular alerts and confirmation dialogs by using built-in functions. - [Alerts and confirmations documentation](https://ej2.syncfusion.com/angular/documentation/dialog/render-a-dialog-using-utility-functions) ## Right-to-left (RTL) The Angular dialog component supports right-to-left (RTL) rendering. Users can change the text direction and layout of the dialog component from right to left. This improves the user experience and accessibility for those who use RTL languages. ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/) accessibility, which helps dialogs be accessed by on-screen readers and assistive devices. - Follows [WAI-ARIA Best Practices](https://www.w3.org/TR/wai-aria-practices/) for implementing keyboard interaction. - The UI element visuals such as foreground color, background color, line spacing, text, and images were designed based on the [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standard.s ## Responsiveness The Angular dialog component is highly configurable to make mobile dialogs and better user experiences across phone, tablet, and desktop form factors. - [Example of dialog with full screen](https://ej2.syncfusion.com/angular/documentation/dialog/how-to/show-dialog-with-full-screen) ## Themes The Angular Dialog component has several built-in themes such as Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and High Contrast. Users can customize any one of these built-in themes or create new themes to achieve their own desired look and feel either by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio application](https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio) ## Developer-friendly APIs Developers can control the appearance and behaviors of a dialog, including its positioning, content, and animation, using a rich set of APIs. - [Angular dialog API reference](https://ej2.syncfusion.com/angular/documentation/api/dialog/) ## Angular Dialog Code Example Easily get started with Angular Dialog using a few simple lines of HTML and TS code, as demonstrated below. Also explore our [Angular Dialog Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/dialog/default) that shows you how to render the Dialog in Angular. - html - ts "control-section" animationSettings ViewEncapsulation ButtonPropsModel '@syncfusion/ej2-angular-popups' AnimationSettingsModel '@syncfusion/ej2-splitbuttons' /** * Default Dialog Component */ 'control-content' BasicDialogComponent 'About SYNCFUSION Succinctly Series' '.control-section' // On Dialog close, 'Open' Button will be shown // On Dialog open, 'Open' Button will be hidden 'https://www.syncfusion.com/company/about-us' ## Other supported frameworks Dialog is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the different Dialog platforms from the links below, - [Blazor Dialog](https://www.syncfusion.com/blazor-components/blazor-modal-dialog) - [React Dialog](https://www.syncfusion.com/react-components/react-modal-dialog) - [Vue Dialog](https://www.syncfusion.com/vue-components/vue-modal-dialog) - [JavaScript Dialog](https://www.syncfusion.com/javascript-ui-controls/js-modal-dialog) [I’d love to read it now.](https://ej2.syncfusion.com/angular/documentation/dialog/getting-started) ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Multiselect DropDown - Customizable Templates | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-multiselect-dropdown # Angular MultiSelect Dropdown - Search with Checkbox Support - Replace the HTML select element with the Angular MultiSelect Dropdown to select multiple items. - Built-in checkbox support with a Select All option for easy interactions. - Built-in support for filtering, hierarchical data binding, grouping, tagging, selection limits, and UI customization with templates. ## Overview The Angular MultiSelect Dropdown is used as a replacement for the HTML select tag for selecting multiple values. This is a textbox component that allows users to type or select multiple values from a list of predefined options. It has several out-of-the-box features such as data binding, filtering, grouping, tagging with custom values, and checkbox mode. ## Data binding You can bind data from a variety of data sources like an array of primitive data, JSON data collections, or a remote data source using various kinds of adaptors such as OData, OData V4, URL, JSON, and Web API. JavaScript data manager is used to manage data, and has customization options for data request and processing. - [Angular Material MultiSelect data binding example](https://ej2.syncfusion.com/angular/demos/#/material/multi-select/data-binding) - [Angular Material MultiSelect data binding documentation](https://ej2.syncfusion.com/angular/documentation/multi-select/data-binding) ## Render modes Various render modes are available to visualize selected items. - [MultiSelect render mode example](https://ej2.syncfusion.com/angular/demos/#/material/multi-select/default) ### Chip mode (box mode) Selected items are displayed as chips (tags) in the MultiSelect input box. ### Delimiter mode Selected items are displayed with a delimiter character in the MultiSelect input box. ### Hybrid mode (default mode) By default, the selected items are displayed as chips when the component is focused. When not in focus, they are displayed with a delimiter character. ## Filtering and searching The Angular MultiSelect Dropdown has built-in filtering support with a rich set of filtering configurations available. - [Angular Material MultiSelect Dropdown filtering example](https://ej2.syncfusion.com/angular/demos/#/material/multi-select/filtering) ### Custom filtering The Angular MultiSelect Dropdown filter query can be customized. You can also use your own filter libraries to filter data, like a fuzzy search. ### Diacritic sensitive search The Angular MultiSelect Dropdown component has built-in diacritic character sensitivity support. This behavior can be turned on or off. - [Diacritic search example](https://ej2.syncfusion.com/angular/demos/#/material/multi-select/diacritics-filtering) ### Filter settings Users can customize the filter search to be case sensitive. The number of characters needed to make the filter search can also be set. - [Filter setting documentation](https://ej2.syncfusion.com/angular/documentation/multi-select/filtering) ## UI customization with templates Use templates to change the appearance of the selection pop-up list items, the header and footer of the selection pop-up list, and the selected values of the Angular Multi Select Dropdown input box. - [MultiSelect Dropdown template example](https://ej2.syncfusion.com/angular/demos/#/material/multi-select/template) ### Header template Design your own header for a pop-up list using a header template. - [Header template documentation](https://ej2.syncfusion.com/angular/documentation/multi-select/templates#header-template) ### Item template Define the custom appearance of each list item using an item template. - [Item template documentation](https://ej2.syncfusion.com/angular/documentation/multi-select/templates#item-template) ### Footer template Design your own custom footer for the pop-up list using the footer template. - [Footer template documentation](https://ej2.syncfusion.com/angular/documentation/multi-select/templates#footer-template) ### Value template Define the custom appearance of selected values using the value template. - [Value template documentation](https://ej2.syncfusion.com/angular/documentation/multi-select/templates#value-template) ### Empty record template Configure the custom look of a pop-up list when no items are available to be displayed in the filter search functionality. - [Empty record template documentation](https://ej2.syncfusion.com/angular/documentation/multi-select/templates#no-records-template) ### MultiSelect items icons Configure each list item of a pop-up list with a custom icon or image to improve readability and visualization. - [MultiSelect items icons documentation](https://ej2.syncfusion.com/angular/documentation/multi-select/how-to/icons-support#show-the-list-items-with-icons) ## MultiSelect Dropdown checkbox The Angular Multi Select Dropdown component has checkbox support. Enabling a checkbox on each item helps the user handle multiple selected values. - [Multi Select Dropdown with checkbox Angular example](https://ej2.syncfusion.com/angular/demos/#/material/multi-select/checkbox) - [MultiSelect Dropdown with checkbox documentation](https://ej2.syncfusion.com/angular/documentation/multi-select/checkbox) ## Selection limit Limit the number of items that can be selected in a drop-down. - [Selection limit example](https://ej2.syncfusion.com/angular/demos/#/material/multi-select/selection-limit) ## Chip customization You can customize the appearance of the selected chip (value) element on value selection action. - [Chip customization example](https://ej2.syncfusion.com/angular/demos/#/material/multi-select/chip-customization) ## Tagging custom value Tag the new values that are not present in the predefined list. - [MultiSelect tagging example](https://ej2.syncfusion.com/angular/demos/#/material/multi-select/custom-value) ## Grouping with category Group the popup list items with the corresponding category which makes it easy to pick the item quickly from the dropdown, and also enhance user experience. - [MultiSelect Dropdown grouping example](https://ej2.syncfusion.com/angular/demos/#/material/multi-select/grouping) ## Pop-up dimension The width and height of a pop-up option list are customizable. ## HTML form support The Angular Multi Select Dropdown is a form component that seamlessly supports HTML forms and handles values on form submission. ## Sortable list items You can display items in the ascending or descending order in a pop-up list. - [Sortable list items documentation](https://ej2.syncfusion.com/documentation/api/multi-select#sortorder) ## Responsive MultiSelect Dropdown A responsive mode gives an adaptive, redesigned UI appearance for mobile devices and recognizes touch gestures. ## Developer-friendly APIs Developers can customize all UI elements and control their behaviors using the component’s rich set of client-side APIs. - [Multiselect API](https://ej2.syncfusion.com/documentation/api/multi-select/#properties) ## Built-in themes The Angular MultiSelect component is shipped with several built-in themes such as Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and High Contrast. Customize any one of these built-in themes or create new themes by either simply overriding SASS variables or using our [Theme Studio](https://ej2.syncfusion.com/themestudio/?theme=material) application. ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#combobox) accessibility that makes the list view accessible to on-screen readers and assistive devices. - Follows [WAI-ARIA best practices](https://www.w3.org/TR/wai-aria-practices/#combobox) best practices for implementing keyboard interaction. - Follows [WCAG 2.0](https://www.w3.org/TR/WCAG20/#)standard in design for the UI element visuals such as foreground color, background color, line spacing, text, and images. - Supports right-to-left (RTL) direction for users working with languages like Hebrew, Arabic, or Persian. - [Keyboard shortcut documentation](https://ej2.syncfusion.com/angular/documentation/multi-select/accessibility#keyboard-interaction) ## Angular MultiSelect Code Example Easily get started with the Angular MultiSelect Dropdown using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular MultiSelect Example](https://ej2.syncfusion.com/angular/demos/#/material/multi-select/default) that shows you how to render and configure a MultiSelect in Angular. - html - ts "control-styles" // specifies the template string for the MultiSelect component `` ## Other supported frameworks MultiSelect Dropdown is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the different MultiSelect Dropdown platforms from the links below, - [Blazor MultiSelect Dropdown](https://www.syncfusion.com/blazor-components/blazor-multiselect-dropdown) - [React MultiSelect Dropdown](https://www.syncfusion.com/react-components/react-multiselect-dropdown) - [Vue MultiSelect Dropdown](https://www.syncfusion.com/vue-components/vue-multiselect-dropdown) - [JavaScript MultiSelect Dropdown](https://www.syncfusion.com/javascript-ui-controls/js-multiselect-dropdown) ## Angular version compatibility With continuous improvement in Angular versions, the Angular MultiSelect Dropdown is kept up to date to make it compatible with versions starting from 4 to the latest version. ### Angular 11 - [Getting started with Angular 11 Multi Select](https://support.syncfusion.com/kb/article/11079/how-to-get-started-easily-with-syncfusion-angular-11-multi-select) - [Angular 11 Multi Select example](https://github.com/SyncfusionExamples/ej2-angular-11-multiselect) ### Angular 7 - [Getting started with Angular 7 MultiSelect Dropdown](https://support.syncfusion.com/kb/article/8811/how-to-get-started-easily-with-syncfusion-angular-7-multiselect) - [Angular 7 MultiSelect Dropdown example](https://github.com/SyncfusionExamples/ej2-angular-7-multiselct-dropdown?utm_medium=listing&utm_source=github-examples) ### Angular 6 - [Getting started with Angular 6 MultiSelect Dropdown](https://support.syncfusion.com/kb/article/8816/how-to-get-started-easily-with-syncfusion-angular-6-multiselect) - [Angular 6 MultiSelect Dropdown example](https://github.com/SyncfusionExamples/ej2-angular-6-multiselct-dropdown?utm_medium=listing&utm_source=github-examples) ### Angular 5 - [Getting started with Angular 5 MultiSelect Dropdown](https://support.syncfusion.com/kb/article/8818/how-to-get-started-easily-with-syncfusion-angular-5-multiselect) - [Angular 5 MultiSelect Dropdown example](https://github.com/SyncfusionExamples/ej2-angular-5-multiselct-dropdown?utm_medium=listing&utm_source=github-examples) ### Angular 4 - [Getting started with Angular 4 MultiSelect Dropdown](https://support.syncfusion.com/kb/article/8817/how-to-get-started-easily-with-syncfusion-angular-4-multiselect) - [Angular 4 MultiSelect Dropdown example](https://github.com/SyncfusionExamples/ej2-angular-4-multiselct-dropdown?utm_medium=listing&utm_source=github-examples) ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Range Selector | Time-Series Selector | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-range-selector # Angular Range Selector Control - Filter Data for In-Depth Analysis - Quickly visualize high-level data and select a time-period with a modern interface to filter data for in-depth analysis. - Integrate seamlessly with Charts, DataGrid, ListView, etc. to show filtered data. - Responsive and adaptive to any mobile devices. ## Overview Angular Range Selector is an interface for selecting a small range from a larger collection. It is commonly used in financial dashboards to filter a date range for data that needs to be visualized. ## Angular Range Selector Code Example Easily get started with the Angular Range Selector using a few simple lines of ts code as demonstrated below. Also explore our [Angular Range Selector Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/range-navigator/default) that shows you how to render and configure the Range Selector in Angular. - ts ViewEncapsulation // specifies the template string for the RangeNavigator component `` ## Data types Plot any type of data in the range selector using different value types like numeric, date-time, and logarithmic. ## Chart types Plot data in the range selector with different chart types like line, area, and step line. ## Lightweight Skip the chart and show only the range for selecting data. This makes the range selector lightweight in mobile devices. - [Lightweight documentation](https://ej2.syncfusion.com/angular/documentation/range-navigator/lightweight) ## Scales Major and minor scales display the range with different intervals and are placed at multiple levels of the range selector. A date-time scale can also be configured to be shown in major and minor scales. - [Multilevel labels documentation](https://ej2.syncfusion.com/angular/documentation/range-navigator/labels#multilevel-labels) ## Period Selector Select data using predefined periods in the range selector and use the date picker to select a custom range. - [Period selector documentation](https://ej2.syncfusion.com/angular/documentation/range-navigator/period-selector) ## Binding selected data Bind selected data from the range selector to any other data visualization control using built-in events. ## Deferred scrolling Allows you to defer the selected range to be updated until the user stops dragging the scrolling thumbs. This provides a smooth scrolling experience. ## Range selection The range selector control provides the following three ways to select a range: - Select a range through labels. - Drag the left and right thumbs. - Drag the selected range to maintain the same delta. ## Customization All the elements of the range selector are highly customizable with built-in APIs. ### Labels Customize the size, color, font family, font attribute, and alignment of the labels using built-in APIs. - [Label customization documentation](https://ej2.syncfusion.com/angular/documentation/range-navigator/labels#labels-customization) ### Thumbs Customize the appearance of the left and right thumbs using built-in APIs. - [Thumb customization documentation](https://ej2.syncfusion.com/angular/documentation/range-navigator/customization#thumb) ### Gridlines Customize the color, stroke width, dash array, and visibility of the major and minor gridlines using built-in APIs. - [Gridlines customization documentation](https://ej2.syncfusion.com/angular/documentation/range-navigator/grid-tick#grid-line-customization) ## Tooltip Tooltips display the start and end values of a selected range, allowing users to easily select a required range. - [Tooltip documentation](https://ej2.syncfusion.com/angular/documentation/range-navigator/tool-tip) ## RTL The range selector supports right-to-left rendering and allows the series and scale direction to be displayed from the right to left. This improves the user experience and accessibility of RTL languages. ## Touch and Browser support The interactive range selector control also support touch interactions. ### Touch support All the features in range selector will work on touch devices with zero configuration. Use the touch features such as tooltip and thumb drag without any customization. ### Responsive You can view the range selector on various devices. It is also possible to hide chart for particular screen sizes by making a very minimal change. ### Cross browser support You can render range selector control in all the modern browsers. - [Cross browser compatibility documentation](https://ej2.syncfusion.com/angular/documentation/browser) ## Other supported frameworks The Range Selector is available for the Blazor, React, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [Blazor Range Selector](https://www.syncfusion.com/blazor-components/blazor-range-selector) - [React Range Selector](https://www.syncfusion.com/react-components/react-range-selector) - [JavaScript Range Selector](https://www.syncfusion.com/javascript-ui-controls/js-range-selector) - [Vue Range Selector](https://www.syncfusion.com/vue-components/vue-range-selector) ## Supported browsers The Angular Range Selector works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/range-navigator/getting-started) ##### Angular Smith Chart | Impedance chart | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-smith-chart # Angular Smith Chart - Analyze High-Frequency Circuit Data - Easily show the parameters of the transmission lines in high-frequency circuit applications. - Visualize the Smith chart by adding built-in features like legends, markers, tooltips, and data labels. - Print or export the Smith chart in PDF, SVG, PNG, and JPEG formats. ## Overview The Angular Smith Chart is a control for showing the parameters of transmission lines in high-frequency circuit applications. Its rich feature set includes features like legends, markers, tooltips, and data labels. ## Angular Smith Chart Code Example Easily get started with the Angular Smith Chart using a few simple lines of ts code example as demonstrated below. Also explore our [Angular Smith Chart Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/smith-chart/default) that shows you how to render and configure the Smith Chart in Angular. - ts ` ` ## Rendering type Visualize both the impedance and admittance of transmission lines with Smith chart. - [Rendering types example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/smith-chart/default) ## Title and subtitle Add a title and subtitle to the JavaScript Smith chart control to visualize additional information about the data represented. You can customize the font and alignment of the title and subtitle. - [Title and subtitle example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/smith-chart/default) ## Multiple series Plot any number of line series for representing data. ## Axis customization The Angular Smith chart control supports a horizontal axis and radial axis. The horizontal axis is used for plotting resistance values of transmission lines and the radial axis is used for plotting nonresistance values of transmission lines. - [Customized axis example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/smith-chart/custom) ## Marker Markers highlight data points to improve readability. - [Marker documentation](https://ej2.syncfusion.com/angular/documentation/smithchart/smith-chart-marker#marker) ## Data labels Easily annotate the data points with labels to help improve the readability of data. The data labels in the Angular Smith chart control are smartly arranged to avoid intersection when there are large amounts of data. - [Data label documentation](https://ej2.syncfusion.com/angular/documentation/smithchart/smith-chart-marker#datalabels) ## Legend A legend provides additional information that is helpful in identifying individual series in a Smith chart. It can be docked at the left, right, top, or bottom positions around the plot area. By clicking a legend item, we can toggle series visibility. - [Legend documentation](https://ej2.syncfusion.com/angular/documentation/smithchart/smith-chart-legend) ## Animation Animate the series in the Angular Smith chart while rendering. ## Tooltip The interactive Angular Smith chart displays a pop-up with additional information when the mouse is hovered over a data point. - [Tooltip documentation](https://ej2.syncfusion.com/angular/documentation/smithchart/smith-chart-tooltip) ## Exporting Print or export the rendered Angular Smith chart to save a local copy for further use. - [Print and export example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/smith-chart/print-export) ### Export You can export the Smith chart to a PDF document or in image formats such as SVG, PNG, and JPEG in client-side. ### Print Print the rendered Smith chart directly from the browser. ## Touch and browser support The interactive Smith chart control also support touch interactions. ### Touch support All the Smith chart features will work on touch devices with zero configuration. Use the touch features, such as tooltips and toggling series visibility using the legend, without any customization. ### Responsive You can view the Smith chart control on various devices. Also hide specific elements in the Smith chart for particular screen sizes by making a very minimal change in the events. ### Cross-browser support You can render the Smith chart component in all modern browsers. - [Cross-browser compatibility documentation](https://ej2.syncfusion.com/angular/documentation/browser) ## Angular version compatibility With continuous improvement in Angular versions, the Angular Smith Chart is kept up to date to make it compatible with the latest version. ### Angular 11 - [Getting started with Angular 11 Smith Chart](https://support.syncfusion.com/kb/article/10905/how-to-get-started-easily-with-syncfusion-angular-11-smith-chart) - [Angular 11 Smith Chart example](https://github.com/SyncfusionExamples/ej2-angular-11-smith-chart) ## Other supported frameworks The Smith Chart is available for the Blazor, React, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [Blazor Smith Chart](https://www.syncfusion.com/blazor-components/blazor-smith-chart) - [React Smith Chart](https://www.syncfusion.com/react-components/react-smith-chart) - [JavaScript Smith Chart](https://www.syncfusion.com/javascript-ui-controls/js-range-selector) - [Vue Smith Chart](https://www.syncfusion.com/vue-components/vue-smith-chart) ## Supported browsers The Angular Smith Chart works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/smithchart/getting-started) ##### Angular TextBox | Material Floating Label | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-textbox # Angular TextBox (Text Field) with Floating Label - Use an extended version of the HTML input element, supporting both pure CSS and Angular versions. - Easily create input groups with icons, buttons, help text, and validation messages. - Add a modern look to your entered text and display floating labels using Angular. ## Overview The Angular TextBox (text field) is a component for editing, displaying, or entering plain text on forms to capture user names, phone numbers, email addresses, and more. This component is an extended version of the HTML5 TextBox (input type text) component with icons, floating labels, different sizes, grouping, validation states, and more features. It is available in a HTML5/CSS version and JavaScript version. ## Angular TextBox This component provides a floating label with minimal configuration. It supports most of the features that are available in the pure HTML5/CSS version of the TextBox component. - [Angular TextBox component example.](https://ej2.syncfusion.com/angular/demos/#/material/textboxes/default) ## HTML5/CSS TextBox Render a simple text box using pure CSS and HTML. The component supports all the essential features, such as input groups with icons, floating labels, multiline text, different sizing, and validation states. - [TextBox component example](https://ej2.syncfusion.com/angular/demos/#/material/textboxes/default) - [TextBox component documentation](https://ej2.syncfusion.com/angular/documentation/textbox/getting-started) ## Input group Easily create input groups by prepending or appending icons, buttons, or text with floating labels in the TextBox component. For example, you can prepend text with a dollar symbol ($) for price input or an at sign (@) for username. - [Input group example.](https://ej2.syncfusion.com/angular/demos/#/material/textboxes/default) - [Input group documentation.](https://ej2.syncfusion.com/angular/documentation/textbox/groups) ## Floating label (placeholder text) Float placeholder text at the top of the input box with an animation when the input receives focus or has a value. The floating label ensures that the input value and label are always visible. - [Floating label TextBox component example.](https://ej2.syncfusion.com/angular/demos/#/material/textboxes/default) - [Floating label TextBox component documentation.](https://ej2.syncfusion.com/angular/documentation/textbox/groups) ## Input sizing The TextBox has built-in sizing support (normal and small modes) to fit the input box’s size with sufficient padding and spacing. - [Input sizing documentation.](https://ej2.syncfusion.com/angular/documentation/textbox/sizing) ## Input validation with Angular forms The component works seamlessly with Angular template-driven forms, reactive forms, and native HTML forms. It also supports applying corresponding validation styles for success, error, and warning states. - [Template-driven forms example.](https://ej2.syncfusion.com/angular/demos/#/material/textboxes/template-driven-forms) - [Reactive forms example.](https://ej2.syncfusion.com/angular/demos/#/material/textboxes/reactive-forms) ## Multiline TextBox The TextBox component is capable of handling multiple lines of text with floating labels to help you accept addresses, descriptions, comments, feedback, and more. - [Multiline TextBox component documentation.](https://ej2.syncfusion.com/angular/documentation/textbox/groups) ## Get and set text box values Easily set or retrieve a value in the Angular TextBox component to process it and enable a clear button to allow users reset the input value. - [Clear button documentation.](https://ej2.syncfusion.com/angular/documentation/textbox/groups) ## Adornments The TextBox control supports custom adornments using the prependTemplate and appendTemplate properties, which allow users to render custom elements like icons, buttons, or dropdowns to enhance user interaction with prefix and suffix elements. - [Adornments example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/textboxes/adornments) - [Adornments documentation](https://ej2.syncfusion.com/angular/documentation/textbox/adornments) ## Right-to-left (RTL) rendering The Angular TextBox supports right-to-left (RTL) rendering. Users can change the text direction and layout of the TextBox to be right to left. This improves the user experience and accessibility for those working with RTL languages. ## Themes The Angular TextBox component has several built-in themes: Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and high contrast. Users can customize these built-in themes or create new themes either by overriding Sass variables or using our Theme Studio application. - [Theme Studio application.](https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio) ## Developer-friendly APIs Developers can control the appearance and behaviors of the Angular TextBox component, including its floating label, using a rich set of APIs. - [TextBox API reference](https://ej2.syncfusion.com/angular/documentation/api/textbox/) ## Angular TextBox code example Easily get started with the Angular TextBox using a few simple lines of HTML and TS code, as demonstrated below. Also, explore the [Angular TextBox example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/textboxes/default), which shows how to render and configure the TextBox in Angular. - html - ts // specifies the template string for the TextBox component. ## Other supported frameworks The TextBox is also available for the Blazor, React, Vue, and JavaScript frameworks. Check out its platform-specific options in these links: - [Blazor TextBox](https://www.syncfusion.com/blazor-components/blazor-textbox) - [React TextBox](https://www.syncfusion.com/react-components/react-textbox) - [Vue TextBox](https://www.syncfusion.com/vue-components/vue-textbox) - [JavaScript TextBox](https://www.syncfusion.com/javascript-ui-controls/js-textbox) [I’d love to read it now.](https://ej2.syncfusion.com/angular/documentation/textbox/getting-started) ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Time Picker | Customized Material Design | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-timepicker # Angular TimePicker - Amazing Material Theme for Time Display - A lightweight and advanced drop-down menu timepicker to interact with time. - Out-of-the-box, built-in features such as validation, custom time formatting, inactive times, time ranges, and step intervals. - Industry standard themes are included: Material, Fabric, and Bootstrap. ## Overview The Angular Time Picker, also known as the Angular Material Time Picker is a lightweight and mobile-friendly component that allows end users to select a time value either from a pop-up time list or by entering the value directly in the text box. ## Angular TimePicker Code Example Easily get started with the Angular TimePicker using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular TimePicker Example](https://ej2.syncfusion.com/angular/demos/#/material/timepicker/default) that shows you how to render and configure a TimePicker in Angular. - html - ts "control-section sample" "control_wrapper" > @syncfusion/ej2-base //enable ripple style ` ` ## Masked time input Allows users to enter valid times in the correct format and avoid data input errors during data entry. - [Masked time input](https://ej2.syncfusion.com/angular/documentation/timepicker/time-masking) ## Time formatting The Angular Material TimePicker component has a default, culture-specific time format, but it can be custom formatted. - [Time formatting documentation](https://ej2.syncfusion.com/angular/documentation/timepicker/getting-started#setting-the-time-format) ## Disabled time Disable any of the time values in a pop-up list to prevent the selection of those times. ## Time range Restrict the entry or selection of a time value within a specific range of time by using min and max properties. - [Time range documentation](https://ej2.syncfusion.com/angular/documentation/timepicker/time-range) ## Globalization The TimePicker component in Angular supports globalization like internationalization and localization that updates the time format value in the pop-up list to match a specified culture. - [Globalization documentation](https://ej2.syncfusion.com/angular/documentation/timepicker/globalization) ## Time interval Increment or decrement each time value of the selection list by one step at a time. You can change the steps based on your needs. - [Time interval documentation](https://ej2.syncfusion.com/angular/documentation/api/timepicker/timePickerModel/#step) ## UI customization The appearance of the Angular TimePicker component can be customized completely based or your modern web and mobile applications. ## Time list with duration Customize the pop-up list items with time duration. - [Time duration example](https://ej2.syncfusion.com/angular/demos/#/material/timepicker/list-formatting) ## HTML form validation HTML form validation allows only a valid value to be entered in the Angular TimePicker component’s text box. Disabled ranges or out-of-range times are validated. - [HTML validation documentation](https://ej2.syncfusion.com/angular/documentation/timepicker/how-to/custom-validation-using-form-validator) ## Scroll position Set the scroll position to a custom time value if no value is selected. ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices) accessibility that helps the timepicker component be accessed by on-screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices) best practices for implementing keyboard interaction. - Follows the [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standard in the design of the UI element visuals such as foreground color, background color, line spacing, text, and images. - Supports right-to-left (RTL) direction for users working in right-to-left languages like Hebrew and Arabic. - [TimePicker keyboard documentation](https://ej2.syncfusion.com/angular/documentation/timepicker/accessibility#keyboard-interaction) ## Mobile-friendly UI The Angular Material Time Picker component’s responsive mode has an adaptive, redesigned UI appearance for mobile devices. ## Developer-friendly APIs End users receive the best experience thanks to the full UI component granted by developer-friendly APIs. ## Built-in themes The TimePicker component in Angular supports several built-in themes such as Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and High Contrast. Users can customize any one of these built-in themes or create new themes to achieve their own desired look and feel either by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio Application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Angular version compatibility With continuous improvement in Angular versions, the Angular Time Picker is kept up to date to make it compatible with the latest version. ### Angular 11 - [Getting started with Angular 11 Time Picker](https://support.syncfusion.com/kb/article/10874/how-to-get-started-easily-with-syncfusion-angular-11-timepicker) - [Angular 11 Time Picker example](https://github.com/SyncfusionExamples/ej2-angular-11-time-picker) ## Other supported frameworks The TimePicker is available for the Blazor, React, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [Blazor TimePicker](https://www.syncfusion.com/blazor-components/blazor-timepicker) - [React TimePicker](https://www.syncfusion.com/react-components/react-timepicker) - [JavaScript TimePicker](https://www.syncfusion.com/javascript-ui-controls/js-timepicker) - [Vue TimePicker](https://www.syncfusion.com/vue-components/vue-timepicker) ## Supported browsers The Angular TimePicker works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/timepicker/getting-started) ##### Angular Tree View | Hierarchical Data Model Tree List | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-tree-view # Angular Tree View - Highly Customizable Tree List Component - Display hierarchical data in a tree-view structure. - Load a wide range of nodes with optimal performance. - Drag and drop multiple selected tree nodes anywhere. - Select multiple nodes using built-in check boxes. - Edit node text in-line with editable nodes support. - Easily customize nodes, and expand or collapse icons. ## Overview The Angular Tree View (Tree List) is a graphical user interface component that represents hierarchical data in a tree structure. It provides advanced features like load on demand, checkboxes, multiple selection, tree navigation, drag and drop, tree node editing, and template support. ### High performance [Load on demand (lazy load)](https://ej2.syncfusion.com/angular/documentation/treeview/data-binding) is enabled by default to reduce bandwidth usage when consuming large amounts of data. Only first-level nodes are loaded initially, and then child nodes are loaded when their parent node is expanded. ### Seamless data binding [Bind data to the Tree View](https://ej2.syncfusion.com/angular/documentation/treeview/data-binding) component from any valid data source in JSON format. The tree data can be local or remote and retrieved via various adapters, such as OData, OData V4, URL, JSON, and web API. ### Adapts to any resolution Tree View has a highly responsive layout and an optimized design for desktops, touchscreens, and phones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Admirable feature set The Angular Tree View supports [load on demand, bound and unbound modes, drag and drop, multiselection, and editing](https://ej2.syncfusion.com/angular/documentation/treeview/getting-started). ### Create your own template designs It can be customized via [node template support](https://ej2.syncfusion.com/angular/documentation/treeview/template), which allows you to design a custom structure for tree nodes. Node templates can be used for parent nodes, child nodes, or both, and can include images and any custom element structure. ### Visualize hierarchical data The Angular Tree View is a graphic user interface element that displays hierarchical data as a tree structure. It can be populated with nested arrays of JSON objects from a hierarchical data source. ### Attractive, customizable themes Cutting-edge design with several built-in themes, such as Fluent, Tailwind CSS, Bootstrap, Material, and Fabric. Utilize the [online Theme Studio tool](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) to customize themes of treeview easily. ### Globalization and localization Enable users from different locales to use the component by formatting dates, currency, and numbering to suit preferences. ## Angular Tree View code example Easily get started with the Angular Tree View using a few simple lines of HTML and TSX code as demonstrated below. Also explore our [Angular Tree View example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treeview/default) that shows you how to render and configure the Tree View in Angular. - html - tsx > ## Tree node with icons Display nodes with labels and icons to present the content in a more readable format. This is helpful in making a typical directory tree and file system. - [Example of icons and images](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treeview/icons) ## Check box The Angular Tree View component provides built-in support for check boxes, allowing users to select more than one item. The Tree View check boxes also have a tri-state mode, which is applicable only for parent nodes. In this mode, the parent node will go into the indeterminate state when the child nodes are partially checked. - [Checkbox example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treeview/treeview-checkbox) - [Checkbox documentation](https://ej2.syncfusion.com/angular/documentation/treeview/check-box) ## Drag and drop In Angular Tree View, Nodes can be dragged and dropped at all levels of the same Tree View. - [Tree View drag and drop example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treeview/drag-and-drop) - [Tree View drag and drop documentation](https://ej2.syncfusion.com/angular/documentation/treeview/drag-and-drop) ### Inside the tree Tree nodes can be dragged and dropped from one parent node to another within the same level or at different levels. ### Outside the tree Extending the drop behavior allows users to drop tree nodes from one tree view to another. ### External container Drop tree nodes to any external container or component by extending the Angular Tree View node drop action. ## Multiple node selection The Angular Tree View component allows users to select multiple nodes. When the drag-and-drop feature is enabled, all the selected nodes can be dragged at the same time. - [Tree View multiple node selection example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treeview/multiple-selection) ## Editable nodes Edit the tree nodes’ label text on the client side by double-clicking it. When editing treeview nodes, the treeview data source will also be updated with the modified data. - [Tree View node editing documentation](https://ej2.syncfusion.com/angular/documentation/treeview/node-editing) ## Sorting tree nodes Render the Tree View nodes in the ascending or descending order based on the label text for improved readability. ## Node template The Angular Tree View component can be customized through its node template support, which allows you to define a custom structure for tree nodes. You can use node templates specifically for parent nodes, child nodes, or both, and include images and any custom element structure. - [Template example](https://ej2.syncfusion.com/demos/#/bootstrap5/treeview/template.html) - [Tree View node template documentation](https://ej2.syncfusion.com/angular/documentation/treeview/template) ## Expand collapse icons Easily customize the expand and collapse icons based on the requirement of your application. - [How to customize the expand collapse icons](https://ej2.syncfusion.com/angular/documentation/treeview/how-to/customize-the-expand-and-collapse-icons) ## Tooltips for tree nodes It supports tooltips for tree nodes that display information about the nodes while hovering over them. You can bind a tooltip from a data source along with node fields. - [Tooltip documentation](https://ej2.syncfusion.com/angular/documentation/treeview/how-to/set-tool-tip-for-tree-nodes) ## Context menu A context menu can be integrated with the Tree View component to open when a node is right-clicked. The menu helps users perform node manipulations such as adding, removing, and renaming nodes. - [Context menu documentation](https://ej2.syncfusion.com/angular/documentation/treeview/how-to/process-the-tree-node-operations-using-context-menu) ## Text wrap A node’s text wraps when it reaches edge of the Tree View. The node’s height will be adjusted automatically based on the content. - [Text wrap API documentation](https://ej2.syncfusion.com/angular/documentation/api/treeview/#allowtextwrap) ## Tree node customization It allows you to customize the tree nodes by level. For example, apply specific styles to leaf nodes, first child nodes, and second level nodes, etc. - [Tree node customization documentation](https://ej2.syncfusion.com/angular/documentation/treeview/how-to/customize-the-tree-nodes-based-on-levels) ## Tree node validation You can add validation to the tree node’s text on editing like required, a minimum or maximum length, etc. - [Tree node validation](https://ej2.syncfusion.com/angular/documentation/treeview/how-to/validate-the-text-when-renaming-the-tree-node) ### Keyboard navigation The Angular Tree View component ensures that every cell is [accessible using the keyboard](https://ej2.syncfusion.com/angular/documentation/treeview/accessibility#keyboard-navigation). Major features like sort, select, and edit can be performed using keyboard commands alone; no mouse interaction is required. This helps in creating highly accessible applications using this component. ### Screen reader The Angular Tree View has complete WAI-ARIA accessibility support. The Data Grid UI includes high-contrast visual elements that help visually impaired people to have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers. ### Right to left (RTL) Right-to-left rendering allows displaying the text and layout of the Tree View from right to left. This improves the user experience and accessibility for RTL languages. ## Angular version compatibility With continuous improvement in Angular versions, the Angular Tree View is kept up to date to make it compatible with versions starting from 4 to the latest version. - [More details on Angular Tree View version compatibility](https://support.syncfusion.com/kb/article/12182/angular-treeview-version-compatibility) ## Other supported frameworks The Tree View is available for the Blazor, React, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [Blazor TreeList](https://www.syncfusion.com/blazor-components/blazor-treeview) - [React TreeList](https://www.syncfusion.com/react-components/react-treeview) - [JavaScript Tree List](https://www.syncfusion.com/javascript-ui-controls/js-tree-view) - [Vue Tree List](https://www.syncfusion.com/vue-components/vue-tree-view) ## Supported browsers The Angular Tree View works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/treeview/getting-started) ##### Angular Markdown Editor | Advanced Features | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-rich-text-editor/wysiwyg-markdown-editor ## Markdown Editor The Angular Markdown Editor is a lightweight, intuitive component designed for seamless Markdown-to-HTML conversion. It empowers users to create and edit content in Markdown format easily. Paired with a third-party plugin, the editor offers real-time previews of typed Markdown syntax, blending simplicity with functionality. ## Live markdown preview The Markdown editor allows users to view live changes of the markdown format editing content (md file) in an HTML preview. ## Markdown syntax The Markdown editor supports customizable Markdown syntax (MD syntax), allowing users to tailor rules and extend functionality. Integrated with built-in commands, it ensures a flexible, personalized editing experience while harmonizing with the editor’s formatting capabilities. - [Markdown editor with custom format example](https://ej2.syncfusion.com/angular/demos/#/tailwind3/markdown-editor/custom-format) - [Custom markdown syntax documentation](https://ej2.syncfusion.com/angular/documentation/markdown-editor/custom-format) ## Toolbar with rich set of tools The Markdown editor toolbar provides a variety of commands for editing and formatting the content. Users can format text, insert images, add headers, insert hyperlinks, create lists, and preview results. The commands are grouped together based on related functionality. - [Markdown editor supported tools documentation](https://ej2.syncfusion.com/angular/documentation/markdown-editor/supported-markdown) ### Multi-row toolbar The excess toolbar commands are wrapped in the next rows within toolbar in the Markdown text editor. ### Expand toolbar The overflow toolbar commands hidden in the next row become visible when the toolbar is expanded via the expand icon. ### Floating the toolbar The Markdown editor toolbar doesn’t stick with top of the editor, but floats within the editor area while scrolling the editor page. - [Floating toolbar documentation](https://ej2.syncfusion.com/angular/documentation/markdown-editor/toolbar#creating-a-sticky-toolbar) ### Custom tools Users can also add their own commands (tools) with actions to the toolbar along with the built-in commands to enhance the markdown text editor. - [Custom toolbar documentation](https://ej2.syncfusion.com/angular/documentation/markdown-editor/toolbar#custom-toolbar-items) ## Editing experience The Markdown editor component offers a comprehensive set of tools and options to enhance the editing experience, enabling users to apply rich text formatting such as bold, italics, underline, and strikethrough. It also supports inserting images, tables, and links, ensuring a seamless and efficient content creation process with Markdown syntax. ### Formatting commands Users can apply formatting to the selected content, whole paragraphs, or specific words or characters: - Apply formatting to headings, quotations, code, paragraphs. - Bold, italicize, underline, or strikethrough selected words. ### Insert images Users can insert images in the Markdown editor from a local path or server path with image alt text and then link URLs to the images. - [Markdown insert images example](https://ej2.syncfusion.com/angular/demos/#/tailwind3/markdown-editor/default-functionalities) ### Markdown links Insert or change the hyperlinks with display text in markdown syntax. ## Insert markdown table Users can insert tables with rows and columns in the Markdown editor to display grid-like tabular data. ## Adding lists Create ordered (numbered) or unordered (bulleted) lists to organize content markdown syntax. ## Markdown to HTML Integrating third-party Markdown parsers like marked or remark allows users to preview Markdown content as an HTML view in a Rich Text Editor by converting Markdown syntax into formatted HTML in real time. This allows users to write Markdown on one side of the editor while instantly viewing the rendered output, improving readability and editing efficiency. - [Markdown to HTML conversion documentation](https://ej2.syncfusion.com/angular/documentation/markdown-editor/markdown-preview) ## @Mention Integration Engage collaborators effortlessly with built-in @mention support, fostering seamless interaction within the editor. - [Markdown mention integration documentation](https://ej2.syncfusion.com/angular/documentation/markdown-editor/mention-support) ## Localization Enabling localization in a Markdown editor allows users from different locales to customize text direction, language, and numbering formats based on their preferences. ## Adapts to any resolution The Markdown editor has a highly responsive layout and an optimized design for desktops, touch screens, and smart phones. It works well on all mobile phones that use iOS, Android, or Windows OS. ## Built-in and customizable themes The Markdown editor is shipped with several built-in themes such as Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. ## Accessibility The Markdown editor view has complete WAI-ARIA accessibility support. The Rich Text Editor UI includes high-contrast visual elements that help visually impaired people to have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers. ##### Angular Data Grid Data Binding | JSON, REST | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-data-grid/data-binding ## JavaScript array collection Binds the Data Grid with an array of JSON, enabling it to work smoothly in single-page applications (SPA). - [JSON binding documentation](https://ej2.syncfusion.com/angular/documentation/grid/data-binding/#local-data) ## Remote data binding Binding the Data Grid with RESTful services allows data from services to be consumed using the data manager. It supports various data adaptors such as JSON, OData, ODataV4, URL, and Web API for working with a particular data service. - [OData binding documentation](https://ej2.syncfusion.com/angular/documentation/grid/data-binding/#binding-with-odata-services) - [ODataV4 binding documentation](https://ej2.syncfusion.com/angular/documentation/grid/data-binding/#binding-with-odata-v4-services) - [Web API binding documentation](https://ej2.syncfusion.com/angular/documentation/grid/data-binding/#web-api) ## Server side operations Data handling is extensible in Data Grid. The appropriate events are raised with the current state of Data Grid when data needs to be processed. Preferred data processing logic can be provided. - [CRUD operations at server side documentation](https://ej2.syncfusion.com/angular/documentation/grid/edit/#persisting-data-in-server) ## Master details/hierarchical binding Data Grid can be configured to show one-to-many relationship data using hierarchical binding. An n-level hierarchy Data Grid can be built with minimal configuration to help users visualize data in parent and child relationships. - [Example for master details](https://ej2.syncfusion.com/angular/demos/#/material/grid/hierarchy) - [Master details documentation](https://ej2.syncfusion.com/angular/documentation/grid/hierarchy-grid/) ##### Angular Editable Grid with multiple edit modes | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-data-grid/editing ## Edit modes Angular DataGrid supports various edit modes such as inline, dialog, and batch edit (cell editing). These provide an interactive UI to add and edit records. In addition, editing can be performed programmatically. - [Example for dialog editing](https://ej2.syncfusion.com/angular/demos/#/material/grid/dialog-editing) - [Example for batch editing (cell editing)](https://ej2.syncfusion.com/angular/demos/#/material/grid/batch-editing) ## Bulk editing Bulk editing allows you to save the added, edited, and deleted records in a single request. This feature is used in the Data Grid by enabling the batch editing (cell editing) mode. This provides an Excel-like editing experience and saves all the changes. - [Example for batch editing (cell editing)](https://ej2.syncfusion.com/angular/demos/#/material/grid/batch-editing) - [Batch edit (cell editing) documentation](https://ej2.syncfusion.com/angular/documentation/grid/edit/#batch) ## Custom editor/customizable edit UI The editor for a Data Grid cell can be specified by providing the edit type. The preferred editor can also be defined for specific columns. - [Custom editor documentation](https://ej2.syncfusion.com/angular/documentation/grid/edit/#cell-edit-template) ## Validation While updating cells or rows, the Data Grid validates user inputs. This helps users to improve overall data quality by validating user input for accuracy and completion. The users can also customize validation criteria and message according to their requirement. - [Validation documentation](https://ej2.syncfusion.com/angular/documentation/grid/edit/#column-validation) ##### Aggregates | Angular Data Grid | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-data-grid/aggregation # Angular Data Grid Aggregation for Angular data grid ## Built-in aggregate types The Angular Data Grid relies on the data manager to aggregate column values. Default aggregate types such as sum, max, min, average, and count can be used. Formatted aggregate values are displayed in aggregate-enabled columns. - [Built-in aggregates documentation](https://ej2.syncfusion.com/angular/documentation/grid/aggregates/#built-in-aggregate-types) ## User-defined aggregate types Data Grid allows users to define custom aggregate logic for a particular aggregate column. This requires a custom aggregate function that holds custom logic to calculate aggregate value of the Data Grid columns. - [Custom aggregates documentation](https://ej2.syncfusion.com/angular/documentation/grid/aggregates/#custom-aggregate) ## Footer aggregate The Data Grid has an option to calculate the aggregate value of the rows of columns and display it in the corresponding cell of the footer row. - [Angular Data Grid footer aggregate documentation](https://ej2.syncfusion.com/angular/documentation/grid/aggregates/footer-aggregate/) ## Group and caption aggregate Display the aggregate value of the current group items in the corresponding cell of the group footer row or caption cell of the group caption row, or display it in both group footer and group caption cells. - [Group and caption aggregate documentation](https://ej2.syncfusion.com/angular/documentation/grid/aggregates/group-and-caption-aggregate/) ## Reactive aggregate On each cell save of the batch editing (cell editing), Data Grid refreshes aggregate values with the edited value of the cell. These aggregated values are volatile. - [Example for reactive aggregate](https://ej2.syncfusion.com/angular/demos/#/material/grid/reactive-aggregate) ##### Angular Table Pagination | Data Grid | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-data-grid/paging # Angular Data Grid Pagination for Angular DataTable ## On-demand The Pager UI of the Data Grid requests data on-demand when navigating to another page. Using simple properties, users can customize the pager. ## Page size dropdown Allows you to change the page size on the fly by using the page size dropdown in the pager. The Angular Data Grid allows customization of values in the page size dropdown. - [Example for page size dropdown](https://ej2.syncfusion.com/angular/demos/#/material/grid/paging) ## Customizable pager UI Using pager template, users can customize the pager UI that suits their application scenario. - [Custom pager documentation](https://ej2.syncfusion.com/angular/documentation/grid/paging/#template) ##### Angular Filterable Data Grid | Data Table | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-data-grid/filtering # Angular Data Grid Filtering for Angular Data Grid ## Powerful excel-like filter The Excel-like filter helps create complex filter criteria for a column by allowing users to select possible filter values from a check box list. Additionally, users can build complex filter criteria using advanced filter option. - [Example for excel filter](https://ej2.syncfusion.com/angular/demos/#/material/grid/filter-menu) ## Custom filter/extensible filter UI Filter UI and logic for a column is applied based on the column type. It is also possible for the users to define their own custom filter UI and filtering logic for a column to suit their application needs. - [Custom filter UI documentation](https://ej2.syncfusion.com/angular/documentation/grid/filtering/#filter-bar-template-with-custom-component) ## Search Search Data Grid rows using the built-in search box in the toolbar or programmatically. Using the built-in settings, search behavior can be customized. - [Example for searching](https://ej2.syncfusion.com/angular/demos/#/material/grid/searching) ##### Angular Sortable Data Grid | Angular Sort Table | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-data-grid/sorting # Angular Data Grid Sorting for Data Grid ## Sort multiple columns Sort Data Grid rows using multiple columns by clicking the desired column headers and holding Ctrl or Command keys. - [Sorting documentation](https://ej2.syncfusion.com/angular/documentation/grid/sorting/) ## Custom sort function Built-in options are provided to define the custom sort logic for the desired columns. - [Sort function documentation](https://ej2.syncfusion.com/angular/documentation/grid/sorting/#sort-comparer) ##### Angular Grid Grouping | Table Grouping | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-data-grid/grouping # Angular Data Grid Grouping for Angular Data Grid ## N-level column grouping Allows the user to perform N-level grouping without any restrictions. It also possible to hide or show grouped columns in the Data Grid. - [Grouping documentation](https://ej2.syncfusion.com/angular/documentation/grid/grouping/) ## Grouping with aggregates Data Grid allows users to apply the aggregate function on grouped rows. Users can display aggregate values for a group either on the group footer cell or group caption cell. It is also possible to define multiple aggregations to the same column. - [Example for grouping with aggregation](https://ej2.syncfusion.com/angular/demos/#/material/grid/aggregate-group) ## Group by format Grouping is performed based on the field value, by default. A column can be grouped on the basis of formatted value instead of raw value to make viewing formatted date columns easier. - [Group by format documentation](https://ej2.syncfusion.com/angular/documentation/grid/grouping/#group-by-format) ## Lazy load grouping with paging Load huge amounts of grouped records to the Grid without any performance degradation using the on-demand concept. While grouping, the Grid will render only the initial level caption rows in the collapsed state based on page size. The child records of each caption will be fetched on demand and render in the Grid when you expand the caption row. - [Angular Data Grid lazy load grouping with paging documentation](https://ej2.syncfusion.com/angular/documentation/grid/grouping/lazy-load-grouping/) ## Lazy load grouping with infinite scrolling Load large amounts of grouped records to the Grid without any performance degradation using the on-demand concept. When infinite scrolling is enabled in a grid, lazy load grouping renders records in a collapsed state when binding data. The grouped items with N levels of data will be loaded on demand with infinite scrolling when the corresponding group is expanded. - [Lazy load grouping with infinite scrolling documentation](https://ej2.syncfusion.com/angular/documentation/grid/grouping/lazy-load-grouping/#lazy-load-grouping-with-infinite-scrolling) ##### Single, Multi & Checkbox Selection | Angular Data Grid | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-data-grid/selection ## Row selection The Angular Data Grid allows you to select a range of rows or a single row by just clicking or tapping the row. To perform multi-selection, press and hold CTRL or SHIFT to select the desired row or range of rows. - [Example for row selection](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/grid/selection) - [Row selection documentation](https://ej2.syncfusion.com/angular/documentation/grid/selection/row-selection/) ## Cell selection The Angular Data Grid allows you to select a range of cells or a single cell by just clicking or tapping the cell. To perform multi-selection, press and hold CTRL or SHIFT to select the desired cell or range of cells. The two types of cell selection modes are flow and box. - [Cell selection documentation](https://ej2.syncfusion.com/angular/documentation/grid/selection/cell-selection/) ## Drag selection Allows you to select a range of rows or cells by simply dragging the pointer over the cells by mouse or touch. ## Checkbox selection Users can select multiple Data Grid records with the help of a checkbox in each row. The selection persists even after performing any action in the Data Grid. It also provides an option to select or deselect all the rows in a Data Grid using the checkbox in the corresponding column header. - [Example for checkbox selection](https://ej2.syncfusion.com/angular/demos/#/material/grid/checkbox-selection) - [Checkbox selection documentation](https://ej2.syncfusion.com/angular/documentation/grid/selection/#checkbox-selection) ##### Angular Data Grid Column Schema | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-data-grid/column # Angular Data Grid Columns for Angular Data Grid ## Define columns Users can define the needed columns explicitly in a Data Grid. Enhance the appearance of columns by setting the header text, text alignment, cell value format, and width. ## Auto generate columns When the column collection is not specified, Data Grid will create columns definitions for users by creating column objects from the data source. - [Column auto generation documentation](https://ej2.syncfusion.com/angular/documentation/grid/columns/column-rendering#auto-generated-columns) ## AutoFit columns width Users can interactively auto-size column widths to show their full content by double-clicking on column borders. Data Grid supports programmatically auto-sizing columns. The Autofit feature displays columns based on their defined width. If the total column width is less than the grid width, white space will appear instead of columns auto-adjusting to fill the grid. - [AutoFit columns width documentation](https://ej2.syncfusion.com/angular/documentation/grid/columns/columns#autofit-columns) ## Cell attributes Users can decorate each cell element of the Data Grid with their own attributes by customizing styles, adding additional class names, and more. - [Cell attribute documentation](https://ej2.syncfusion.com/angular/documentation/grid/columns/columns#customize-column-styles) ## Text wrap Wraps the Data Grid cell text to the next line when it is too large to fit a cell. Users can wrap the header or content cell`s text by setting the available wrap mode options. - [Example for text wrap](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/grid/column/auto-wrap) ## Column chooser The column chooser provides a list of column names paired with check boxes, allowing users to toggle visibility on the fly. This helps users control column visibility through an interactive UI. - [Example for column chooser](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/grid/column/column-chooser) ## Reorder Reorder Data Grid columns either through user interaction or programmatically. Simply dragging a column header to the desired column position will reorder the columns of a Data Grid. - [Example for column reorder](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/grid/column/reorder) ## Resize Column resize allows changing the column width on the fly by simply dragging the right corner of the column header. A scroll bar appears when the Data Grid content width exceeds the element width. - [Example for column resize](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/grid/column/column-resizing) ## Column menu Allows performing various column-based actions with the help of the Data Grid column menu. Menu items can also be customized to list only the preferred actions. - [Example for column menu](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/grid/column/column-menu) ## Column spanning Span the adjacent Data Grid cells based on the preferred criteria. - [Example for column spanning](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/grid/column/column-spanning) ## Foreign key column It is possible to show values from external or lookup data sources in a column based on the foreign key/value name. Allows all Data Grid actions like sorting, filtering, editing, grouping, and other operations in the foreign data column. - [Example for foreign key column binding](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/grid/column/foreign-key) ## Value accessors The value accessors specify how the cell value is to be retrieved from the data. The preferred value accessors can be used when the row data is not just a simple object. - [Value accessor documentation](https://ej2.syncfusion.com/angular/documentation/grid/columns/column-rendering#using-valueaccessor-property) ## Cell styling Data Grid supports the customization of cell styles programmatically or by using CSS . - [Cell styling documentation](https://ej2.syncfusion.com/angular/documentation/grid/cell#customize-cell-styles) ##### Angular Data Grid Excel Export | Export Hierarchical Data | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-data-grid/excel-export ## Exporting Font & Style Customization Users can customize each cell’s font style, size, colors, and more when exporting the Data Grid to Excel. This helps create visually appealing and tailored Excel documents. - [Customization documentation](https://ej2.syncfusion.com/angular/documentation/grid/excel-export/excel-export-options#font-and-color-customization) ## Exporting Conditional Formatting Conditionally format Data Grid cells based on their values or other criteria by accessing each cell and applying styles such as background color during export to Excel format. - [Conditional cell formatting documentation](https://ej2.syncfusion.com/angular/documentation/grid/excel-export/excel-export-options#conditional-cell-formatting) ## Exporting Custom Header & Footer Users can enhance the exported Excel document by adding custom header and footer content. This is useful for including extra information, such as company branding, summaries, or report metadata. - [Adding header and footer documentation](https://ej2.syncfusion.com/angular/documentation/grid/excel-export/excel-export-options#adding-header-and-footer-in-the-exported-excel-file) ## Exporting images Users can export images embedded in Data Grid columns to an Excel document. This allows visual elements to be preserved alongside data, resulting in a more informative and visually enriched file. - [Exporting image documentation](https://ej2.syncfusion.com/angular/documentation/grid/excel-export/exporting-with-templates#exporting-with-column-template) ## Exporting hyperlinks Users can export hyperlinks included in Data Grid columns to an Excel document. This feature helps preserve clickable links alongside the data, enhancing navigation and providing direct access to related resources. - [Exporting hyperlinks documentation](https://ej2.syncfusion.com/angular/documentation/grid/excel-export/exporting-with-templates#exporting-with-column-template) ## Exporting Formulas The Data Grid enables the seamless integration of formulas during Excel export, allowing users to perform calculations and embed computed values directly into the exported file. This capability is particularly beneficial for generating reports that demand dynamic or advanced data analysis. - [Exporting formula documentation](https://ej2.syncfusion.com/angular/documentation/grid/excel-export/excel-exporting#how-to-add-formula-for-the-cell-while-exporting) ## Exporting selected records Users can export only selected records from the Data Grid to generate a focused Excel file. This feature offers flexibility by allowing exports that include just the relevant data, making documents more precise and purposeful. - [Exporting selected records documentation](https://ej2.syncfusion.com/angular/documentation/grid/excel-export/excel-export-options#export-the-selected-records) ## Show or hide columns while exporting The Data Grid allows users to show or hide columns dynamically during export. This flexibility helps tailor the Excel file to specific data needs, ensuring only the required information is included in the output. - [Dynamically show or hide columns documentation](https://ej2.syncfusion.com/angular/documentation/grid/excel-export/excel-export-options#show-or-hide-columns-while-exporting) ## Exporting with stacked headers Users can export stacked headers from the Data Grid, allowing multiple levels of column grouping to appear in the Excel file. It helps preserve complex header structures and ensures the exported document clearly reflects the original data hierarchy. - [Exporting the stacked header documentation](https://ej2.syncfusion.com/angular/documentation/grid/excel-export/excel-export-options#show-or-hide-columns-while-exporting-with-stacked-header) ## Enable filtering in exported excel file Users can export the Data Grid to Excel with filtering options included. This allows others to analyze and focus on specific data points after the export, making the document more insightful and easier to work with. - [Enabling the filter option documentation](https://ej2.syncfusion.com/angular/documentation/grid/excel-export/excel-export-options#enable-filtering-in-the-exported-excel-file) ## Multiple sheet excel export Users can export multiple grids into a single Excel file, placing each grid on its own sheet. This approach keeps the data organized and easy to navigate across different sections of the report. - [Multiple sheet excel export](https://ej2.syncfusion.com/angular/documentation/grid/excel-export/excel-exporting#exporting-multiple-grids) ## Exporting master-detail grids Users can export both master and detail grids onto a single Excel sheet. This is especially useful for managing hierarchical data, ensuring the relationship among records is preserved for easier analysis and review. - [Exporting master-detail grid documentation](https://ej2.syncfusion.com/angular/documentation/grid/excel-export/excel-export-options#export-the-master-detail-grid) ## Exporting template in excel files Users can export Data Grid templates, like column, detail, and caption templates to an Excel file. These templates can carry rich content like images, hyperlinks, and styled text, creating a more engaging and informative document. - [Exporting templates documentation](https://ej2.syncfusion.com/angular/documentation/grid/excel-export/exporting-with-templates) The Angular Data Grid blog posts will guide you in building your first app with Angular components. They provide problem-solving strategies, describe features and functionalities, announce new feature releases, explain best practices, and showcase example scenarios. Explore our latest posts on our blog and tutorial video channels for Angular Data Grid updates. [How to Load a Million+ Records in Less Than a Second in Syncfusion Angular Data Grid?](https://www.syncfusion.com/blogs/post/how-to-load-a-million-records-in-less-than-a-second-in-syncfusion-angular-data-grid) [Effective Ways to Utilize Responsiveness Angular Grid](https://www.syncfusion.com/blogs/post/essential-js-2-effective-ways-to-utilize-responsiveness-in-the-angular-grid) [How to Update Data Without Rerendering an Entire Grid in Angular?](https://www.syncfusion.com/blogs/post/how-to-update-data-without-rerendering-an-entire-grid-in-angular) [Efficiently Bind Data to the Angular Data Grid and Perform CRUD Operations Using GraphQL](https://www.syncfusion.com/blogs/post/efficiently-bind-data-to-the-angular-data-grid-and-perform-crud-operations-using-graphql) ##### High Performance Angular DataGrid | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-data-grid/performance # Angular Data Grid High Performance Angular Data Grid ## Virtualization Angular Grid Virtualization is a technique for limiting UI rendering to just the parts that are currently visible. The Angular Grid Load on Demand helps load the data as needed instead of loading all data at once. This functionality helps to improve performance on control initial rendering time. ### Row Virtualization Row Virtualization in Angular Data Grid allows loading and rendering rows only in the content viewport. It is an alternative way of paging where the data will be loaded while scrolling vertically. - [Row virtualization documentation](https://ej2.syncfusion.com/angular/documentation/grid/scrolling/virtual-scrolling#row-virtualization) ### Column Virtualization Column Virtualization in Angular DataGrid allows the columns of the data source to be virtualized and renders them in the viewport. You can scroll horizontally to view more columns. - [Column virtualization documentation](https://ej2.syncfusion.com/angular/documentation/grid/scrolling/virtual-scrolling#column-virtualization) ## Infinite scrolling Infinite scrolling is used to load large amounts of data in a lazy loading fashion in Angular DataGrid i.e., the buffer data is loaded only when the scrollbar reaches the end of the scroller. - [Infinite scrolling Documentation](https://ej2.syncfusion.com/angular/documentation/grid/scrolling/infinite-scrolling) ##### Angular Flowcharts | Angular Diagrams Library | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-diagram/flowchart ## Overview Angular flowchart is a visual representation of a process in which each step in the process is represented by a different shape and contains a short description of the process step. The Syncfusion Angular Diagram component offers various feature sets to build flowcharts with ease. ## Flowchart shapes The Syncfusion Angular Diagram component provides the shapes required to build a flowchart diagram as ready-made objects, making it is easy to add them in a diagram surface in a single call. - [Flowchart shapes documentation](https://ej2.syncfusion.com/angular/documentation/diagram/shapes#flow-shapes) - [Flowchart shapes example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/diagram/shapes) ## Connector arrows Arrows (or connectors) represent the relationship or direction of flow between two flowchart shapes. ### Arrow types Straight, orthogonal, and curved connector types are provided. You can choose any of these based on the relationship between the connected shapes. - [Connector example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/diagram/connectors) - [Connector documentation](https://ej2.syncfusion.com/angular/documentation/diagram/connectors) ### Arrowheads The Syncfusion Angular Diagram component provides predefined arrowheads to illustrate flow direction in a flowchart diagram. You can also build your own custom arrowheads. ## Annotations You can add descriptions to the flowchart shapes and connectors using annotations, and modify descriptions by pressing F2 or double-clicking them. - [Label example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/diagram/annotations) - [Label documentation](https://ej2.syncfusion.com/angular/documentation/diagram/labels) ## Connection points (ports) Connect to specific places on a shape through different types of ports or connecting points. - [Port example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/diagram/ports) - [Port documentation](https://ej2.syncfusion.com/angular/documentation/diagram/ports) ## Interactive features Use interactive features to improve the editing experience of a flowchart diagram at runtime. You can easily edit a diagram with mouse, touchscreen, or keyboard interfaces. ### Select, drag, resize, rotate Objects can be selected and then dragged, resized, or rotated. - [Interaction documentation](https://ej2.syncfusion.com/angular/documentation/diagram/interaction) ### Snap Precisely align shapes, connectors, and annotations easily while dragging just by snapping to the nearest grid lines or objects. - [Snapping documentation](https://ej2.syncfusion.com/angular/documentation/diagram/grid-lines#snap-to-lines) ### Undo and redo Don’t worry when you edit by mistake—undo and redo commands help to easily correct recent changes. - [Undo and redo documentation](https://ej2.syncfusion.com/angular/documentation/diagram/undo-redo) ## Serialization Save your diagram state in JSON format and load it back later for editing using the serializer. - [Serialization example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/diagram/serialization) - [Serialization documentation](https://ej2.syncfusion.com/angular/documentation/diagram/serialization) ## Exporting and printing You can easily export flowchart diagrams to different image formats such as PNG, JPEG, BMP, and SVG. Flowcharts can be printed from the browser. - [Exporting and printing example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/diagram/print-export) - [Exporting and printing documentation](https://ej2.syncfusion.com/angular/documentation/diagram/export) Automatic layout algorithms 40+ interactive demos [Explore Complete Angular Comparison](https://www.syncfusion.com/pages/angular-competitive-upgrade/) ##### Angular Organizational Chart | Diagrams Library | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-diagram/organizational-chart # Angular Diagram Organizational Chart ## Overview The Angular Diagram organizational chart (often called an org chart or organization chart) is the graphical representation of an organization’s structure. Its purpose is to illustrate the relationships and relative ranks of positions within the organization. The Syncfusion Angular Diagram component offers a variety of features to easily create organizational charts. - [Angular Organizational chart documentation](https://ej2.syncfusion.com/angular/documentation/diagram/automatic-layout#organizational-chart) ## Visualize organizational charts from data sources The Angular Diagram component supports visualizing an organizational chart from an external data source. In addition, data in any format can be easily converted, mapped, and consumed in the diagram by setting a few properties. - [Data binding documentation](https://ej2.syncfusion.com/angular/documentation/diagram/data-binding) ## High-performance automatic layout algorithm The built-in automatic layout algorithm is specifically designed for organizational charts to arrange the parent and child node positions automatically. ## Templates You can easily create different types of organizational chart templates and visualize them with better UI design. ## Assistants The Angular Diagram component supports defining assistants in the organizational chart. Assistants are child items that have a different relationship with the parent node. They are laid out in a dedicated part of the tree. ## Orientation Use different orientation options such as top to bottom, left to right, right to left, and bottom to top to arrange the organizational chart based on your requirements. ## Leaf-level alignment Arrange the leaf-level nodes in the organization chart to be aligned to the left, right, or center horizontally, or to the top, bottom, or middle vertically. ## Spacing The Angular Diagram component supports customizing the spacing between each level in both horizontal and vertical directions, and allows you to define a margin around the organizational chart. ## Expand and Collapse Children You can show or hide the children nodes to view only the relevant nodes in the diagram. ## Drag and Drop You can easily modify the organizational structure interactively by dragging the child or parent nodes and then dropping them on the required locations. Automatic layout algorithms 40+ interactive demos [Explore Complete Angular Comparison](https://www.syncfusion.com/pages/angular-competitive-upgrade/) ##### Angular Mind Map | Angular Diagrams Library | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-diagram/mind-map ## Overview Mind mapping is a high effective way to brainstorm and organize your thoughts organically without worrying about order and structure. It presents information where the central idea is placed in the middle and associated topics are arranged around it. The Syncfusion Angular Diagram component offers various features to make creating mind map diagrams easy. - [Mind Map documentation](https://ej2.syncfusion.com/angular/documentation/diagram/automatic-layout#mind-map-layout) ## Visualize mind maps from data sources The Syncfusion Angular Diagram component provides support to visualize mind maps from external data sources. In addition, data in any format can be easily converted, mapped, and consumed in the diagram by setting a few properties. - [Data binding documentation](https://ej2.syncfusion.com/angular/documentation/diagram/data-binding) ## Interactively design mind maps The Syncfusion Angular Diagram component also supports building mind map diagrams interactively by using mouse, touch, and keyboard interfaces. ### Shortcut keys Create mind maps easily by using shortcut keys. You can define what action will be performed based on specific key gestures. For example, Tab could be used to add a new topic, and Shift+Tab could add a new subtopic. ### Quick commands Frequently used commands can be shown as buttons near a selector. You can define actions like add or remove topic as a command for a button and perform that action by just clicking the button. ## Automatic layout algorithm A built-in automatic layout algorithm specifically made for mind map diagrams allows you to define which topic (shape or node) should be the center of the diagram, and which subtopics (shapes or nodes) should be placed around the topic in the diagram surface. ## Appearance You can easily customize the topic and subtopic appearances by adding backgrounds, border styles, text styles, and images. ## Spacing The Syncfusion Angular Diagram component supports customizing the spacing between each level in both horizontal and vertical directions. It also allows you to define a margin around the mind map diagram. ## Expand and collapse children You can show or hide children nodes and view only the relevant nodes in the diagram. ## Drag and drop You can easily modify the mind map layout interactively by dragging the topic or subtopic and then dropping it on the required topic. Automatic layout algorithms 40+ interactive demos [Explore Complete Angular Comparison](https://www.syncfusion.com/pages/angular-competitive-upgrade/) ##### Angular Charts | Different Types of Charts & Graphs | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types # Angular Chart - Different Types of Charts and Graphs - [Basic Charts](https://www.syncfusion.com#basic-charts) - [Spline charts](https://www.syncfusion.com#spline-charts) - [Step charts](https://www.syncfusion.com#step-charts) - [Stacked charts](https://www.syncfusion.com#stacked-charts) - [Range charts](https://www.syncfusion.com#range-charts) - [Correlation charts](https://www.syncfusion.com#correlation-charts) - [Circular charts](https://www.syncfusion.com#circular-charts) - [Triangular charts](https://www.syncfusion.com#triangular-charts) - [Polar & Radar Charts](https://www.syncfusion.com#polar-&-radar-charts) - [Financial Charts](https://www.syncfusion.com#financial-charts) - [Other Charts](https://www.syncfusion.com#other-charts) ### Line Chart Visualize time-dependent data to show trends at equal intervals. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) ### Column Chart Compare values across categories by using vertical bars. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) ### Area Chart Like line charts, but the area below the line is filled. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) ### Bar Chart Compare values across categories by using horizontal bars. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) ### Spline Chart Connects the data points with a smooth line. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) ### Spline Area Chart Like the area chart, but with the data points connected with a smooth line. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) ### Step line Chart Data points are connected through vertical and horizontal lines to show step-like progress. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) ### Step area Chart Like the step line chart, but with the areas connected with lines shaded. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) ### Stacked line Like the line chart, but with the data points stacked on top of each other. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) ### Stacked Bar Plots data points on top of each other using horizontal bars. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) ### Stacked Column Plots data points on top of each other using vertical bars. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) ### Stacked Area Like the area chart, but with the data points stacked on top of each other. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) ### 100% Stacked line Shows the relative percentage of multiple data series in stacked lines. The cumulative proportion of each stacked line always totals 100%. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) ### 100% Stacked Area Shows the relative percentage of multiple data series in stacked columns. The cumulative proportion of each stacked column always totals 100%. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) ### 100% Stacked Bar Shows the relative percentage of multiple data series in stacked bars. The cumulative proportion of each stacked bar always totals 100%. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) ### 100% Stacked Column Shows the relative percentage of multiple data series in stacked columns. The cumulative proportion of each stacked column always totals 100%. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) ### Range area Chart Shows variations in the data values for a given time. The area between the high and low range is filled. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) ### Spline range area Chart Similar to the range area chart, except that the data points are connected by a smooth line. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) ### Range column Chart Like the column chart, but shows the variations in the data values for a given time using vertical bars. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) ### Range step area Chart Similar to the range area chart, except that the data points are connected by a step line. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-step-area-chart) ### Scatter Scatter plot or scatter chart plots data with two numeric parameters. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) ### Bubble Visualize data with three numeric parameters. The bubble size depends on third parameter. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) ### Combination Chart / Mixed chart Combines two or more chart types in a single chart. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) ### Pie Chart Displays proportions and percentages between different categories. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) ### Donut Chart Similar to pie chart for data analysis, but with an open space at the center. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) ### Pyramid Chart Represent hierarchies visually in a pyramid-like structure that shows proportions of the total. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) ### Funnel Chart Plots streamlined data to show various stages in a process. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) ### Polar Chart Visually compare several quantitative or qualitative aspects of a situation. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) ### Radar Chart Visually compare several quantitative or qualitative aspects of a situation. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) ### Candle Chart Used in the stock market to represent the high, low, open, close values of a stock. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) ### OHLC Chart Used in the stock market to represent the high, low, open, close values of a stock. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) ### HighLow Chart Shows the high and low values of the stock over the given period of time. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/hilo-chart) ### Box and Whisker Chart Visualize a group of numerical data through its quartiles. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/box-and-whisker-chart) ### Histogram Chart Plot the frequency of occurrences in a continuous data set. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ### Pareto Chart Indicates the frequency of defects, as well as their cumulative impact. - [Learn more](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pareto-chart) ##### Interactive-chart for Angular-charts | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/interactive-chart # Angular Chart Interactive Charts and Graphs ## Overview The end user experience is greatly enhanced by including a set of user interaction features such as zooming and panning, crosshair, trackball, drill-down, events, and tooltip. You can configure these interactive chart features using the built-in APIs. ## Zooming Visualize data points in any region of the chart by zooming the region. ### Zooming Mode Zoom in and zoom out the chart through mouse wheel scrolling or through pinch gesture in touch enabled device or by using the rubber band selection. [Zooming Mode Documentation](https://ej2.syncfusion.com/angular/documentation/chart/zooming#enable-zooming) ### Zooming Direction Zoom the chart along the horizontal axis, vertical axis or both the axis. [Zooming Direction Documentation](https://ej2.syncfusion.com/angular/documentation/chart/zooming#modes) ### Zoom Toolbar Perform zoom in, zoom out, pan and reset actions quickly through zoom toolbar commands. The toolbar can be loaded initially along with the chart or on demand depending on preferences. [Zoom Toolbar Documentation](https://ej2.syncfusion.com/angular/documentation/chart/zooming#toolbar) ### Scrollbar on zooming Add scrollbars to the chart to pan or zoom it further. Customize the color, height, and border of the scrollbar using built-in APIs to make it visually unique. [Zoom Scrollbar Documentation](https://ej2.syncfusion.com/angular/documentation/chart/zooming#enable-scrollbar) ## Crosshair Inspect or target any data point on mouse move with the help of crosshair. A thin horizontal line and a vertical line indicate the data point with the information displayed in an interactive tooltip. [Crosshair Documentation](https://ej2.syncfusion.com/angular/documentation/chart/cross-hair-and-track-ball) ## Trackball Track data points that are close to the mouse position or touch contact. Trackball displays information about pop-up data with more customizable options. [Trackball Documentation](https://ej2.syncfusion.com/angular/documentation/chart/cross-hair-and-track-ball) ## Tooltip Use interactive chart tooltip to show information about the data points on mouse hover. [Tooltip Documentation](https://ej2.syncfusion.com/angular/documentation/chart/tool-tip) ## Synchronization Allows users to synchronize tooltip, zooming and panning, crosshair, highlight, and selection features across multiple charts. ## Selection Select data points in a series for easy understanding of the selected data. Adding pattern and color to the selected data makes charts more interactive. ### Point Selection Allows you to select a point in a series. Adding pattern and color to the selected data makes charts more interactive. [Point Selection Documentation](https://ej2.syncfusion.com/angular/documentation/chart/selection#point) ### Series Selection Allows you to select a series from chart series collection. Adding pattern and color to the selected series makes charts more interactive [Series Selection Documentation](https://ej2.syncfusion.com/angular/documentation/chart/selection#series) ### Cluster Selection Select a cluster of points from the series on mouse click. [Cluster Selection Documentation](https://ej2.syncfusion.com/angular/documentation/chart/selection#cluster) ### Multiple Selection Allows users to select multiple points and series in a chart. Adding patterns and colors to the selected data makes the charts more interactive. [Multiple Selection Documentation](https://ej2.syncfusion.com/angular/documentation/chart/selection#multi-region-selection) ### Range Selection Allows users to select a region with respect to both horizontal and vertical axes. [Range Selection Documentation](https://ej2.syncfusion.com/angular/documentation/chart/selection#rectangular-selection) ### Lasso selection Allows users to select a region by drawing freehand shapes. ##### Angular Technical Indicators | Angular Charts | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/technical-indicators ## Overview Use technical indicators to analyze the past and predict future market trends based on historical data, volume, or open interest. Angular chart component supports 10 different types of built-in financial technical indicators such as RSI, momentum, Bollinger bands, accumulation distribution, EMA, SMA, stochastic, ATR, MACD, and TMA indicators. ## Accumulation distribution Accumulation distribution combines price and volume to show how money may be flowing into or out of stock. [Accumulation Distribution Documentation](https://ej2.syncfusion.com/angular/documentation/chart/technical-indicators#accumulation-distribution) ## Average True Range (ATR) Measures the stock volatility by comparing the current value with the previous value using ATR indicators. Use built-in APIs to change the color and thickness of the indicator. [ATR Documentation](https://ej2.syncfusion.com/angular/documentation/chart/technical-indicators#average-true-range-atr) ## Bollinger Band A chart overlay that shows the upper and lower limits of normal price movements based on the standard deviation of prices. The look and feel of the upper line, lower line and single line can be customized. [Bollinger Band Documentation](https://ej2.syncfusion.com/angular/documentation/chart/technical-indicators#bollinger-band) ## SMA Simple moving average indicators are used to define the direction of the trend. [SMA Documentation](https://ej2.syncfusion.com/angular/documentation/chart/technical-indicators#simple-moving-average-sma) ## EMA The exponential moving average works like SMA, but it gives greater weight to more recent price moves. Use built-in APIs to change the color and thickness of the signal line. [EMA Documentation](https://ej2.syncfusion.com/angular/documentation/chart/technical-indicators#exponential-moving-average-ema) ## TMA A triangular moving average is an average of an average, creating a line on your chart that typically moves in steadier and longer waves than an SMA. [TMA Documentation](https://ej2.syncfusion.com/angular/documentation/chart/technical-indicators#triangular-moving-average-tma) ## Relative strength index (RSI) RSI shows how strongly a stock is moving in its current direction. RSI indicator will be represented by three lines (upperBand, lowerBand, and signalLine). [RSI Documentation](https://ej2.syncfusion.com/angular/documentation/chart/technical-indicators#relative-strength-index-rsi) ## Momentum Momentum shows the speed at which the price of the stock is changing. Momentum indicator will be represented by two lines (upperLine and signalLine). [Momentum Documentation](https://ej2.syncfusion.com/angular/documentation/chart/technical-indicators#momentum) ## Stochastic Shows how a stock is when compared to the previous state. Stochastic indicator will be represented by four lines (upperLine, lowerLine, periodLine, and signalLine). [Stochastic Documentation](https://ej2.syncfusion.com/angular/documentation/chart/technical-indicators#stochastic) ## Moving average convergence divergence (MACD) MACD is based on the difference between two EMAs. MACD indicator will be represented by MACD line, signal line,and MACD histogram. [MACD Documentation](https://ej2.syncfusion.com/angular/documentation/chart/technical-indicators#moving-average-convergence-divergence-macd) ##### Angular Chart Axes | Graph axis customization | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-axis # Angular Chart Customizable Chart/Graph Axis ## Overview Angular chart plot any type of data in a graph with the help of different chart axes types: numeric, category, date-time, date-time category, and logarithmic axis. And this chart axis elements can be customized further to make an axis more readable. ### Numeric axis A numeric axis is used to represent numeric data in Charts. - [Numeric axis example](https://ej2.syncfusion.com/angular/documentation/chart/numeric-axis) ### Date-time axis A date-time axis is used to represent dates in Charts and displays dates as axis labels with different formats. - [Date-time axis example](https://ej2.syncfusion.com/angular/demos/?#/bootstrap5/chart/date-time) ### Category axis A category axis is used to represent non-numerical data in Charts and displays text labels instead of numbers. - [Category axis example](https://ej2.syncfusion.com/angular/demos/?#/bootstrap5/chart/category) ### Date-time category axis A date-time category axis is used to display date values with nonlinear intervals to display business days by skipping holidays. - [Date-time category axis example](https://ej2.syncfusion.com/angular/demos/?#/bootstrap5/chart/date-time-category) ### Logarithmic axis A logarithmic scale is used to visualize data with both lower orders of magnitude (e.g., 10-6) and higher orders of magnitude (e.g., 106) in graphs. - [Logarithmic axis example](https://ej2.syncfusion.com/angular/demos/?#/bootstrap5/chart/logarithmic-scale) ## Multiple Axis Plot different types of data against different axes in the same graph with the help of the multiple axes feature. - [Multiple chart axis example](https://ej2.syncfusion.com/angular/demos/?#/bootstrap5/chart/multiple-axis) ## Chart Axis Crossing Use axis crossing for any axis to cross with an associate axis for better visualization of data. - [Chart axis crossing documentation](https://ej2.syncfusion.com/angular/documentation/chart/axis-customization#axis-crossing) ## Inversed Chart Axis Reverse the axis labels and ticks. This swaps the higher and lower ranges of a chart axis. - [Inversed chart axis documentation](https://ej2.syncfusion.com/angular/documentation/chart/axis-customization#inversed-axis) ## Opposed Axis When the chart has multiple axes, this feature arranges the axes smartly by moving them to the opposite position from their default positions. - [Opposed axis documentation](https://ej2.syncfusion.com/angular/documentation/chart/axis-customization#opposed-position) ## Synchronized Chart Use multiple panes to show different types of data with multiple chart types and axis, for clear visualization. - [Synchronized chart documentation](https://ej2.syncfusion.com/angular/documentation/chart/multiple-panes) ## Smart Chart Axis Label Avoids overlapping of chart axis labels by trimming, wrapping, rotating, hiding, or placing them on multiple rows. - [Smart axis label documentation](https://ej2.syncfusion.com/angular/documentation/chart/axis-labels#smart-axis-labels) ## Multilevel Axis Labels Organizes or groups data points in Charts based on different categories. - [Multilevel axis labels documentation](https://ej2.syncfusion.com/angular/documentation/chart/axis-labels#multilevel-labels) ## Axis Label Rotation Uses rotation to prevent chart axis labels from overlapping when the space for an axis is small. ## Axis Label Position Increase the space for rendering data points by moving the chart axis labels inside the plot area. - [Axis label position documentation](https://ej2.syncfusion.com/angular/documentation/chart/axis-labels#axis-labels-positioning) ## Smart Axis Range Adds padding to the start and end ranges of a chart axis to avoid data cropping at the edges. ## Chart Range Band Draw special attention to any region of the chart or graph with the help of strip lines. ### Horizontal Range Band Allows to shadow different ranges in vertical axis with different colors to improve the readability of chart. - [Horizontal documentation](https://ej2.syncfusion.com/angular/documentation/chart/strip-line#horizontal-strip-lines) ### Vertical Range Band Allows to shadow different ranges in for Horizontal axis with different colors to improve the readability of chart. - [Vertical documentation](https://ej2.syncfusion.com/angular/documentation/chart/strip-line#vertical-striplines) ### Recurrence Range Band Allows to shade the range repeatedly in an equal and regular interval. - [Recurrence documentation](https://ej2.syncfusion.com/angular/documentation/chart/strip-line#recurrence-stripline) ### Segment Range Band Allows to shade a region of the chart with respect to segment. - [Segment documentation](https://ej2.syncfusion.com/angular/documentation/chart/strip-line#segment-stripline) ##### Angular Line Chart | Visualize Trends with Live Data | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview The Angular Line Chart helps represent and visualize data. It shows progressions and trends at equal intervals. This chart handles large amounts of data with smooth animation, zooming, and panning support. ## Multi series Allows you to plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pentagons, crosses, and pluses. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Zoom and pan Zoom and pan when dealing with large amounts of data to visualize data points in any region. ## Dynamic line chart Create and update the line chart with live data that changes over seconds or minutes. ## Empty/null data point Angular Line Charts handle the missed data elegantly with empty points support. ## Vertical chart The line chart can be transposed vertically to view the data in a different perspective. ## Customization Customize the color, thickness, and dash array of the line chart using built-in APIs. ## Angular Line Chart Code Example Easily get started with Angular Line Chart by using a few lines of HTML and TS code, as demonstrated below. Also explore our [Angular Line Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/line) that shows how to render and configure the chart. - html - ts 'chartcontainer' //app.component.ts 'Middle East Africa' //Initializing Primary X Axis '@syncfusion/ej2-ng-charts' LineSeriesService './app.component' ## Learning Resources [Line Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/line) Learn the available options to customize Angular Line Chart. [Line Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular Line Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Column Chart - Analyze and Compare Data Easy | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview The Angular column chart is the most common chart type used to compare frequency, count, total, or average of data in different categories. It is ideal for showing variations in the value of an item over time. ## Multiple series Plot multiple series in a single chart to compare different data sets. Enabling the legend and tooltip gives readers more information about the individual series. ## Markers Mark data points with built-in shapes: circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pentagons, crosses, and pluses. In addition to these shapes, use images to make the points more attractive. ## Data labels Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Back-to-back column chart Plot data bi-directionally to compare and analyze the values clearly. ## Spacing and width Customize the spacing between two bars and the widths of the bars. ## Rounded corners Modernize the UI by applying rounded corners to the column chart. ## Grouped column Group a series with another series by giving the group a different name. ## Cylindrical columns Modernize the UI by displaying value as cylindrical-shaped data points. ## Customization Customize the look and feel of the column chart using built-in APIs. ## Angular column chart code example Easily get started with the Angular column chart using a few simple lines of HTML and TypeScript code, as demonstrated below. Also explore our [Angular column chart example](https://ej2.syncfusion.com/angular/demos/#/material/chart/column) that shows you how to render and configure the charts. - html - ts 'chartcontainer' //Initializing Primary X Axis '@syncfusion/ej2-ng-charts' ColumnSeriesService './app.component' ## Learning resources [Column Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/column) Learn the available options to customize Angular column charts. [Column chart API reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular column chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Bar Chart - Richly Animated Bar Chart | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview The Angular bar chart is one of the most common chart types used to compare different categories of data like frequency, count, total, or average displayed in horizontal bars. It is ideal for showing variations in the value of an item over time. ## Multiple series Plot multiple series in a single chart to compare different data sets. Enabling the legend and tooltip gives readers more information about the individual series. ## Markers Mark data points with built-in shapes: circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pentagons, crosses, and pluses. In addition to these shapes, use images to make the points more attractive. ## Data labels Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Back-to-back bar chart Plot data bi-directionally to compare and analyze the values clearly. ## Spacing and width Customize the spacing between two bars and the widths of the bars. ## Rounded corners Modernize the UI by applying rounded corners to the bar chart. ## Grouped bar Group a series with another series by giving the group a different name. ## Cylindrical bar Modernize the UI by displaying value as cylindrical-shaped data points. ## Customization Customize the look and feel of the bar chart using built-in APIs. ## Angular bar chart code example Easily get started with Angular bar chart using a few simple lines of HTML and TypeScript code, as demonstrated below. Also explore our [Angular bar chart example](https://ej2.syncfusion.com/angular/demos/#/material/chart/bar) that shows you how to render and configure the chart. - html - ts 'chartcontainer' //app.component.ts //Initializing Primary X Axis '@syncfusion/ej2-ng-charts' BarSeriesService './app.component' ## Learning resources [Bar Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/bar) Learn the available options to customize Angular bar charts. [Bar chart API reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular bar chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Area Chart - Create Customizable Area Chart | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview Angular Area Chart is like a line chart that represents time-dependent data and shows the trends at equal intervals, but it fills the area below the line. Uses numeric, category, datetime, or logarithmic axis to plot data. ## Multi series Allows you to plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pentagons, crosses, and pluses. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Zoom and pan Enable zooming and panning support when dealing with large amount of data to visualize the data point in any region. ## Empty/null data point Handle the missed data elegantly with empty points support. ## Vertical chart The Angular Area Chart can be transposed vertically to view the data in a different perspective. ## Customization Customize the color and border of the area chart using built-in APIs. ## Angular Area Chart Code Example Easily get started with Angular Area Chart using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular Area Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/area) that shows you how to render and configure the chart. - html - ts 'chartcontainer' //app.component.ts //Initializing Primary X Axis '@syncfusion/ej2-ng-charts' AreaSeriesService './app.component' ## Learning Resources [Area Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/area) Learn the available options to customize Angular Area Chart. [Area Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular Area Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Spline Chart & Graph | Angular Charts | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview Angular Spline Chart connects data points with smooth lines. It uses numeric, category, date-time, and logarithmic axes to plot data. ## Multi series Allows you to plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Marker Mark data points with built-in shapes: circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pentagons, crosses, and pluses. In addition to these shapes, use images to make the points more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by a given angle. ## Multiple axes Use multiple axes to plot different data sets that vary widely from each other. ## Zoom and pan Enable zooming and panning when dealing with large amounts of data to focus on particular ranges. ## Dynamic spline chart Create and update the spline chart with live data that changes in seconds or minutes. ## Empty/null data point Handle missing data elegantly with empty points support. ## Vertical chart The Angular Spline Chart can be transposed vertically to view the data from a different perspective. ## Customization Customize the color, thickness, and dash array of the spline chart using built-in APIs. ## Angular Spline Chart Code Example Easily get started with Angular Spline using a few simple lines of JS code, as demonstrated below. Also explore our [Angular Spline Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/spline) that shows you how to render and configure the spline chart component. - html - ts 'chartcontainer' //app.component.ts //Initializing Primary X Axis '@syncfusion/ej2-ng-charts' SplineSeriesService './app.component' ## Learning Resources [Spline Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/spline) Learn the available options to customize Angular Spline Chart. [Spline Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular Spline Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Spline Area Chart & Graph | Angular Charts | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview The Angular Spline Area Chart is like an area chart except that the data points are connected by smooth lines. It supports features like zooming, panning, animation, and dynamic updates. ## Multi series Multi area series are useful to compare two or more cumulative values over a period. ## Marker Mark data points with built-in shapes: circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pentagons, crosses, and pluses. In addition to these shapes, use images to make the points more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by a given angle.. ## Multiple axes Use multiple axes to plot different data sets that vary widely from each other. ## Zoom and pan Enable zooming and panning when dealing with large amounts of data to focus on particular ranges. ## Empty/null data point Handle missing data elegantly with empty points support. ## Vertical chart The Angular Spline Area Chart can be transposed vertically to view the data from a different perspective. ## Customization Customize the color and border of the Angular Spline Area Chart using built-in APIs. ## Angular Spline Area Chart Code Example Easily get started with Angular Spline Area using a few simple lines of JS code, as demonstrated below. Also explore our [Angular Spline Area Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/spline-area) that shows you how to render and configure the spline area chart component. - html - ts 'chartcontainer' //app.component.ts //Initializing Primary X Axis // app.module.ts '@syncfusion/ej2-ng-charts' SplineAreaSeriesService './app.component' ## Learning Resources [Spline Area Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/spline-area) Learn the available options to customize Angular Spline Area Chart. [Spline Area Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular Spline Area Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Spline Range Area Chart & Graph | Angular Charts | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview The Angular Spline Range Area Chart is used to display continuous data points as a set of splines that vary between high and low values over intervals of time and across different categories. ## Marker Mark data points with built-in shapes: circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pentagons, crosses, and pluses. In addition to these shapes, use images to make the points more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by a given angle. ## Empty/null data point Handle missing data elegantly with empty points support. ## Vertical chart The Angular Spline Range Area Chart can be transposed vertically to view the data from a different perspective. ## Customization Customize the color and border of the Angular Spline Range Area Chart using built-in APIs. ## Zoom and pan Enable zooming and panning support when dealing with large amounts of data to visualize a data point in any region. ## Angular Spline Range Area Chart Code Example Easily get started with Angular Spline Range Area using a few simple lines of JS code, as demonstrated below. Also explore our [Angular Spline Range Area Chart Example](https://ej2.syncfusion.com/demos/#/material/chart/spline-range-area.html) that shows you how to render and configure the spline range area chart component. - html - js 'chartcontainer' 'SplineRangeArea' //Initializing Primary X Axis '@syncfusion/ej2-ng-charts' SplineRangeAreaSeriesService './app.component' ## Learning Resources [Spline Range Area Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/spline-range-area) Learn the available options to customize Angular spline range area chart. [Spline Range Area Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular spline range area chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Step Line Chart & Graphs | Angular Charts | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview The Angular step line chart is like a line chart except that the data points are connected using vertical and horizontal lines, showing a step-like progress. Supports features like zooming, panning, animation, and dynamic updates. ## Multi series Allows you to plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pentagons, crosses, and pluses. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Zoom and pan Enable zooming and panning support when dealing with large amount of data to visualize the data point in any region. ## Dynamic stepline chart Create and update the stepline chart with live data that changes over seconds or minutes. ## Empty/null data point Handle the missed data elegantly with empty points support. ## Vertical chart The Angular Stepline Chart can be transposed vertically to view the data in a different perspective. ## Customization Customize the color, thickness, and dash array of the stepline chart using built-in APIs. ## Code snippet Easily get started with Angular Step Line using a few simple lines of JS code, as demonstrated below. Also explore our [Angular Step Line Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/step-line) that shows you how to render and configure the spline area chart component. - html - ts 'chartcontainer' //app.component.ts //Initializing Primary X Axis '@syncfusion/ej2-ng-charts' StepLineSeriesService './app.component' ## Learning Resources [Stepline Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/step-line) Learn the available options to customize Angular Stepline Chart. [Stepline Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular Stepline Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Step Area Chart & Graph | Angular Charts |Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview The Angular Step Area chart is like a step line chart except that the area connected through vertical and horizontal lines are shaded with color. Supports features like zooming, panning, animation, and dynamic updates. ## Multi series Allows you to plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pentagons, crosses, and pluses. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Zoom and pan Enable zooming and panning support when dealing with large amount of data to visualize the data point in any region. ## Empty / Null Data Point Handle the missed data elegantly with empty points support. ## Vertical Chart The Angular Step Area Chart can be transposed vertically to view the data in different perspective. ## Customization Customize the color and border of the area chart using built-in APIs. ## Code snippet Easily get started with Angular Step Area using a few simple lines of JS code, as demonstrated below. Also explore our [Angular Step Area Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/step-area) that shows you how to render and configure the spline area chart component. - html - ts 'chartcontainer' //app.component.ts '@syncfusion/ej2-ng-charts' StepAreaSeriesService './app.component' ## Learning Resources [Step Area Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/step-area) Learn the available options to customize the Angular Step Area Chart. [Step Area Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular Step Area Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Stacked Bar Chart & Graph | Angular Charts |Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview Angular stacked bar chart is a chart with y-values stacked on one another in series order. It shows the relationship among individual values to the total of the points. ## Multi series You can plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Marker Mark data points with built-in shapes: circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pentagons, crosses, and pluses. In addition to these shapes, use images to make the points more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by a given angle. ## Multiple axes Use multiple axes to plot different data sets that vary widely from each other. ## Stacking group Group a series with another series separately using a different group name. ## Spacing and width Customize spacing between two bars and the width of the bars. ## Rounded corners Modernize the UI by applying rounded corners to the stacked bar. ## Cylindrical stacked bar Modernize the UI by displaying value as cylindrical-shaped data points. ## Customization Customize the look and feel of the stacked bar chart using built-in APIs. ## Angular Stacked Bar Chart Code Example Easily get started with Angular Stacked Bar using a few simple lines of JS code, as demonstrated below. Also explore our [Angular Stacked Bar Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/stacked-bar) that shows you how to render and configure the stacked bar chart component. - html - ts 'chartcontainer' //app.component.ts //Initializing Primary X Axis '@syncfusion/ej2-ng-charts' StackingBarSeries './app.component' ## Learning Resources [Stacked Bar Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/stack-bar) Learn the available options to customize Angular Stacked Bar Chart. [Stacked Bar Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular Stacked Bar Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Stacked Column Chart & Graph | Angular Charts |Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview The Angular stacked column chart is a chart with x-values stacked on one another in series order. It shows the relationship among individual values to the total of the points. ## Multi series You can plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Marker Mark data points with built-in shapes: circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pentagons, crosses, and pluses. In addition to these shapes, use images to make the points more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by a given angle. ## Multiple axes Use multiple axes to plot different data sets that vary widely from each other. ## Stacking group Group a series with another series separately using a different group name. ## Spacing and width Customize spacing between two bars and the width of the bars. ## Rounded corners Modernize the UI by applying rounded corners to the stacked bar. ## Cylindrical stacked columns Modernize the UI by displaying value as cylindrical-shaped data points. ## Customization Customize the look and feel of the stacked column chart using built-in APIs. ## Angular Stacked Column Chart Code Example Easily get started with Angular Stacked Column using a few simple lines of JS code, as demonstrated below. Also explore our [Angular Stacked Column Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/stacked-column) that shows you how to render and configure the stacked column chart component. - html - ts 'chartcontainer' 'StackingColumn' //app.component.ts //Initializing Primary X Axis '@syncfusion/ej2-ng-charts' StackingColumnSeries './app.component' ## Learning Resources [Stacked Column Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/stack-column) Learn the available options to customize Angular Stacked Column Chart. [Stacked Column Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular Stacked Column Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Beautiful HTML5 Angular Stacked Line Chart & Graph | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview Angular Stacked line chart is a chart with Y values stacked over one another in the series order. Shows the relation between individual values to the total sum of the points. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pentagons, crosses, and pluses. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Customization Customize the look and feel of the stacked line chart using built-in APIs. ## Code snippet Easily get started with Angular Stacked Line using a few simple lines of JS code, as demonstrated below. Also explore our [Angular Stacked Line Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/stacked-line) that shows you how to render and configure the spline area chart component. - html - js 'chartcontainer' //Initializing Primary X Axis '@syncfusion/ej2-ng-charts' StackingColumnLineService './app.component' StackingLineSeriesService ## Learning Resources [Stacked Line Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/stack-line) Learn the available options to customize Angular Stacked Line Chart. [Stacked Line Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular Stacked Line Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular 100% Stacked Area Chart & Graph | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview Angular 100% Stacked Area Chart displays multiple series of data as stacked areas, ensuring that the cumulative proportion of each stacked element always totals 100%. The y-axis will hence always be rendered with the range 0–100. ## Multi series Allows you to plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pentagons, crosses, and pluses. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Zoom and pan Enable zooming and panning support when dealing with large amount of data to visualize the data point in any region. ## Empty/null data point Handle the missed data elegantly with empty points support. ## Vertical chart The Angular 100% Stacked Area Chart can be transposed vertically to view the data in different perspective. ## Customization Customize the color and border of the 100% stacked area chart using built-in APIs. ## Code snippet Easily get started with Angular 100% Stacked Area Chart using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular 100% Stacked Area Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/stacked-area-percent) that shows you how to render and configure the chart. - html - ts 'chartcontainer' 'StackingArea100' // app.component.ts //Initializing Primary X Axis // app.module.ts '@syncfusion/ej2-ng-charts' StackingAreaSeriesService './app.component' ## Learning Resources [100% Stacked Area Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/stacked-area) Learn the available options to customize Angular 100% Stacked Area Chart. [100% Stacked Area Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular 100% Stacked Area Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular 100% Stacked Bar Chart & Graph | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview Angular 100% Stacked Bar Chart displays multiple series of data as stacked bars, ensuring that the cumulative proportion of each stacked element always totals 100%. Hence, the y-axis will always be rendered with the range 0–100. ## Multi series Allows you to plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pentagons, crosses, and pluses. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Stacking group Allows grouping a series with another series separately using a different group name. ## Spacing and width The Angular 100% Stacked Bar Chart provides an option to customize the spacing between two bars and width of the bar. ## Rounded corners Modernize the UI by applying rounded corners to the 100% stacked bar ## 100% Cylindrical stacked bar Modernize the UI by displaying value as cylindrical-shaped data points. ## Customization Customize the look and feel of the 100% stacked bar chart using built-in APIs. ## Code snippet Easily get started with Angular 100% Stacked Bar Chart using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular 100% Stacked Bar Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/stacked-bar-percent) that shows you how to render and configure the chart. - html - ts 'chartcontainer' 'StackingBar100' // app.component.ts //Initializing Primary X Axis // app.module.ts '@syncfusion/ej2-ng-charts' StackingBarSeriesService './app.component' ## Learning Resources [100% Stacked Bar Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/stack-bar) Learn the available options to customize Angular 100% Stacked Bar Chart. [100% Stacked Bar Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular 100% Stacked Bar Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular 100% Stacked Column Chart & Graph | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview Angular 100% stacked column chart displays multiple series of data as stacked bars, ensuring that the cumulative proportion of each stacked element always totals 100%. Hence, the y-axis will always be rendered with the range 0–100. ## Multi series Allows you to plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pentagons, crosses, and pluses. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Stacking group Allows you to group a series with another series separately using a different group name. ## Spacing and width The Angular 100% Stacked Column Chart provides an option to customize the spacing between two column and width of the column. ## Rounded corners Modernize the UI by applying rounded corners to the 100% stacked column ## 100% Cylindrical stacked column Modernize the UI by displaying value as cylindrical-shaped data points. ## Customization Customize the look and feel of the 100% stacked column chart using built-in APIs. ## Code snippet Easily get started with Angular 100% Stacked Column Chart using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular 100% Stacked Column Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/stacked-column-percent) that shows you how to render and configure the chart. - html - ts 'chartcontainer' 'StackingColumn100' //app.component.ts //Initializing Primary X Axis '@syncfusion/ej2-ng-charts' StackingColumnSeriesService './app.component' ## Learning Resources [100% Stacked Column Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/stack-column) Learn the available options to customize Angular 100% Stacked Column Chart. [100% Stacked Column Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular 100% Stacked Column Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular 100% Stacked Area Chart & Graph | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview Angular 100% Stacked Area Chart displays multiple series of data as stacked areas, ensuring that the cumulative proportion of each stacked element always totals 100%. The y-axis will hence always be rendered with the range 0–100. ## Multi series Allows you to plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Marker Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pentagons, crosses, and pluses. In addition to these shapes, use images to make the point more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Zoom and pan Enable zooming and panning support when dealing with large amount of data to visualize the data point in any region. ## Empty/null data point Handle the missed data elegantly with empty points support. ## Vertical chart The Angular 100% Stacked Area Chart can be transposed vertically to view the data in different perspective. ## Customization Customize the color and border of the 100% stacked area chart using built-in APIs. ## Code snippet Easily get started with Angular 100% Stacked Area Chart using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular 100% Stacked Area Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/stacked-area-percent) that shows you how to render and configure the chart. - html - ts 'chartcontainer' 'StackingArea100' // app.component.ts //Initializing Primary X Axis // app.module.ts '@syncfusion/ej2-ng-charts' StackingAreaSeriesService './app.component' ## Learning Resources [100% Stacked Area Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/stacked-area) Learn the available options to customize Angular 100% Stacked Area Chart. [100% Stacked Area Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular 100% Stacked Area Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Range Area Chart & Graph | Angular Charts | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview The Angular range area chart is used to show variation in data values for a given time. It is like the area series, except that the area between the high and low ranges is filled. ## Marker Mark data points with built-in shapes: circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pentagons, crosses, and pluses. In addition to these shapes, use images to make the points more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by a given angle. ## Empty/null data point Handle missing data elegantly with empty points support. ## Vertical chart The Angular range area chart can be transposed vertically to view the data from a different perspective. ## Customization Customize the color and border of the range area chart using built-in APIs. ## Zoom and pan Enable zooming and panning when dealing with large amounts of data to focus on particular ranges. ## Angular Range Area Chart Code Example Easily get started with Angular Range Area using a few simple lines of JS code, as demonstrated below. Also explore our [Angular Range Area Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/range-area) that shows you how to render and configure the range area chart component. - html - ts 'chartcontainer' //app.component.ts //Initializing Primary X Axis '@syncfusion/ej2-ng-charts' RangeAreaSeriesService './app.component' ## Learning Resources [Range Area Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/range-area) Learn the available options to customize Angular Range Area Chart. [Range Area Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular Range Area Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Range Column Chart & Graph | Angular Charts | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview The Angular Range Column Chart is used to show variation in the data values for a given time. These charts support UI customization. ## Marker Mark data points with built-in shapes: circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pentagons, crosses, and pluses. In addition to these shapes, use images to make the points more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by a given angle. ## Spacing and width The Angular Range Column Chart provides an option to customize the spacing between two columns and the width of the column. ## Empty/null data point Handle missing data elegantly with empty points support. ## Vertical chart The Angular Range Column Chart chart can be transposed vertically to view the data from a different perspective. ## Customization Customize the color and border of the Angular Range Column Chart using built-in APIs. ## Angular Range Column Chart Code Example Easily get started with Angular Range Column using a few simple lines of JS code, as demonstrated below. Also explore our [Angular Range Column Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/range-column) that shows you how to render and configure the range column chart component. - html - ts 'chartcontainer' //app.component.ts //Initializing Primary X Axis '@syncfusion/ej2-ng-charts' RangeColumnSeriesService './app.component' ## Learning Resources [Range Column Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/range-column) Learn the available options to customize Angular Range Column Chart. [Range Column Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular Range Column Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Range Step Area Chart & Graph | Angular Charts | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-step-area-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview The Angular Range Step Area Chart is used to display continuous data points as a set of steps that vary between high and low values over intervals of time and across different categories. ## Marker Mark data points with built-in shapes: circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pentagons, crosses, and pluses. In addition to these shapes, use images to make the points more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by a given angle. ## Empty/null data points Handle missing data elegantly with empty points support. ## Vertical charts The Angular Range Step Area Chart can be transposed vertically to view data from a different perspective. ## Customization Customize the color and border of the Angular Range Step Area Chart using built-in APIs. ## Zoom and pan Enable zooming and panning support when dealing with large amounts of data to visualize data points in any region. ## Angular Range Step Area Chart code example Easily get started with Angular Range Step Area using a few simple lines of HTML and TS code, as demonstrated below. Also explore our [Angular Range Step Area Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/range-step-area) that shows you how to render and configure the range step area chart component. - html - ts - js 'chartcontainer' //Initializing Primary X Axis '@syncfusion/ej2-ng-charts' RangeStepAreaSeriesService './app.component' ## Learning Resources [Range Step Area Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/range-step-area) Learn the available options to customize Angular Range Step Area Charts. [Range Step Area Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular Range Step Area Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Scatter Chart & Graph | Angular Charts | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview The Angular scatter chart is used to plot data with two numeric parameters. Also referred to as a scatter plot or point chart, its rich feature set includes tooltip, multiple axes, zooming, and panning. ## Multiple series scatter plot Plot multiple scatter series in a single chart to compare different data sets. A legend and tooltip for the series can make it more readable. ## Custom marker Use different types of symbols to display the data points in a scatter plot. This will be useful in differentiating multiple series and points in the same chart. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by a given angle. ## Customization Customize the look and feel of the scatter chart using built-in APIs. ## Angular Scatter Chart Code Example Easily get started with Angular Scatter using a few simple lines of JS code, as demonstrated below. Also explore our [Angular Scatter Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/scatter-plot) that shows you how to render and configure the scatter chart component. - html - ts 'chartcontainer' //app.component.ts 'Middle East Africa' //Initializing Primary X Axis '@syncfusion/ej2-ng-charts' ScatterSeriesService './app.component' ## Learning Resources [Scatter Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/scatter) Learn the available options to customize Angular Scatter Chart. [Scatter Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular Scatter Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Bubble Chart - Visualize the Relationships | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview The Angular Bubble Chart is like a scatter chart, but it allows visualization of data in 3 dimensions. The size of the bubble is determined based on the third parameter. Users can customize the data points in the bubble. ## Customizing each point in bubble Appearance of each data point in a bubble chart can be customized using point render event to differentiate each point based on the size. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Angular Bubble Chart Code Example Easily get started with Angular Bubble Chart using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular Bubble Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/bubble) that shows you how to render and configure the chart. - html - ts 'chartcontainer' //app.component.ts '@syncfusion/ej2-ng-charts' BubbleSeriesService './app.component' ## Learning Resources [Bubble Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/bubble) Learn the available options to customize Angular Bubble Chart. [Bubble Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular Bubble Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Combination Chart | Mixed Chart | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview Angular Combination Chart combines two or more chart types into a single chart to compare different data sets. Supports zooming, panning, tooltip, trackball, and selection. ## Combination of line, area, and column chart You can create multiple series of different types in the same chart. Legend and tooltip for the series make it more readable. ## Pareto chart Pareto chart is the combination of line and column charts. The column represents data in the descending order, whereas the line chart represents the cumulative value of the data. ## Combination of Candle with Column/Line You can combine Candle with line or column chart to show additional parameters in financial analysis. For example, volume of the stock can be viewed with the help of column chart. ## Angular Combination Chart Code Example Easily get started with Angular Combination Chart using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular Combination Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/pare-to) that shows you how to render and configure the chart. - html - ts 'chartcontainer' //app.component.ts '@syncfusion/ej2-ng-charts' LineSeriesService ColumnSeriesService './app.component' ## Learning Resources [Combination Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/pareto) Learn the available options to customize Angular Combination Chart. [Combination Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular Combination Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Pie Chart | Richly Animated Pie Charts | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview The Angular Pie Chart is a circular graphic with multiple slices, which is used for comparing the proportional values of different categories. ## Pie legend Legends are used to show information about each point, to know about its contribution towards the total sum. You can collapse the point using legend click. ## Custom radius Customize the radius of the pie to change the look and functionality of the chart. - [Pie Chart radius customization documentation](https://ej2.syncfusion.com/angular/documentation/accumulation-chart/pie-dough-nut#radius-customization) ## Start and end angles Customize the start and end angles of the chart to achieve a semi-pie. - [Start and end angle documentation](https://ej2.syncfusion.com/angular/documentation/accumulation-chart/pie-dough-nut#start-and-end-angles) ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Smart labels Arrange data labels smartly to avoid overlapping when the data point values fall in a close range. ## Grouped points Group the points in a pie chart based on specific conditions. The grouped slices can be split into individual points by clicking the slice. ## Drilldown operation Users click a specific bar or segment of a chart to drill-down to a more detailed report. ## Different radius Customize the radius of individual slice using built-in APIs. ## Pie center The Angular Pie Chart’s center moves relative to the plot area. Labels may jump around when there are many slices in the plot area and the center can be set in a more spacious area. - [Pie Center documentation](https://ej2.syncfusion.com/angular/documentation/accumulation-chart/pie-dough-nut#pie-center) ## Center label Place a label at the center of the pie chart. Also, when the mouse pointer hovers over a pie slice, the relevant data is displayed at the center of the pie chart. ## Customization Customize the look and feel of the pie using built-in APIs. ## Angular Pie Chart Code Example Easily get started with Angular Pie Chart by using a few lines of HTML and TS code, as demonstrated below. Also explore our [Angular Pie Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/default-pie) that shows how to render and configure the chart. - html - ts //app.component.ts AccumulationChartModule '@syncfusion/ej2-ng-charts' PieSeriesService './app.component' ## Learning Resources [Pie Chart User Guide](https://ej2.syncfusion.com/angular/documentation/accumulation-chart/pie-dough-nut) Learn the available options to customize the Angular Pie Chart. [Pie Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationseries#type) Explore the Angular Pie Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Donut Chart - Visualize the Proportions Easy | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview Angular Donut Chart is like a Pie Chart, except for the space at the center. It is useful for when you want to compare the contribution of each data with the total. ## Custom inner radius You can customize the inner radius of the chart to make it pleasing. Making inner radius to 0 will change the doughnut to pie chart. You can customize both the radius and inner radius of the doughnut. ## Doughnut Legend Legends are used to show the information about each point to know about its contribution towards the total sum. You can collapse the point using legend click. ## Start and End Angle Customize the start and end angle of the chart to achieve the semi-pie. ## Data Label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Smart labels Arranges data labels smartly to avoid overlapping when the data point values fall in close range. ## Grouped points Group the points in pie chart based on some condition. The grouped slices can be split into individual points by clicking the slice. ## Drilldown Operation Focus-in on the data within the data using drilldown operation. ## Different radius Customize the radius of individual slice using built-in APIs. ## Donut Center Move the center of the donut relative to the plot area. ## Center label Place a label at the center of the donut chart. Also, when the mouse pointer hovers over a donut slice, the relevant data is displayed at the center of the donut chart. ## Customization Customize the look and feel of the doughnut using built-in APIs. ## Angular Doughnut Chart Code Example Easily get started with Angular Doughnut Chart using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular Doughnut Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/donut) that shows you how to render and configure the chart. - html - ts //app.component.ts AccumulationChartModule @syncfusion/ej2-ng-charts PieSeriesService ## Learning Resources [Doughnut Chart User Guide](https://ej2.syncfusion.com/angular/documentation/accumulation-chart/pie-dough-nut#doughnut-chart) Learn the available options to customize the Angular Doughnut Chart. [Doughnut Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart) Explore the Angular Doughnut Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Pyramid Chart | High Performance Charts | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview The Angular Pyramid Chart is a hierarchical structure that has data in the form of triangles divided into sections, and each section with a related dataset. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Exploding slices Data points can be exploded on rendering and on mouse click. - [Explode documentation](https://ej2.syncfusion.com/angular/documentation/accumulation-chart/pyramid/#explode) ## Grouped points Group the points in a pyramid chart based on specific conditions. The grouped slices can be split into individual points by clicking the slices. ## Customization Customize the look and feel of the pyramid chart using built-in APIs. ## Angular Pyramid Chart Code Example Easily get started with Angular Pyramid Chart by using a few lines of HTML and TS code, as demonstrated below. Also explore our [Angular Pyramid Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/pyramid) that shows how to render and configure the Pyramid chart in Angular. - html - ts //app.component.ts AccumulationChartModule '@syncfusion/ej2-ng-charts' PyramidSeriesService './app.component' ## Learning Resources [Pyramid Chart User Guide](https://ej2.syncfusion.com/angular/documentation/accumulation-chart/pyramid) Learn the available options to customize Angular Pyramid Chart. [Pyramid Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationseries#type) Explore the Angular Pyramid Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Funnel Chart - Visualize Data Easily | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview Angular Funnel Chart is like a pyramid, with two parts, the higher part called head and the lower part, neck. Funnel charts are often used to represent stages in a sales process and show the amount of potential revenue for each stage. ## Custom neck Customize the height and width of the funnel to change the look and feel. Changing the width and height of the neck to zero makes funnel chart look like an inverted pyramid. ## Data label Show details about the data points with the help of data label support. You can place the label inside and outside the chart. Connector lines can be used to connect the outside label with charts. You can rotate the data label by its given angle. ## Point explode Data points can be exploded on rendering and on mouse click. ## Grouped points Group the points in a funnel chart based on certain conditions. The grouped slices can be split into individual points by clicking the slice. ## Customization Customize the look and feel of the funnel chart using built-in APIs. ## Angular Funnel Chart Code Example Easily get started with Angular Funnel Chart using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular Funnel Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/funnel) that shows you how to render and configure the chart. - html - ts //app.component.ts AccumulationChartModule '@syncfusion/ej2-ng-charts' FunnelSeriesService './app.component' ## Learning Resources [Funnel Chart User Guide](https://ej2.syncfusion.com/angular/documentation/accumulation-chart/funnel) Learn the available options to customize Angular Funnel Chart. [Funnel Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationseries#type) Explore the Angular Funnel Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Polar Chart | Beautiful and Interactive Chart | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview The Angular Polar Chart visualizes data in terms of values and angles. It provides options for visual comparison between several quantitative or qualitative aspects of a situation. It supports interactive features such as selection and tooltip. ## Inverted axis The Angular Polar Chart provides an option to reverse the axis labels and ticks. This swaps the higher and lower ranges of an axis. ## Start angle Customize the start angle of the chart to rotate it. ## Marker Mark data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pentagons, crosses, and pluses. In addition to these shapes, use images to make the points more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Chart types Supports different types of series like line, column, spline, range area, scatter, and stacked area. ## Wind Rose Chart You can create a wind rose chart with the help of stacked column series in polar and radar charts. ## Angular Polar Chart Code Example Easily get started with Angular Polar Chart by using a few lines of HTML and TS code, as demonstrated below. Also explore our [Angular Polar Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/polar-line) that shows how to render and configure the chart. - html - ts 'chartcontainer' //app.component.ts // {x: 'China', y: 9635, y1: 10535, y2: 11226, y3: 11218}, //Initializing Primary X Axis '@syncfusion/ej2-ng-charts' PolarSeriesService LineSeriesService './app.component' ## Learning Resources [Polar Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/polar) Learn the available options to customize the Angular Polar Chart. [Polar Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular Polar Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Radar Chart | Feature - Rich Interactive Chart | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview The Angular Radar Chart visualizes data in terms of values and angles. It provides options for visual comparison between several quantitative or qualitative aspects of a situation. It supports interactive features such as selection and tooltip. ## Inverted axis The Angular Radar Chart provides an option to reverse the axis labels and ticks. This swaps the higher and lower ranges of an axis. ## Start angle Customize the start angle of the chart to rotate it. ## Marker Mark data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pentagons, crosses, and pluses. In addition to these shapes, use images to make the points more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Chart types Supports different types of series like line, column, spline, range area, scatter, and stacked area. ## Wind Rose Chart You can create a wind rose chart with the help of stacked column series in polar and radar charts. ## Angular Radar Chart Code Example Easily get started with Angular Radar Chart by using a few lines of HTML and TS code, as demonstrated below. Also explore our [Angular Radar Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/polar-spline) that shows how to render and configure the chart. - html - ts 'chartcontainer' //app.component.ts // {x: 'China', y: 9635, y1: 10535, y2: 11226, y3: 11218}, //Initializing Primary X Axis '@syncfusion/ej2-ng-charts' RadarSeriesService LineSeriesService './app.component' ## Learning Resources [Radar Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/radar) Learn the available options to customize the Angular Radar Chart. [Radar Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular Radar Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Stock Chart | Financial Chart | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview Angular Stock Chart, also known as the Angular Candlestick Chart is mostly used in the stock market to represent the high, low, open, and close values of the stock. Supports interactive trackball, crosshair feature to track information on data. ## Hollow and filled Candlestick Chart A filled Angular Candlestick Chart is drawn when the stock closes lower than the opening price, representing the open price at the top and close price at the bottom. ## Multi series Use multi-series Candlestick to represent two or more data set, each data set representing high, low, open, and close values. ## Combination for Candlestick with another chart Use line and column chart along with candle chart to show the close and volume of the data. ## Multiple pane Allows you to render the stock price in different panes of the chart. Visualize the candle values in one pane and the volume in a different pane. ## Candle chart with Range selector You can use the range selector along with financial chart to filter and navigate through a large number of data points. ## Bull and bear Customizable bull and bear colors. ## Angular Stock Chart Code Example Easily get started with Angular Stock Chart using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular Stock Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/candle-stick) that shows you how to render and configure the chart. - html - ts 'chartcontainer' //app.component.ts //Initializing Primary X Axis '@syncfusion/ej2-ng-charts' CandleSeriesService './app.component' ## Learning Resources [Candle Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/candle) Learn the available options to customize Angular Stock Chart. [Candle Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular Stock Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular OHLC Chart | Visualize Stock Data Easily | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview Angular OHLC Chart is like a candle chart. The horizontal lines at the left and right are used to show open and close values of the stock, and the vertical line represents high and low values. They are easily customizable and supports interactive features such as trackball, tooltip, selection, and zooming to track information of the data. ## Multi series Plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Multiple pane Render the stock prices in different panes of a chart. Visualize the OHLC values in one pane and the volume in another pane. ## OHLC chart with Range selector You can use the range selector along with a financial chart to filter and navigate through a large number of data points. ## Bull and bear Customize bull and bear colors. ## Zoom and pan Zoom and pan when dealing with large amounts of data to visualize data points in any region. ## Angular OHLC Chart Code Example Easily get started with Angular OHLC Chart by using a few lines of HTML and TS code, as demonstrated below. Also explore our [Angular OHLC Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/hilo-open-close) that shows how to render and configure the chart. - html - ts 'chartcontainer' //app.component.ts //Initializing Primary X Axis '@syncfusion/ej2-ng-charts' HiloOpenCloseSeriesService './app.component' ## Learning Resources [OHLC Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/high-low-open-close) Learn the available options to customize Angular OHLC Chart. [OHLC Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular OHLC Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular HiLo Chart | High Performance Chart | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/hilo-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview The Angular HiLo Chart is similar to OHLC (Open-High-Low-Close chart), but shows the high and low values of the stock over a given period of time. ## Multi series Plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Customization Customize the color and thickness of the HiLo chart using built-in APIs. ## Angular HiLo Chart Code Example Easily get started with Angular HiLo Chart by using a few lines of HTML and TS code, as demonstrated below. Also explore our [Angular HiLo Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/hilo) that shows how to render and configure the chart. - html - ts 'chartcontainer' //app.component.ts //Initializing Primary X Axis '@syncfusion/ej2-ng-charts' HiloSeriesService './app.component' ## Learning Resources [HiLo Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/high-low) Learn the available options to customize Angular HiLo Chart. [HiLo Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular line HiLo Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Box & Whisker Chart & Graph | Angular Charts | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/box-and-whisker-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview Angular Box and Whisker chart is used to visualize a group of numerical data through their quartiles. It is also referred as box plot. Box plots may also have lines extending vertically from the boxes (whiskers) indicating variability outside the upper and lower quartiles. ## Box plot mode Supports different types of rendering mode such us exclusive, inclusive, and normal. ## Outlier Represent the values that are lying beyond the minimum and maximum values of the data point with outlier. Usually represented with a circle. ## Show mean Show meanAllows you to enable or disable the average value of box plot. ## Multiple axes Use multiple axes to plot different data sets that widely vary from one other. ## Multi series Allows you to plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Customization Customize the color, thickness, and border of the box plot with in APIs to make it visually unique. ## Code snippet Easily get started with Angular Box and Whisker Chart using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular Box and Whisker Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/box-and-whisker) that shows you how to render and configure the chart. - html - ts 'chartcontainer' // app.component.ts //Initializing Primary X Axis '@syncfusion/ej2-ng-charts' BoxAndWhiskerSeriesService './app.component' ## Learning Resources [Box and Whisker Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/box-whisker) Learn the available options to customize Angular Box and Whisker Chart. [Box and Whisker Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular Box and Whisker Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Histogram Chart | High Performance Chart | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview The Angular Histogram Chart is a bar (column) chart used for frequency distribution where the widths of bars are proportional to classes into which variables have been divided and the heights of the bars are proportional to class frequencies. ## Distribution curve Provides a graphical representation of the normal distribution of data. ## Marker Mark data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pentagons, crosses, and pluses. In addition to these shapes, use images to make the points more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Vertical chart The Angular Histogram Chart can be transposed vertically to view the data in a different perspective. ## Customization Customizes the color and border of the histogram chart using built-in APIs to make it visually unique. ## Angular Histogram Chart Code Example Easily get started with Angular Histogram Chart by using a few lines of HTML and TS code, as demonstrated below. Also explore our [Angular Histogram Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/histogram) that shows how to render and configure the chart. - html - ts 'chartcontainer' //app.component.ts //Initializing Primary X Axis '@syncfusion/ej2-ng-charts' StackingAreaSeriesService './app.component' ## Learning Resources [Histogram Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/histogram) Learn the available options to customize Angular Histogram Chart. [Histogram Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular Histogram Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Pareto Chart | High Performance Chart | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/pareto-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview A Pareto chart is a type of chart that contains both bars and a line graph, where individual values are represented in descending order by bars, and the cumulative total is represented by the line. ## Pareto line Represents the cumulative percentage of the total occurrences, cost, or a particular unit of measure. ## Marker Mark data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pentagons, crosses, and pluses. In addition to these shapes, use images to make the points more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle. ## Vertical chart The Angular Pareto Chart can be transposed vertically to view the data in a different perspective. ## Customization Customize the color, border, marker, and dash array for the pareto column and line series using built-in APIs to make it visually unique. ## Angular Pareto Chart Code Example Easily get started with Angular Pareto Chart by using a few lines of HTML and TS code, as demonstrated below. Also explore our [Angular Pareto Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/pare-to) that shows how to render and configure the chart. - html - ts 'display:block;' 'chartcontainer' //app.component.ts 'Coller Defect ' //Initializing Primary X Axis 'Score of Final Examination' edgeLabelPlacement 'Frequency of Occurence' '@syncfusion/ej2-ng-charts' ParetoSeriesService ColumnSeriesService LineSeriesService './app.component' ## Learning Resources [Pareto Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/pareto) Learn the available options to customize Angular Pareto Chart. [Pareto Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular Pareto Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular Pivot Table | Blazing-Fast Pivot Grid | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-pivot-table # Angular Pivot Table - A High-Performance Pivot Grid - Organize and summarize pivot data in grids and charts. - Load large volumes of data with high performance. - Easily filter, sort, aggregate, and group pivot data. - View detailed or abstract data using drill down or up. - Experience seamless interaction and editing capabilities. ## Overview The Angular Pivot Table is a powerful control used to organize and summarize business data and display the result in a cross-table format. It includes major functionalities such as data binding, drilling up and down, Excel-like filtering and sorting, editing, Excel and PDF exporting, several built-in aggregations, field lists, and calculated fields. A high volume of data can be loaded without performance degradation by using row and column virtualization. ### High performance The Pivot Table is a powerful data visualization tool designed for fast-paced performance when loading millions of records. ### Seamless data binding Bind data seamlessly from [local and remote sources](https://ej2.syncfusion.com/angular/documentation/pivotview/data-binding) including: file formats ([JSON](https://ej2.syncfusion.com/angular/documentation/pivotview/data-binding#json), [CSV](https://ej2.syncfusion.com/angular/documentation/pivotview/data-binding#csv)), service protocols ([OData](https://ej2.syncfusion.com/angular/documentation/pivotview/data-binding#binding-with-odata-services), [RESTful APIs](https://ej2.syncfusion.com/angular/documentation/pivotview/data-binding#web-api)), SQL databases ([MySQL](https://ej2.syncfusion.com/angular/documentation/pivotview/connecting-to-data-source/mysql), [Microsoft SQL Server](https://ej2.syncfusion.com/angular/documentation/pivotview/connecting-to-data-source/microsoft-sql-server), [PostgreSQL](https://ej2.syncfusion.com/angular/documentation/pivotview/connecting-to-data-source/postgresql), [Oracle](https://ej2.syncfusion.com/angular/documentation/pivotview/connecting-to-data-source/oracle)), NoSQL databases ([MongoDB](https://ej2.syncfusion.com/angular/documentation/pivotview/connecting-to-data-source/mongodb), [Elasticsearch](https://ej2.syncfusion.com/angular/documentation/pivotview/connecting-to-data-source/elasticsearch)), and cloud data warehouses like [Snowflake](https://ej2.syncfusion.com/angular/documentation/pivotview/connecting-to-data-source/snowflake). ### Flexible editing Users can perform actions on raw data at runtime, including [create, read, update, and delete](https://ej2.syncfusion.com/angular/documentation/pivotview/editing). Through an interactive user interface, the control provides several edit modes, including inline, dialog, batch, and column. ### Integration with charts Users can easily [integrate the Pivot Table](https://ej2.syncfusion.com/angular/documentation/pivotview/pivot-chart) with independently rendered pivot data. It has support for more than 20 chart types. ### Conditional formatting Users can easily [change a Pivot Table cell value’s appearance](https://ej2.syncfusion.com/angular/documentation/pivotview/conditional-formatting)(background color, font color, font family, and font size) as required. ### Adapts to any resolution The Pivot Table has a highly responsive layout and an optimized design for desktops, tablets, and smartphones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Attractive, customizable themes Create cutting-edge design with several built-in themes, such as Fluent, Tailwind CSS, Bootstrap, Material, and Fabric. Utilize the [online Theme Studio tool](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) to customize themes easily. ### Globalization and localization [Enable users from different locales](https://ej2.syncfusion.com/angular/documentation/pivotview/globalization-and-localization) to use the component by formatting dates, currency, and numbering to suit preferences. ## Angular Pivot Table code example Get started with the Angular Pivot Table using a few simple lines of HTML and TS code, as demonstrated in the following. Also, explore this [Angular Pivot Table example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/default), which shows you how to render the control. - html - ts dataSourceSettings '@syncfusion/ej2-angular-pivotview' '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings' '@syncfusion/ej2-base' /** * Pivot Table Default Sample. */ 'ej2-pivotview-container' DefaultComponent 'Mountain Bikes' 'United Kingdom' ## Classic layout The classic (tabular) layout is designed to enhance data visibility by presenting information in a traditional table format. In this layout, each row label is displayed distinctly at various levels across separate columns for clarity and better organization. This structured approach simplifies the analysis of datasets, making it easier to interpret relationships and trends within the data through a detailed, organized, and user-friendly table format. - [Classic layout example](https://ej2.syncfusion.com/angular/demos/#/fluent2/pivot-table/classic-layout) - [Classic layout documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/classic-layout) ## Pivot charts An Angular pivot chart can easily be integrated with pivot data rendered independently. The component includes support for plotting more than 20 chart types. The end-user experience is greatly enhanced with a set of user-interaction features: drill up, drill down, zoom, pan, crosshairs, trackball, events, selection, and tooltip. Highly interactive field list options are available for generating reports from relational data dynamically. - [More details on pivot charts](https://www.syncfusion.comangular-pivot-table/pivot-chart) ## Virtual scrolling Large amounts of data can be divided and displayed in the rows and columns of the current viewport using the virtual scrolling feature. Users can navigate to a desired view by scrolling the vertical and horizontal scrollbars. - [Virtual scrolling example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/virtual-scrolling) - [Virtual scrolling documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/virtual-scrolling) ## Paging Large amounts of data can be divided and displayed page by page with the paging feature. The pager UI allows users to navigate to a desired page using the navigation buttons or an input text box. Row and column pager sizes can be changed independently at runtime. Furthermore, users can toggle the position of the row and column pagers, modify their visibility, and visualize them using a compact view mode. - [Paging example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/paging) - [Paging documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/paging) ## Pivot Table field list and group fields The Angular Pivot Table [field list](https://ej2.syncfusion.com/angular/documentation/pivotview/field-list) and [group fields](https://ej2.syncfusion.com/angular/documentation/pivotview/grouping-bar) options are automatically populated with fields from the bound data source. They allow end users to drag, filter, and sort fields, as well as create pivot reports at runtime. - [Grouping bar example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/grouping-bar) - [Field list example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/field-list) ## OLAP data binding The Pivot Table can be connected to an OLAP cube, and its result can be visualized in both tabular and graphical formats. - [More details on OLAP](https://www.syncfusion.comangular-pivot-table/olap) ## Defer layout update Users can refresh the control on demand instead of during every UI interaction in the Pivot Table. - [Defer layout update example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/defer-update) - [Defer layout update documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/defer-update) ## Drill down and up The built-in drill-down (expand) and drill-up (collapse) capabilities visualize data in detailed views and abstract views, respectively. By default, the data is displayed in a grouped manner. - [Drill operation example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/Drill-Down) - [Drill operation documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/drill-down) ## Editing and updating Users can create, read, update, and delete operations for raw data at runtime and update their changes to the underlying data source, reflecting the information in all corresponding cells. The Pivot Table control supports various edit modes such as inline, dialog, batch, and column edit through an interactive UI. - [Editing and updating example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/editing) - [Editing and updating documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/editing) ## Filtering Built-in member filters and Excel-like filters with advanced filtering options can be used to filter and view data as required. It is also possible to filter data programmatically in the Pivot Table. ## Member filtering Filtering members in a pivot table to filter data displayed based on values in the row or column axes. - [Normal filtering example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/filtering) - [Normal filtering documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/filtering#member-filtering) ## Label filtering Use Excel-like filtering options across column and row headers based on label text, dates, or numbers. - [Label filtering example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/label-filtering) - [Label filtering documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/filtering#label-filtering) ## Value filtering Use Excel-like filtering options across column and row headers based on grand-total values. - [Value filtering example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/value-filtering) - [Value filtering documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/filtering#value-filtering) ## Sorting Users can use sorting to order rows and columns based on labels or values. ### Header sorting Order the column and row header text either in ascending or descending order. - [Normal sorting example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/sorting) - [Normal sorting documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/sorting#member-sorting) ### Column sorting Column sorting, also known as value sorting, orders the column values either in ascending or descending order. It is performed by clicking the header of the column to be sorted. - [Column sorting example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/value-sorting) - [Column sorting documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/sorting#value-sorting) ### Custom sorting Arrange field headers in column and row axes according to the user-defined order. - [Custom sorting example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/custom-sorting) - [Custom sorting documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/sorting#custom-sorting) ## Aggregation Users can perform calculations on a group of values using the aggregation option. By default, values are added together. The other aggregation types are: average, minimum, maximum, count, distinct count, product, index, population standard deviation, sample standard deviation, population variance, sample variance, running totals, difference from, percent of difference from, and percent of grand total. - [Aggregation example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/aggregation) - [Aggregation documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/aggregation) ## Calculated fields Calculated or unbound fields generate unique fields with users’ calculated values by executing a simple, user-defined formula. - [Calculated field example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/calculated-field) - [Calculated field documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/calculated-field) ## Drill through The drillthrough feature easily obtains a list of raw items for a particular value cell or summary cell. - [Drill through example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/drill-through) - [Drill through documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/drill-through) ## Totals Subtotals and grand totals are calculated automatically by the pivot engine inside the control and displayed in the Pivot Table to help users make decisions more quickly. Also, users can show or hide subtotals and grand totals for rows and columns. - [Show or hide totals example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/summary-customization) - [Show or hide totals documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/summary-customization) ## Conditional formatting Users can define conditions that, when met, format font style, text color, background color, and font size for values and summary cells. - [Conditional formatting example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/conditional-formatting) - [Conditional formatting documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/conditional-formatting) ## Number and date formatting Number and date formatting help transform the appearance of the actual cell values. - [Number formatting documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/number-formatting) - [Date formatting documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/how-to/customize-number-date-and-time-values#date-and-time-formatting) ## Grouping dates and numbers The Angular Pivot Table control automatically groups dates and numbers, so the date type can be formatted and displayed based on year, quarter, month, day, and more. The number type can be grouped by range, such as 1–5 or 6–10. - [Grouping date and number example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/grouping) - [Grouping date and number documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/grouping) ## Frozen headers Users can freeze row and column headers to compare them with cell values. ### Resize Change the column width at runtime by simply dragging the rightmost boundary of the column header. A scroll bar will appear when the content width exceeds the control width. - [Column resize documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/row-and-column#column-resizing) ### Reorder Users can reorder columns either through user interaction or programmatically. Simply dragging and dropping a column header into the desired column position will reorder the columns. - [Column reorder documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/row-and-column#reorder) ### Hyperlinks Users can add hyperlinked text to a cell to redirect to external resources. The control allows them to perform custom operations programmatically. - [Hyperlink example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/hyper-link) - [Hyperlink documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/hyper-link) ### Cell selection Select a range of cells. - [Cell selection example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/selection) - [Cell selection documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/row-and-column#selection) ### Tooltips A tooltip provides basic information about a cell while hovering over it with the pointer. - [Tooltips documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/tool-tip) ### Cell template With cell templates, users can easily add features like images, checkboxes, and text nodes to any cell. - [Cell template example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/cell-template) - [Cell template documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/row-and-column#cell-template) ## Toolbars A toolbar enhances user interaction and provides access to frequently used features. These features include: new report, save report, save as report, rename report, delete report, report list, show grid, show chart, show or hide totals, export reports, and more. - [Toolbar example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/toolbar) - [Toolbar documentation](https://ej2.syncfusion.com/documentation/pivotview/tool-bar) ## Exporting [Export](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/exporting) the Angular Pivot Table data to Excel, PDF, and CSV formats. Users can also customize the exported document by adding header, footer, and cell properties like type, style, and position programmatically. - [Export to Excel documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/excel-export) - [Export to PDF documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/pdf-export) ## Export to Native Excel PivotTable Users can export the Syncfusion Pivot Table directly to Microsoft Excel’s native PivotTable format, not just as a static table or flattened data. This ensures that all interactive features are preserved, allowing users to fully utilize Excel’s PivotTable functionalities. ### Key advantages: - Native Excel PivotTable: Exports to the actual PivotTable format used by Excel, preserving rows, columns, values, and filters. - Fully interactive in Excel: Continue to sort, filter, expand and collapse groups, and modify field lists just like in your original pivot. - Reusable layout: Save time by exporting your configured pivot layout for future use or easy sharing. - [Export as Pivot example](https://ej2.syncfusion.com/demos/#/tailwind3/pivot-table/pivot-table-exporting.html) ### Touch support All features will work on touch devices easily. Features such as drilling up, drilling down, filtering, sorting, and report manipulation can be done on the fly. ### Responsiveness The responsive design allows the control to be viewed on various devices. ### Keyboard navigation The Pivot Table ensures that every cell is keyboard accessible. Major features like sorting, selection, and editing can be performed using keyboard commands alone; no mouse interaction is required. This helps create highly accessible applications using this component. - [Keyboard navigation documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/accessibility#keyboard-navigation) ### Right to left (RTL) The Pivot Table supports RTL rendering, allowing the text and layout to be displayed from right to left. - [RTL documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/globalization-and-localization#right-to-left-rtl) ## Angular version compatibility The Angular Pivot Table is kept up-to-date to make it compatible with the latest Angular version. - [More details on Angular Pivot Table version compatibility](https://support.syncfusion.com/kb/article/12276/angular-pivot-table-version-compatibility) ## Other supported frameworks The Pivot Table is also available for the Blazor, React, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) - [React Pivot Table](https://www.syncfusion.com/react-components/react-pivot-table) - [JavaScript Pivot Table](https://www.syncfusion.com/javascript-ui-controls/js-pivot-table) - [Vue Pivot Table](https://www.syncfusion.com/vue-components/vue-pivot-table) ## Supported browsers The Angular Pivot Table works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/getting-started) [Feature requests and bug reports](https://www.syncfusion.com/feedback/angular?control=pivot-table) [Streamline Data Management with Inline Editing in Angular Pivot Table](https://www.syncfusion.com/blogs/post/inline-editing-in-angular-pivot-table) [Getting Started with the Angular Pivot Table Component](https://www.syncfusion.com/tutorial-videos/angular/pivot-table?title=getting-started-with-the-angular-pivot-table-component) ##### Angular Pivot Table component connecting OLAP cube | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-pivot-table/olap # OLAP Browser for the Angular Pivot Table - Connects multidimensional data (OLAP) provided by Microsoft Analysis Services (SSAS) via XMLA. - Creates a report using dimensions, hierarchies, measures, named sets, calculated members and measures, etc., from OLAP cube at runtime. - Virtual scrolling of large data is possible. [FREE TRIAL](https://www.syncfusion.com/downloads/angular?tag=es-ft-angular-pivot-table-banner) ## Overview The Angular Pivot Table can now be connected to multidimensional data (OLAP) that is organized into dimensions, hierarchies, measures, named sets, etc., and its result visualized in both tabular (pivot table) and graphical (pivot chart) formats. End users can customize its report on the fly with the help of grouping bar and field list. Users can also store the report for later use. ## OLAP cube OLAP cube is a multidimensional array of data formed by its elements such as dimensions, hierarchies, levels, members, measures, named sets, etc. With the help of the field list UI, end users can visualize and use the OLAP cube elements at runtime. - [OLAP cube elements documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/olap/#olap-cube-elements) ## Drill down and drill up Built-in support for drill down (expand) and drill up (collapse) has been provided to visualize data in both abstract and detailed views. ## Slice and dice With slice and dice, the end users can create a new view by selecting dimensions and measures from the OLAP cube and filtering them. ## Virtualization In the Angular Pivot Table, support has been provided to bring data to the browser with the help of paging MDX query while scrolling and render the component without any performance constraints. ## Calculated members and measures Built-in UI has been introduced to create and display dimensions and measures according to the user requirement. The dynamically created members and measures can be bound to the report in order to visualize the same in pivot table. - [Calculated field documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/olap/#calculated-field) ## Named sets Named sets are dimension members created from predefined MDX expressions in the OLAP cube. - [Named sets documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/olap/#named-set) ## Drill through End users can now retrieve the underlying raw data of any aggregated value cell and visualize it in the grid component for precise view. - [Drill through documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/drill-through/) ## Measure groups Organize measures belonging to the same underlying fact table in a group. ##### Blazing fast Angular Pivot Chart| Syncfusion URL: https://www.syncfusion.com/angular-components/angular-pivot-table/pivot-chart # Blazing fast Angular pivot chart - Aggregation, filtering, sorting, and grouping of pivot data with drill-down capability. - More than 20+ chart types along with series, axis, and legend customization. [FREE TRIAL](https://www.syncfusion.com/downloads/angular?tag=es-ft-angular-pivot-table-banner) ## Overview The Pivot Chart control organizes and summarizes business data and displays results in a graphic format. It includes major functionalities such as data binding, various chart types, drilling up and down, Excel-like filtering and sorting, PDF exporting, several built-in aggregations, pivot table field list, calculated fields, and common chart UI interactions. ## Drill down and drill up Drill down (expand) and drill up (collapse) actions to visualize pivot information in both abstract and detailed views. By default, data is displayed in a grouped manner. ## Grouping bar and field list The field list and grouping bar options allow users to change reports bound with pivot chart dynamically. End users can drag, filter, and sort fields, as well as create pivot report at runtime. - [Grouping bar documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/pivot-chart/#grouping-bar) - [Field list documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/pivot-chart/#field-list) ## Chart types The Pivot Chart control includes a functionality for plotting more than 20 chart types. Users can visualize data with different chart types: Line, Column, Area, Bar, StepArea, StackingColumn, StackingArea, StackingBar, StepLine, Pareto, Bubble, Scatter, Spline, SplineArea, StackingColumn100, StackingBar100, StackingArea100, Polar, Radar, Pie, Doughnut, Funnel, and Pyramid. Each one is easily configurable with built-in support for creating stunning visual effects. Users can easily switch between different chart types dynamically. - [Chart types documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/pivot-chart/#chart-types) ## Series customization End users can customize the existing series color, border color, and border width of the pivot chart based on their needs, using several built-in options through code behind. - [Series customization documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/pivot-chart/#series-customization) ## Multiple axes Allows users to plot multiple series in a single chart with multiple axes as per the value fields bound with the pivot chart. Users can view more information about the individual series with the help of a tooltip. - [Multiple axes documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/pivot-chart/#multiple-axis) ## Legend customization The legend helps provide information about each series in the pivot chart and users can hide or show any series based on the legend UI at runtime by clicking it. Users can also customize the appearance of legend items in the pivot chart with the help of built-in options like position and shape based on their need. - [Legend customization documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/pivot-chart/#legend-customization) ### Marker and cross hair Markers are symbolic representations of points in a pivot chart. Users can customize the marker with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, and pentagons. In addition, images can be used to make the point more attractive. Crosshairs will return the exact data for the X and Y coordinates under the pointer. - [Marker and cross hair documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/pivot-chart/#marker-and-crosshair) ### Zooming and scrolling Users can take a close-up look at a data point plotted in a series at runtime with the zooming feature. When any part of the chart area is zoomed in, scroll bars will automatically appear to let the user view areas beyond the currently displayed chart area. - [Zooming and scrolling documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/pivot-chart/#zooming-and-panning) ### Panning Users can click and drag the pointer across a zoomed-in chart to navigate to data points for better viewing. - [Panning documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/pivot-chart/#zooming-and-panning) ### Tooltip A tooltip provides basic information about a cell while hovering over it with the pointer. - [Tooltip documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/pivot-chart/#tooltip) ## Exporting The pivot chart can be exported as PDF documents or as image formats such as SVG, PNG, and JPEG. - [Exporting documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/pivot-chart/#export) ## Globalization and localization Enables users from different locales to use them by formatting dates, currency, and numbering to suit their preferences. - [Globalization and localization documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/globalization-and-localization/) ##### Angular Form Validation | Reactive Forms | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-form-validation # Angular Form Validation - Easy to Validate Form Input Elements - Easily configure the form valuation for HTML input elements and custom form components. - Provide built-in validation rules to cover various types of form fields such as required, email, URL, date, and more. - Easily build custom validation rules and HTML5 data attribute validation. ## Overview Angular Form Validation is a library for validating HTML form input elements before submitting them to a server. It has 14 built-in validation rules such as required, email, URL, date, and more, along with support for writing custom validation logic and HTML5 data attribute validation. ## Validation with Angular Reactive Forms The Angular Form Validation library has built-in custom validation support such as date, data ISO, credit card and more to validate Angular reactive forms. HTML view page elements in Angular reactive form Validate Angular reactive form by using Syncfusion Form Validation. ## Validate using HTML5 data attributes The HTML5 form element’s data attributes can be used to define validation rules and error messages for the Angular Form Validation library. This facilitates clean and reusable HTML forms. ## Validation error messages The Angular Form Validation library provides meaningful [validation error messages](https://ej2.syncfusion.com/documentation/form-validator#error-messages) when the expected validation rule isn’t followed by the input value. This validation plugin itself has options for customizing both the validation message’s placement and its content. ### Customize error messages Define and customize validation error messages for individual form elements, entire forms, or for an entire application. This enables you to set [custom error messages](https://ej2.syncfusion.com/documentation/form-validator#customizing-error-messages) instead of being limited to built-in validation error messages. ### Custom error placement Summarize error messages and place them in [custom locations](https://ej2.syncfusion.com/documentation/form-validator#customizing-error-placement). This option is useful for taking a validation message from a default location and moving it to any custom location in the application. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Menu Bar | Nav Bar Component | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-menu-bar # Angular Menu Bar - Flexible Navigation Menu Component - Display a multilevel menu with smooth animation that is dockable in the header and footer. - Customize menu items for templating or include other controls like Checkbox, Radio Button, and more. - Utilize automatic collision detection and handling with submenu flip-and-fit. ## Overview The Angular Menu Bar is a graphical user interface component that serves as a navigation header for your web application or site. It supports data binding, templates, icons, multilevel nesting, and horizontal and vertical menus. ## Data binding Menu in Angular can be bound to data in the form of JavaScript object array collection. It supports self-referential or hierarchical structure of data. - [Menu data binding documentation](https://ej2.syncfusion.com/angular/documentation/menu/data-source-binding-and-custom-menu-items#data-binding) ## Menu Item Icons Users tend to perceive visual information better than text. Include icons or sprite images to the menu items easily to provide a visual representation of the actions. - [Menu icons documentation](https://ej2.syncfusion.com/angular/documentation/menu/icons-and-sub-menu-items#icons) ## Menu Bar Templates Angular Menu Bar templates is used to create custom user experience. It provides template for each menu item to customize the entire Menu UI. - [Example of menu bar templates](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/menu/template) ## Vertical Menu Angular Menu supports its alignment in either vertical or horizontal orientation. ## Multi-level nesting Angular MenuBar supports multi-level nested items. You can browse the sub-menu by hovering or clicking a parent item. - [Multi-level nesting documentation](https://ej2.syncfusion.com/angular/documentation/menu/icons-and-sub-menu-items#multilevel-nesting) ## Integration with other components Angular Menu can be used with other components. Adding a menu to other components only requires simple configuration. ## Built-in themes Angular Menu supports built-in themes such as Bootstrap 5, Tailwind CSS, Fluent, high contrast, and more. Users can customize these built-in themes or create new themes to achieve the desired look and feel either by simply overriding SASS variables or using the Theme Studio application. - [Theme studio Application](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) ## Web Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) for working with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing keyboard interaction. - Based on [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, we designed the UI element visuals such as foreground color, background color, line spacing, text and images - Supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian. ## Angular Menu Bar Code Example Easily get started with the Angular Menu Bar using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular Menu Bar Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/menu/default) that shows you how to render and configure a Menu Bar in Angular. - html - ts "control-section" @syncfusion/ej2-base @syncfusion/ej2-angular-navigations ` ` Spelling & Grammar ## Other supported frameworks Menu is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the different Menu platforms from the links below, - [Blazor Menu](https://www.syncfusion.com/blazor-components/blazor-menu-bar) - [React Menu](https://www.syncfusion.com/react-components/react-menu-bar) - [Vue Menu](https://www.syncfusion.com/vue-components/vue-menu-bar) - [JavaScript Menu](https://www.syncfusion.com/javascript-ui-controls/js-menu-bar) ## Angular version compatibility With continuous improvement in Angular versions, the Angular Menu Bar is kept up to date to make it compatible with the latest version. ### Angular 11 - [Getting started with Angular 11 Menu Bar](https://support.syncfusion.com/kb/article/10877/how-to-get-started-easily-with-syncfusion-angular-11-menu-bar) - [Angular 11 Menu Bar example](https://github.com/SyncfusionExamples/ej2-angular-11-menu-bar) ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Progress Button Component | Spinner Button | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-progress-button # Angular Progress Button Component | Spinner Button - Built-in support for different types, styles, and icons. - Seamless support for spinners and progress visuals with built-in animations. - Flexible UI customization of spinners and progress visuals with fluent APIs. ## Overview The Angular Progress Button or spinner button is a graphical user interface component used to visualize the progression of an operation in the background. It has built-in features such as predefined styles, different button types, and spinner and UI customization. ## Progress Button Icons Users tend to perceive visual information better than text. The progress button has built-in options to include an icon to the right, left, top, and bottom of a text or provide an icon-only button. ## Predefined styles The progress button has the following predefined styles to be used based on the application scenario: - Primary - Success - Info - Warning - Danger ## Custom Progress Button Progress buttons can be customized in multiple ways. You can choose from different button sizes, default and small, as required in your application. ## Other supported frameworks Progress Button is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the different Progress Button platforms from the links below, - [Blazor Progress Button](https://www.syncfusion.com/blazor-components/blazor-progress-button) - [React Progress Button](https://www.syncfusion.com/react-components/react-progress-button) - [Vue Progress Button](https://www.syncfusion.com/vue-components/vue-progress-button) - [JavaScript Progress Button](https://www.syncfusion.com/javascript-ui-controls/js-progress-button) ## Angular version compatibility With continuous improvement in Angular versions, the Angular Progress Button is kept up to date to make it compatible with the latest version. ### Angular 11 - [Getting started with Angular 11 Progress Button](https://support.syncfusion.com/kb/article/11007/how-to-get-started-easily-with-syncfusion-angular-11-progress-button) - [Angular 11 Progress Button example](https://github.com/SyncfusionExamples/ej2-angular-11-progress-button) ## Themes The Angular Progress Button supports several built-in themes such as Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and High Contrast. Users can customize any one of these built-in themes or create new themes to achieve their desired look and feel either by simply overriding SASS variables or using the Theme Studio application with ease. - [Theme studio Application](https://ej2.syncfusion.com/documentation/appearance/theme-studio) ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility to work with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing keyboard interaction. - Follows [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards in design of the UI element visuals such as foreground color, background color, line spacing, text, and images. - Supports right-to-left (RTL) text direction for users working with right-to-left languages like Hebrew, Arabic, or Persian. ## Developer-friendly APIs Developers can customize all UI elements and the behaviors of Progress Button using its rich set of client-side APIs according to the requirement of the end users. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Bubble HeatMap | Angular HeatMap Chart | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-heatmap-chart/matrix-bubble-chart # Angular HeatMap Chart Bubble HeatMap Chart ## Overview The Angular matrix bubble chart is a HeatMap Chart type that represents matrix data graphically using bubbles. The individual data point values in the matrix bubble chart are represented using the variations in bubble attributes such as size, color, and sector. ## Bubble HeatMap with size attribute Visualize matrix data graphically with bubble size variations in this bubble heatmap type. The larger the bubble size, the larger the magnitude of the data will be, but this can be reversed by using the built-in APIs. - [Bubble size documentation](https://ej2.syncfusion.com/angular/documentation/heatmap-chart/bubble-heatmap/#bubble-size) ## Bubble HeatMap with color attribute This Angular matrix bubble chart type visualizes the data graphically with bubble color variations. Use built-in APIs to map the colors for the bubbles in a heatmap. - [Bubble color documentation](https://ej2.syncfusion.com/angular/documentation/heatmap-chart/bubble-heatmap/#bubble-color) ## Bubble HeatMap with sector attribute This Angular matrix bubble chart type visualizes the data graphically using the sector size variations of the bubbles. Use built-in APIs to change the sector background and borders. - [Bubble sector documentation](https://ej2.syncfusion.com/angular/documentation/heatmap-chart/bubble-heatmap/#bubble-sector) ## HeatMap Chart with bubble size and color variations Use this matrix bubble chart type to bind two different datasets with the same axis coordinates. Visualize one dataset with the bubble size attribute and another dataset using the bubble color variations. Use built-in APIs to map the data to the color and size attributes of the bubble. - [Bubble size and color documentation](https://ej2.syncfusion.com/angular/documentation/heatmap-chart/bubble-heatmap/#combining-size-and-color-bubble-attributes) ##### Angular Resource Scheduler | Resource Grouping | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-scheduler/multiple-resources # Angular Scheduler Multiple Resources and Grouping ## Overview The Angular Scheduler comes with a variety of flexible options to group resources based on different criteria. This includes grouping appointments based on resources, grouping resources based on dates, and timeline scheduling. Also, the data for resources bind with Scheduler either as a local JSON collection or URL retrieving data from remote data services. - [Resources and grouping documentation](https://ej2.syncfusion.com/angular/documentation/schedule/resources/) ## Compact layout - Our Angular Scheduler arrives with a new compact layout for displaying resources and their relevant events on a mobile screen. - This unique layout brings clear visibility of the resource events by displaying a single resource at a time. ## Resource grouping The Angular Scheduler supports four different types of grouping: horizontal, timeline, date-based, and hierarchical (one-to-one). ### Horizontal grouping Group the resources horizontally with a time axis displaying at the left extreme, common for all other resources. Display the appointments of each individual resource in its underlying time slots. - [Horizontal grouping example](https://ej2.syncfusion.com/angular/demos/#/material/schedule/resource-grouping) ### Timeline grouping Display the resources as rows in a hierarchical tree structure based on the grouping levels. Arrange the appointments of a resource horizontally in its appropriate row, against the horizontal time axis. - [Timeline grouping example](https://ej2.syncfusion.com/angular/demos/#/material/schedule/timeline-resource-grouping) ### Group by date Group the resources under each date column, whereas each date column will have the underlying sub columns to display those resources. - [Group by date example](https://ej2.syncfusion.com/angular/demos/#/material/schedule/group-by-date) ### Hierarchical grouping This feature maps every end-level child resource to each of its top-level parents, thus allowing the one-to-one grouping model. - [Hierarchical grouping example](https://ej2.syncfusion.com/angular/demos/#/material/schedule/group-by-child) ## Shared events Multiple resources can share the same appointment, thus allowing the action made on it to reflect on all other shared instances simultaneously. - [Shared events example](https://ej2.syncfusion.com/angular/demos/#/material/schedule/group-editing) ## Different working days for resources Options exist to set different working days and working hours for each resource. - [Different working days example](https://ej2.syncfusion.com/angular/demos/#/material/schedule/group-custom-work-days) ## Resource header customization Enhance the look and feel of the resource header cells by adding text, images, or CSS styles. In addition, you can display customized tooltips with resource information while hovering over the resource header cells. - [Customizable resource header example](https://ej2.syncfusion.com/angular/demos/#/material/schedule/group-custom-work-days) ## Add and remove resources Built-in scheduler methods are available for adding or removing resources dynamically on a scheduler. You can specify the index position, where the add or remove actions are to take place. - [Add and remove resources example](https://ej2.syncfusion.com/angular/demos/#/material/schedule/add-remove-resources) ##### Angular Scheduler Events | Angular Calendar Events | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-scheduler/scheduler-events ## Overview The Angular Scheduler ships with comprehensive add, edit, and delete event capabilities. You can easily add and edit appointments using the editor window or through intuitive drag-and-resize actions. ### Event creation A quick event window that pops out on a single click over the required cells allows you to create an appointment. Built-in methods are also available to make the event adding process simpler and easier. - [Dynamic CRUD actions documentation](https://ej2.syncfusion.com/angular/documentation/schedule/how-to/add-edit-and-remove-events) ### Multi-event deletion Delete multiple selected scheduler events at once. Select the events and simply press the delete key to remove them all. ## Event editor Appointment creation and editing is made easier with the default event editor that includes additional customizing options. Validation options are also available on all the editor fields. ### Built-in editor window The built-in Scheduler event editor allows you to easily add and edit all kinds of appointment information such as description and recurring options. You can also add additional fields and customize them easily. - [Editor window with custom fields example](https://ej2.syncfusion.com/angular/demos/#/material/schedule/editor-custom-field) - [Editor window documentation](https://ej2.syncfusion.com/angular/documentation/schedule/editor-template#event-editor) ### Custom event editor Customize the default event editor window as per the user’s choice of UI and design template. Additional fields added to it are custom mapped automatically to the event instances. - [Custom editor template example](https://ej2.syncfusion.com/angular/demos/#/material/schedule/editor-template) - [Custom editor template documentation](https://ej2.syncfusion.com/angular/documentation/schedule/editor-template#customizing-event-editor-using-template) ### Data validations Built-in and custom validation options are available for the event editor fields to validate the input appointment data. - [Field validation example](https://ej2.syncfusion.com/angular/demos/#/material/schedule/editor-validation) - [Field validation documentation](https://ej2.syncfusion.com/angular/documentation/schedule/editor-template#field-validation) ## Bulk appointment updates When a recurring appointment undergoes editing actions, a single request will be sent to the server carrying the multiple records. These multiple records include the information about the added, edited, and deleted events. Bulk appointment insertion is applicable when you want to create and assign a same event to multiple resources. Bulk appointment deletion is also possible, when you select and delete multiple appointments all at once. - [CRUD actions on events documentation](https://ej2.syncfusion.com/angular/documentation/schedule/data-binding#scheduler-crud-actions) ## Intuitive drag-and-drop action - Reschedule appointments easily by dragging them onto the required time slots. You can also see the live time updates over the dragged appointments. - In mobile devices, tap holding an event and then moving it over the scheduler cells will allow you to drag and drop the events. - Auto-scrolls the view port area while dragging events over the scheduler extremities. ## Event resizing - Easily extend a scheduler event’s time by resizing either its start or end handlers. - You can also see the live time updates over the resized appointments. - Auto-scrolls the view port area while resizing events over the scheduler extremities. ## External drag and drop Drag unscheduled events from an external source onto the scheduler. You can also drag and drop appointments among multiple schedulers placed on the same page. - [External drag and drop example](https://ej2.syncfusion.com/angular/demos/#/material/schedule/external-drag-drop) ## Read-only mode Read-only mode set on the Scheduler allows you to disable the add and edit actions on events. You can also programmatically control the read-only mode on specific scheduler events alone. - [Readonly mode on specific events example](https://ej2.syncfusion.com/angular/demos/#/material/schedule/read-only) - [Readonly mode documentation](https://ej2.syncfusion.com/angular/documentation/schedule/appointments#readonly) ## Event restriction With the built-in scheduler methods, you can restrict each timeslot to hold only a single appointment during add or edit actions. - [Event restriction example](https://ej2.syncfusion.com/angular/demos/#/material/schedule/editor-template) - [Cell availability documentation](https://ej2.syncfusion.com/angular/documentation/schedule/cell-customization#check-for-cell-availability) ##### Angular Timeline Scheduler | Calendar Timeline Views | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-scheduler/timeline-views ## Overview Angular Timeline scheduling plays a major role in the Angular scheduler, as it displays the timeline scheduler views for multiple resources. Its feature-rich calendar options, compact resource scheduling, and clear event representation allows you to employ it in various real-time applications. The events of timeline views support an intuitive drag-and-drop feature and a resize action. ## Multiple timeline views Five built-in timeline views are available: timeline day, timeline week, timeline work week, timeline month, and timeline year. All these views carry a common horizontal time axis and inherit almost all the calendar-specific features. ### Timeline day, week, and work week views Display appointments accurately across a common horizontal time axis for a single day or multiple days. ### Timeline month view Display appointments across multiple days of a month on a horizontal axis where each column represents a single day. ### Timeline year view Display multiple months on both horizontal and vertical axes, where each cell represents a single day. ## Extensible custom views - Display multiple days, weeks, and months across a timeline scheduler by extending each view’s interval count. - For example, you can display a complete year, say from January 2018 to December 2018, in timeline month view by setting its interval value to 12. This allows the timeline scheduler to load 12 months from the current date (the current date being in January in this example) in timeline month view. ## Header rows - A timeline scheduler usually displays additional header rows on timeline views alone. - You can display the year, month, and week number text labels on each individual row with out-of-the-box templates. - [Header rows example](https://ej2.syncfusion.com/angular/demos/#/material/schedule/header-rows) ## Event handling options There is built-in support for better event handling, such as easier appointment creation and editing using the default event editor or through intuitive drag-and-resize actions. In addition, you can add custom data fields to both the events and resource data source. - [Learn more about event editing options](https://www.syncfusion.comscheduler-events) ## Resource grouping Display the resources as individual rows. Arrange the appointments of a resource horizontally in its appropriate row against the horizontal time axis. - [Resource grouping with single level example](https://ej2.syncfusion.com/angular/demos/#/material/schedule/timeline-resource) ## Grouping with multiple levels - Display resources in rows in a hierarchical tree-like structure with expand and collapse options. - More importantly, the parent-level resources, too, will display appointments in their individual rows. - [Resource grouping with multi-levels example](https://ej2.syncfusion.com/angular/demos/#/material/schedule/timeline-resource-grouping) ## Virtual scrolling The Angular Timeline Scheduler provides better performance by instantly loading large sets of resources and appointments virtually on every scroll action. - [Virtual scrolling example](https://ej2.syncfusion.com/angular/demos/#/material/schedule/virtual-scrolling) ## Shared events Multiple resources can share the same appointment, thus allowing the action made on it to reflect on all other shared instances simultaneously. ## Customizing resource columns Enhance the look and feel of the resource header cells by adding text, images, or CSS styles. You can display customized tooltips with resource information while hovering over the resource header cells. - [Customizable resource columns example](https://ej2.syncfusion.com/angular/demos/#/material/schedule/timeline-resource) ## Add and remove resources Built-in scheduler methods are available for adding or removing resources dynamically on a scheduler. You can specify the index position, where the add or remove actions are to take place. - [Add and remove resources example](https://ej2.syncfusion.com/angular/demos/#/material/schedule/add-remove-resources) ##### Angular Stacked Area Chart & Graph | Angular Charts |Syncfusion URL: https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart #### Basic charts - [Line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart) - [Bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart) - [Column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart) - [Area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart) #### Correlation charts - [Scatter chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart) - [Bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart) - [Combination chart / Mixed chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/combination-chart) #### Circular charts - [Pie chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart) - [Doughnut chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart) #### Triangular charts - [Pyramid chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart) - [Funnel chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart) #### Spline charts - [Spline chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart) - [Spline area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-area-chart) #### Step charts - [Step line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart) - [Step area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/step-area-chart) #### Stacked charts - [Stacked line chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-line-chart) - [Stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart) - [Stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-bar-chart) - [Stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-column-chart) - [100% Stacked line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-line-chart) - [100% Stacked area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-area-chart) - [100% stacked bar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-bar-chart) - [100% stacked column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/100-stacked-column-chart) #### Range charts - [Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart) - [Range column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-column-chart) - [Spline Range area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-range-area-chart) #### Financial stock charts - [OHLC chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/ohlc-chart) - [Candle chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart) #### Radar & Polar charts - [Radar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart) - [Polar chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart) #### Distribution charts - [Histogram chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart) ## Overview The Angular stacked area chart is a chart with y-values stacked on one another in series order. It shows the relationship among individual values to the total sum of the points. ## Multi series You can plot multiple series in a single chart to compare different data sets. Enabling legend and tooltip gives more information about the individual series. ## Marker Mark data points with built-in shapes: circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, pentagons, crosses, and pluses. In addition to these shapes, use images to make the points more attractive. ## Data label Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by a given angle. ## Multiple axes Use multiple axes to plot different data sets that vary widely from each other. ## Zoom and pan Enable zooming and panning when dealing with large amounts of data to focus on particular ranges. ## Empty/null data point Handle missing data elegantly with empty points support. ## Vertical chart The Angular stacked area chart can be transposed vertically to view the data from a different perspective. ## Customization Customize the color and border of the Angular Stacked Area Chart using built-in APIs. ## Angular Stacked Area Chart Code Example Easily get started with Angular Stacked Area using a few simple lines of JS code, as demonstrated below. Also explore our [Angular Stacked Area Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/chart/stacked-area) that shows you how to render and configure the stacked area chart component. - html - ts 'chartcontainer' // app.component.ts //Initializing Primary X Axis // app.module.ts '@syncfusion/ej2-ng-charts' StackingAreaSeries './app.component' ## Learning Resources [Stacked Area Chart User Guide](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/stack-area) Learn the available options to customize Angular Stacked Area Chart. [Stacked Area Chart API Reference](https://ej2.syncfusion.com/angular/documentation/api/chart/series#type) Explore the Angular Stacked Area Chart APIs. [Back to Chart Types](https://www.syncfusion.com/angular-components/angular-charts/chart-types) ##### Angular In-place Editor | HTML5 Edit-in-Place | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-in-place-editor # Quickly edit a value using Angular In-place Editor - Text or a value can be quickly and easily edited in a component. - Built-in support for DatePicker, DropDown List, TextBox, Rich Text Editor, and more. - Highly customizable display mode, action events, buttons, template, and more. ## Overview The Angular In-Place Editor component is most useful for editing a value dynamically within its context (in-place). It has built-in support to handle all the form components, including TextBox, Dropdown List, DatePicker, and Rich Text Editor. It features inline and pop-up modes, and customizable user interface (UI) and events. ## Inline editor Users can quickly edit a text/value in the same place using Angular In-place Editor. ## Popup editor The Angular In-place Editor allows editing a value/text with a small [tooltip](https://www.syncfusion.com/angular-components/angular-tooltip) (popover). The position of the tooltip is also adjustable. ## Built-in form components Users can easily configure form components such as DropDown List, DatePicker, TimePicker, Numeric TextBox, AutoComplete, MultiSelect, etc. within the In-place Editor. ## Quick edit and save The editor allows you to directly manipulate the field value and save the modified value in a server instantly. ## In-place Editor with Rich Text Editor Users can integrate WYSIWYG Rich Text Editor within the In-place Editor, which helps manage CMS kind of applications. ## Form validation The Angular In-place Editor is a form component that seamlessly works with HTML5 form. ## Customizable UI Users can enable box model or dashed line editor based on their application needs. ## Action buttons The editor provides built-in prominent save and cancel buttons for edit actions that are customizable with HTML markup. ## HTML5 components The Angular In-place Editor allows you to integrate user defined custom components such as HTML5 components, Checkbox, Radio Button list, etc. as templates. ## Auto save or cancel Flexible options are available to decide what should happen when the user leaves the editor without using save or cancel. ## Editing events Users can decide whether editing happens on click or double click, or editing icon click alone. ## Themes The Angular In-place Editor component has several built-in themes such as Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and High Contrast. Users can customize any of these built-in themes or create new themes either by overriding Sass variables or using our Theme Studio application. - [Theme Studio application](https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio) ## Developer-friendly APIs Developers can control the appearance and behaviors of the Angular In-place Editor component, including its display modes, component integration, etc. using a rich set of APIs. ## Angular version compatibility With continuous improvement in Angular versions, the Angular Inplace Editor is kept up to date to make it compatible with the latest version. ### Angular 11 - [Getting started with Angular 11 Inplace Editor](https://support.syncfusion.com/kb/article/11031/how-to-get-started-easily-with-syncfusion-angular-11-inplace-editor) - [Angular 11 Inplace Editor example](https://github.com/SyncfusionExamples/ej2-angular-11-inplace-editor) ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Query Builder | Customizable Filter UI | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-query-builder # Angular Query Builder - Build Complex Queries Easily - Easy to use with data visualization components like Grid, Charts, etc. - Outputs in structured JSON format can be parsed to SQL queries. - Fully customizable to include other components like Checkbox, Slider, and Dropdown List using templates. ## Overview The Angular Query Builder is a rich and responsive UI for filtering large amounts of data by creating or editing conditions that can be combined with data visualization controls like Data Grid and Charts to view the filtered data. It outputs structured JSON filters that can be easily parsed to create SQL queries. It allows you to create conditions and group them using AND/OR logic. ### Seamless data binding Bind data seamlessly with various [local and remote data sources](https://ej2.syncfusion.com/angular/documentation/query-builder/data-binding) such as JSON, OData, WCF, and RESTful web services with the help of a data manager. ### Importing and exporting You can [import or export filters](https://ej2.syncfusion.com/angular/documentation/query-builder/import-export) from or to the Query Builder in structured formats like JSON and SQL. ### Adapts to any resolution Query Builder has a highly responsive layout and an optimized design for desktops, tablets, and smartphones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Create your own template designs You can add checkboxes, sliders, and dropdown lists to the Query Builder [using three different templates](https://ej2.syncfusion.com/angular/documentation/query-builder/template) options. ### Attractive, customizable themes Cutting-edge design with several built-in themes, such as Fluent, Tailwind CSS, Bootstrap, Material, and Fabric. Utilize the [online Theme Studio tool](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) to customize themes easily. ### Globalization and localization [Enables users from different locales](https://ej2.syncfusion.com/angular/documentation/query-builder/global-local) to use the component by formatting strings to suit cultural preferences. ## Angular Query Builder Code Example Easily get started with Angular Query Builder using a few simple lines of HTML and TS code, as demonstrated in the following example. Also, explore our [Angular Query Builder Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/query-builder/default), which shows you how to render and configure the Query Builder component in Angular. - html - ts '@syncfusion/ej2-querybuilder' QueryBuilderComponent '@syncfusion/ej2-angular-querybuilder' 'control-content' ## Integration with data manager Integrating the data manager component with Query Builder simplifies communication with a data source and returns the desired result based on the provided filters. - [Data Grid integration example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/query-builder/grid) - [Data manager integration documentation](https://ej2.syncfusion.com/angular/documentation/query-builder/data-binding#data-manager) ## UI customization with templates Add controls like Checkbox, Slider, and Dropdown List to customize the Angular Query Builder using templates. - [Query Builder template example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/query-builder/template.html) ### Header template Users can define their own widgets to customize elements such as and/or/not connectors and add rules/groups buttons using the header template. - [Header template documentation](https://ej2.syncfusion.com/angular/documentation/query-builder/template#header-template) ### Rule template Users can customize all column elements such as fields, operators, and values using the rule template. - [Rule template documentation](https://ej2.syncfusion.com/angular/documentation/query-builder/template#rule-template) ### Value template Users can customize the elements for values using the value template. - [Value template documentation](https://ej2.syncfusion.com/angular/documentation/query-builder/template#column-template) ## Model binding Model binding binds properties for the components used in field, operator, and value columns. To implement model binding, assign the fieldModel, operatorModel, and valueModel properties in the Query Builder. - [Model binding documentation](https://ej2.syncfusion.com/angular/documentation/query-builder/model-binding) ## Summary view The Angular Query Builder supports a summary view that outputs the filter query in SQL format. - [Summary view documentation](https://ej2.syncfusion.com/angular/documentation/query-builder/how-to/summary-view) ## Complex data binding Complex data binding allows users to create subfields within the main fields. This can be useful for representing hierarchical or multilevel data in a more organized and structured way. To create subfields, users can either specify the complex data in nested columns or specify a complex data source and separator. - [Complex data binding documentation](https://ej2.syncfusion.com/angular/documentation/query-builder/data-binding#complex-data-binding) ## Column binding The column definitions are used as the data source schema in the Query Builder UI. This plays a vital role in rendering column values. The Query Builder operations, such as create or delete conditions and create or delete groups, are based on column definitions. - [Column binding documentation](https://ej2.syncfusion.com/angular/documentation/query-builder/columns) ## Filtering Users can create a filter by adding or deleting conditions or groups. Users can get a created filter as SQL query, JSON, and data manager predicates. - [Filtering documentation](https://ej2.syncfusion.com/angular/documentation/query-builder/filtering) ## Appearance customization Change the look and feel of the Angular Query Builder UI by customizing its default appearance and style using HTML or CSS. - [Style and appearance documentation](https://ej2.syncfusion.com/angular/documentation/query-builder/style-and-appearance) ## Lock groups or rules Ensure data integrity by locking groups or rules to prevent unintended interactions. Use the lockRule and lockGroup methods for this purpose. ## Clone groups or rules Effortlessly create duplicates of rules or groups within the Query Builder with the clone support feature. This creates an exact replica next to the original using the cloneRule and cloneGroup methods. ## Drag and drop Users can reposition rules or groups within the component by just dragging and dropping them. This provides an intuitive, flexible way to construct and modify queries. ## Separate connector Users can integrate standalone connectors between rules or groups within the same group. This allows for greater flexibility, as users can connect rules or groups using different connectors, enhancing the complexity and precision of query construction. ## Angular version compatibility The Angular Query Builder is kept up to date to make it compatible with the latest version of Angular. - [More details on Angular Query Builder version compatibility](https://support.syncfusion.com/kb/article/12183/angular-query-builder-version-compatibility) ## Other supported frameworks The Query Builder is available for the Blazor, React, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) - [React Query Builder](https://www.syncfusion.com/react-components/react-query-builder) - [JavaScript Query Builder](https://www.syncfusion.com/javascript-ui-controls/js-query-builder) - [Vue Query Builder](https://www.syncfusion.com/vue-components/vue-query-builder) ## Supported browsers The Angular Query Builder works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/query-builder/getting-started) [How to Customize the UI of the Angular Query Builder](https://www.syncfusion.com/blogs/post/customize-ui-angular-query-builder) [Getting Started with the Angular Query Builder](https://www.syncfusion.com/tutorial-videos/angular/query-builder?title=getting-started-with-the-angular-query-builder) ##### Angular Chips - Customizable Contact Chips | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-chips # Angular Chips - Simple & Flexible Visual Component - Angular Chips are compact elements that represent simple content. - Chip types include action, choice, filter, and input. - Built-in support for customizing chips. ## Overview Angular Chips is a UI control that provides small blocks of text information. Chips can also contain avatars, images, letters, and close icons. They can be used as tags when filtering contacts and email inbox, selecting choices from available options, and providing input to an application. ## Simple UI Angular Chips are compact elements for representing simple content and can also trigger actions when selected. ## Choice chips Chips in Angular can be grouped together as a collection of choices. Choice chips allow users to select from available options. ## Filter chips Filter chips are a collection of chips that allow users to filter the view items based on their choices. - [Filter chip documentation](https://ej2.syncfusion.com/angular/documentation/chips/types#filter-chip) ## Dynamic chips Dynamic chips allow chips to be added or removed. A chip can be created from text provided by the user in an input box or deleted as needed. - [Input chips documentation](https://ej2.syncfusion.com/angular/documentation/chips/types#input-chip) ## UI customization You can customize the chip appearance with avatars, close icons, and more using the built-in options. - [Customization documentation](https://ej2.syncfusion.com/angular/documentation/chips/customization) ## Angular Chips code example Easily get started with Angular Chips using a few simple lines of HTML and TS code, as demonstrated below. Also explore our [Angular Chips example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/chips/default) that shows you how to render the Chips in Angular. - html - ts "control-section" "chip-default-wrapper" "sample-padding" [selectedChips]= "this.filterSelected" "this.choiceSelected" "Set a remainder" "Read my emails" ViewEncapsulation DefaultChipsComponent ## Other supported frameworks Chips is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the different Chips platforms from the links below: - [Blazor Chips](https://www.syncfusion.com/blazor-components/blazor-chips) - [React Chips](https://www.syncfusion.com/react-components/react-chips) - [Vue Chips](https://www.syncfusion.com/vue-components/vue-chips) - [JavaScript Chips](https://www.syncfusion.com/javascript-ui-controls/js-chips) ## Angular version compatibility Angular Chips is kept up to date to make it compatible with the latest version of Angular. ### Angular 11 - [Getting started with Angular 11 Chips](https://support.syncfusion.com/kb/article/10989/how-to-get-started-easily-with-syncfusion-angular-11-chips) - [Angular 11 Chips example](https://github.com/SyncfusionExamples/ej2-angular-11-chips) ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Splitter | Resizable Collapsible Panes | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-splitter # Angular Splitter - Resizable Layout using Split Panes - Resizable and multiple split panes. - Easy to integrate Angular UI component as pane content. - Flexible to design different layouts. ## Overview The Angular Splitter or Material Splitter is a layout user interface (UI) that provides resizable, expandable, collapsible, and nestable panes. It is useful for constructing different layouts in web apps such as Outlook style, Windows Explorer style, code editor UI, and more. The component can integrate other JavaScript UI controls inside its split panes. ## Resizable panes The Angular Splitter component has built-in resizable support that helps widen or shrink the panes. Users can control the resize behavior for individual panes with min and max size validation. - [Resizable panes documentation](https://ej2.syncfusion.com/angular/documentation/splitter/resize/) ## Collapsible panes Built-in support is available for expanding and collapsing the panes by interaction. - [Expand and collapsible panes](https://ej2.syncfusion.com/angular/documentation/splitter/expand-collapse/) ## Multiple panes Users can configure more than 2 panes to construct different layouts using Angular Splitter component such as Outlook-style, Windows explorer-style, Visual Studio code-style, and more. - [Multiple panes documentation](https://ej2.syncfusion.com/angular/documentation/splitter/split-panes/#multiple-panes) ## Content as Angular UI component Users can integrate other Angular UI component (For example: TreeView, ListView, Rich Text Editor), HTML markup, or plain text content in the split panes. - [Splitter with angular ui component](https://ej2.syncfusion.com/angular/documentation/splitter/pane-content/#angular-components) ## Vertical or horizontal orientation The orientation of the split panes can either be horizontal or vertical inside the Angular Splitter component. - [Vertical splitter](https://ej2.syncfusion.com/angular/documentation/splitter/split-panes/#vertical-layout) - [Horizontal splitter](https://ej2.syncfusion.com/angular/documentation/splitter/split-panes/#horizontal-layout) ## Separator (Divider) The Angular Splitter component has a split bar to visually split the panes that contains resize gripper. - [Separator documentation](https://ej2.syncfusion.com/angular/documentation/splitter/split-panes/#separator) ## Nested Angular Splitter Splitters can be nested in various levels within the pane to create complex layout such as code editor-style layout. - [Nested splitter documentation](https://ej2.syncfusion.com/angular/documentation/splitter/split-panes/#nested-splitter) ## Right-to-Left (RTL) The Angular Splitter component supports right-to-left (RTL) rendering. Users can change the text direction and layout of the Splitter component from right to left. It improves the user experience and accessibility for users who use RTL languages. - [RTL documentation](https://ej2.syncfusion.com/angular/documentation/splitter/globalization/#rtl) ## Customization Configure the look and feel of your Angular split bar to match your requirement using several built-in options. - [Splitter customization documentation](https://ej2.syncfusion.com/angular/documentation/splitter/style/) ## Themes The Angular Splitter component has several built-in themes such as Material, Bootstrap, Fluent, Fabric (Office 365), Tailwind CSS, and High Contrast. Users can customize any one of these built-in themes or create new themes to achieve their own desired look and feel either by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio application](https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio/) ## Sizing to content Users can specify pane size either in pixels or in percentage values including min and max range values to accommodate the sizing to its child component or content. - [Pane sizing documentation](https://ej2.syncfusion.com/angular/documentation/splitter/pane-sizing/) ## Other supported frameworks Splitter is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the different Splitter platforms from the links below, - [Blazor Splitter](https://www.syncfusion.com/blazor-components/blazor-splitter) - [React Splitter](https://www.syncfusion.com/react-components/react-splitter) - [Vue Splitter](https://www.syncfusion.com/vue-components/vue-splitter) - [JavaScript Splitter](https://www.syncfusion.com/javascript-ui-controls/js-splitter) ## Angular version compatibility With continuous improvement in Angular versions, the Angular Splitter is kept up to date to make it compatible with the latest version. ### Angular 11 - [Getting started with Angular 11 Splitter](https://support.syncfusion.com/kb/article/11078/how-to-get-started-easily-with-syncfusion-angular-11-splitter) - [Angular 11 Splitter example](https://github.com/SyncfusionExamples/ej2-angular-11-splitter) ## Angular Splitter Code Example Easily get started with the Angular Splitter (Split Pane) using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular Splitter Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/splitter/default) that shows you how to render and configure a Splitter in Angular. - html - ts "control-section default-splitter" `
` ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Stock Chart | Real-Time Financial Graph | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-stock-chart # Angular Stock Chart - Visualize Stock Data Seamlessly - Visualize and analyze stock data with candlestick, OHLC, HiLo Chart. - Interact and explore stock charts with features such as zooming, panning, crosshairs, tooltips, trackballs, period selector, range selector, and more. - Experience seamless interaction and responsiveness with smooth animation. ## Overview The Angular Stock Chart is a well-crafted, easy-to-use financial charting package to track and visualize stock price of any company over a specific period using charting(such as Candlestick, OHLC, HiLo, etc.) and range tools. It also comes with a lot of features such as zooming, panning, tooltip, crosshair, trackball, period selector, range selector, and events to make the stock charts more interactive. ### High performance Several data rendering optimizations have been used to achieve the best possible efficiency when plotting large amounts of data and managing high-frequency, real-time data. ### Elegant animation The Stock Chart for Angular provides fluid animation to present data with smooth transitions. ### Interactive stock chart The [tooltip](https://ej2.syncfusion.com/angular/documentation/stock-chart/tool-tip) and [crosshair](https://ej2.syncfusion.com/angular/documentation/stock-chart/cross-hair) cursor allow users to interact with the chart and obtain detailed information about data points. ### Stock events [Visualize stock events](https://ej2.syncfusion.com/angular/documentation/stock-chart/stock-events) to display many types of market events on the chart. ### Admirable feature set The Angular Stock Chart supports zooming and panning, multiple series, [period selector](https://ej2.syncfusion.com/angular/documentation/stock-chart/period-selector), [range selector](https://ej2.syncfusion.com/angular/documentation/stock-chart/range-selector), [trendlines](https://ej2.syncfusion.com/angular/documentation/stock-chart/trend-lines), and [indicators](https://ej2.syncfusion.com/angular/documentation/stock-chart/technical-indicators). ### Adapts to any resolution Stock Chart has a highly responsive layout and an optimized design for desktops, touchscreens, and phones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Attractive, customizable themes Cutting-edge design with several built-in themes, such as Fluent, Tailwind CSS, Bootstrap, Material, and Fabric. Utilize the [online Theme Studio tool](https://ej2.syncfusion.com/themestudio/?theme=fluent) to customize themes of Stock Chart easily. ### Globalization and localization [Enable users from different locales](https://ej2.syncfusion.com/angular/documentation/stock-chart/localization) to use the control by formatting dates, currency, and numbering to suit preferences. ## Angular Stock Chart Code Example Easily get started with the Angular Stock Chart using a few simple lines of HTML and TS code as demonstrated below. Also explore our [Angular Stock Chart Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/stock-chart/default) that shows you how to render and configure the Stock Chart component in Angular. - html - ts 'stockChartDefault' "display:block;" (tooltipRender)= 'tooltipRender($event)' ViewEncapsulation ITooltipRenderEventArgs IStockChartEventArgs @syncfusion/ej2-angular-charts ./indicator-data DefaultComponent crosshairTooltip AAPL Stock Price ## Interactive chart The end-user experience is greatly enhanced by including a set of interactive features such as zooming, and panning, crosshair, trackball, events, and selection. - [Crosshair documentation](https://ej2.syncfusion.com/angular/documentation/stock-chart/cross-hair) ## Candlestick with volume Angular Candlestick Chart allows analyzing both price action and volume at a glance. - [Candlestick with volume example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/stock-chart/multi-pane) ## Multiple series Plot multiple series in a single chart to compare different stock values. Enabling a legend and a tooltip gives more information about an individual series. - [Multiple series example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/stock-chart/multiple-series) ## Plot band Draw special attention to any region of the chart or graph with the help of strip lines. - [Plot band example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/stock-chart/strip-line) ## Range selector Use the range selector to filter a date range for data that needs to be visualized. - [Range selector documentation](https://ej2.syncfusion.com/angular/documentation/stock-chart/range-selector) ## Period selector Use the period selector to choose a range of data points at predetermined intervals with a single click. - [Period selector documentation](https://ej2.syncfusion.com/angular/documentation/stock-chart/period-selector) ## Series type Visualize data using different series types like candle, OHLC, HiLo, line, spline, area, and spline area. The series type can be changed using the series options in the period selector. - [Series documentation](https://ej2.syncfusion.com/angular/documentation/stock-chart/series-types) ## Legend Legends provide additional information helpful in identifying individual data or series in a stock chart. - [Legend documentation](https://ej2.syncfusion.com/angular/documentation/stock-chart/legend) ## Indicators Use technical indicators to analyze the past and predict the future market trends based on historic price, volume, or open interest. The Stock Chart supports 10 different types of indicators. You can add these indicators to a Stock Chart using the indicator option in the period selector. - [Indicators documentation](https://ej2.syncfusion.com/angular/documentation/stock-chart/technical-indicators) ## Trendlines Predict future trends with predetermined data for any measurement such as the stock market or target revenue with the help of trendlines. You can add trendlines to a Stock Chart using the trendlines options in the period selector. - [Trendlines documentation](https://ej2.syncfusion.com/angular/documentation/stock-chart/trend-lines) ## Print and export Export Angular Stock Chart to PDF documents or to image formats such as SVG, PNG, and JPEG as well as export chart data to XLSX and CSV formats in the client-side. Print the rendered stock charts and graphs directly from the browser. - [Print and Export documentation](https://ej2.syncfusion.com/angular/documentation/stock-chart/export-print) ## Axis type Visualize data using different axis types like numeric, logarithmic, date-time, and date-time category. And this chart’s axis elements can be customized further to make an axis more readable. - [Stock chart Axis types documentation](https://ej2.syncfusion.com/angular/documentation/stock-chart/axis-types) ### Keyboard navigation Every element in Angular Stock Charts is keyboard accessible. Major features like tooltip, trackball, legend, collapse, zoom, and pan can be used through keyboard commands alone. No mouse interaction is required. This helps in creating highly accessible applications. - [Keyboard navigation documentation](https://ej2.syncfusion.com/angular/documentation/stock-chart/accessibility#keyboard-navigation) ### Screen reader The Angular Stock Chart view has complete WAI-ARIA accessibility support. The Stock Chart UI includes high-contrast visual elements that help visually impaired people to have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers. ### Right to left (RTL) Right-to-left rendering allows displaying the text and layout of the Stock Chart from right to left. This improves the user experience and accessibility for RTL languages. ## Angular version compatibility With continuous improvement in Angular versions, the Angular Stock Chart is kept up to date to make it compatible with the latest version. - [More details on Angular Stock Chart version compatibility](https://support.syncfusion.com/kb/article/12221/angular-stock-chart-version-compatibility?isInternalRefresh=False) Multi-series stock charts 10+ interactive demos Financial indicators [Explore Complete Angular Comparison](https://www.syncfusion.com/pages/angular-competitive-upgrade/) ## Other supported frameworks The Stock Chart is available for the Blazor, React, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) - [React Stock Chart](https://www.syncfusion.com/react-components/react-stock-chart) - [JavaScript Stock Chart](https://www.syncfusion.com/javascript-ui-controls/js-stock-chart) - [Vue Stock Chart](https://www.syncfusion.com/vue-components/vue-stock-chart) ## Supported browsers The Angular Stock Chart works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/stock-chart/getting-started) ##### Angular TreeGrid | Material Tree Table | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-tree-grid # Angular Tree Grid - Powerful Tree List Component - Load large amounts of data by dynamically loading child data on demand. - Include flexible UI interactions like expanding and collapsing parent records, dialog editing, and more. - Attractive UI appearance with built-in themes such as fabric, bootstrap, etc. ## Overview The Angular TreeGrid is a feature-rich control used to visualize self-referential, hierarchical data effectively in a tabular format (a tree-like structure). Its rich feature set includes many functionalities: data binding, virtualization, editing, sorting, searching, filtering, infinite scrolling, paging, frozen rows and columns, exporting to multiple formats, aggregating rows, and more. ### High performance Display data hierarchically, its optimized design provides high performance and [load millions of records](https://www.syncfusion.com/angular-components/angular-tree-grid/performance) in just a few seconds. ### Seamless data binding Bind data seamlessly with various [local and remote data sources](https://ej2.syncfusion.com/angular/documentation/treegrid/data-binding/data-binding) such as JSON, OData, WCF, and RESTful web services with the help of a data manager. ### Self-referential, hierarchical grid Angular TreeGrid is designed to visualize [self-referential and hierarchical](https://ej2.syncfusion.com/angular/documentation/treegrid/data-binding/local-data) in a tabular format. This in turns displays the relationship between parent and child records. ### Flexible editing The Angular Tree Grid performs [create, read, update, and delete operations (CRUD)](https://www.syncfusion.comangular-tree-grid/editing) with observable data. It edits with an Array of JSON or remote data service with the data manager. ### Adapts to any resolution The Tree Grid has a [highly responsive layout](https://ej2.syncfusion.com/angular/documentation/treegrid/adaptive) and an optimized design for desktops, touch screens, and smart phones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Create your own template designs Using templates, users can create a custom UI in the Angular Tree Grid based on their application need using a [wide range of template](https://ej2.syncfusion.com/angular/documentation/treegrid/columns/column-template) options. ### Attractive customizable themes Cutting edge design with 5+ built-in themes such as Fluent, Tailwind CSS, Bootstrap, Material, Fabric, and more. Utilize the [online Theme Studio tool](https://ej2.syncfusion.com/themestudio/?theme=fluent) to customize themes of Angular Tree Grid easily. ### Globalization and localization [Enables users from different locales](https://ej2.syncfusion.com/angular/documentation/treegrid/global-local) to use the Tree Grid by formatting dates, currency, and numbering to suit their preferences. ## Angular Tree Grid Code Example Easily get started with the Angular Tree Grid (Tree Table) using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular Tree Grid Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/treegrid-overview) that shows you how to render and configure a Tree Grid in Angular. - html - ts [treeColumnIndex]= ej2-treegrid-container DefaultComponent ## Skeleton loading indicator The Tree Grid shows the shimmer effect as a loading indicator while fetching data and binding it to the tree grid during initial rendering, refreshing, or after performing grid actions like sorting, filtering, and more. The Tree Grid offers two types of effects, spinner and shimmer. - [Shimmer loading indicator documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/loading-animation) - [Example for shimmer loading indicator](https://ej2.syncfusion.com/angular/demos/#/material/treegrid/loading-animation) ## Column Columns define the schema of a data source in Angular Tree Grid. Features include formatting, column definitions, text wrapping, column chooser, column menu, column reordering, and other important features. - [More details on column behaviors](https://www.syncfusion.comangular-tree-grid/column) ## Paging Through paging, a segment of data can be viewed from the assigned data source. The Angular Tree Grid offers built-in pager UI with options to customize its entire UI. It also has an on-demand paging mode for effective data retrieval from remote web services. - [More details on paging features](https://www.syncfusion.comangular-tree-grid/pagination) ## Sorting The Angular Tree Grid allows users to sort a column by simply clicking on the header. A Ctrl + header click performs multi-sorting. Sort data in either ascending or descending order. - [More details on sorting features](https://www.syncfusion.comangular-tree-grid/sorting) ## Filtering Filtering helps view specific or related records that meet a given filtering criteria. It supports various filter types that include powerful Excel-like filter. The Angular Tree Grid filter allows users to choose appropriate filter types, define their own custom filtering logic, and customize the filtering UI based on their application needs. Filtering with related parent or child records can be defined. - [More details on filtering features](https://www.syncfusion.comangular-tree-grid/filter) ## Selection Angular Tree Grid allows selecting rows or cells. One or more rows or cells can also be selected by holding Ctrl or Command, or programmatically. - [More details on selection features](https://www.syncfusion.comangular-tree-grid/selection) ## Editing The Angular TreeGrid provides full support to create, read, update, and delete operations (CRUD). In addition to built-in editor components to edit a particular column value, using template support users can create custom editor components that suit their application needs. It performs editing operations with JSON collection or remote data service with the help of data manager. - [More details on editing features](https://www.syncfusion.comangular-tree-grid/editing) ## Row drag and drop The Angular TreeGrid allows users to drag and drop rows within the same or another tree grid. This functionality is especially useful for reorganizing data and creating a more intuitive user experience. - [Row drag and drop documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/row/row-drag-and-drop) - [Example for row drag and drop](https://ej2.syncfusion.com/angular/demos/#/material/treegrid/drag-drop) ## Aggregation Aggregates for column values can easily be displayed using the aggregate feature. Aggregates can be customized to show their value in every hierarchy with a set of predefined summary types. - [More details on aggregation](https://www.syncfusion.comangular-tree-grid/aggregation) ## Frozen columns Frozen columns are visible at the left or right or both the sides of the Angular Tree Grid and make the remaining grid content scrollable. It is mainly used to compare cell values. - [Frozen columns documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/frozen) - [Example for frozen columns](https://ej2.syncfusion.com/angular/demos/#/material/treegrid/frozen-column) ## Search You can search the records using the search method. Integrate search text box in the Angular TreeGrid’s toolbar by adding search items. - [Searching documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/searching) - [Example for searching](https://ej2.syncfusion.com/angular/demos/#/material/treegrid/search) ## Custom tooltip Angular TreeGrid component allows you to set tooltips for treegrid cells. Hover over the tree nodes to display tooltip text. - [Custom tooltip documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/how-to/custom-tool-tip-for-columns) ### Excel, PDF, CSV export Easily export the HTML5 Tree Grid control in various file formats such as Excel, PDF, or CSV. Users can also programmatically customize the exported document. - [Export to Excel documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/excel-export/excel-export) - [Export to PDF documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/pdf-export/pdf-export) - [Example for exporting](https://ej2.syncfusion.com/angular/demos/#/material/treegrid/exporting-default) ### Print Users can print data either by using the print option from the toolbar or programmatically. Print all the rows of a Angular Tree Grid regardless of the number of pages or print the currently viewed page alone. - [Print Tree Grid documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/print) - [Example for print](https://ej2.syncfusion.com/angular/demos/#/material/treegrid/print) ### Row height Row height is a major factor when displaying the number of records in the view port, and it is effortlessly customizable based on the application’s UI requirement. It is also possible to set row height conditionally. - [Example for row height](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/rowheight) - [Row height documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/row/row#row-height) ### Copy to clipboard The clipboard provides an option to copy selected rows or cells’ data into the clipboard. Use Ctrl+C and Ctrl+Shift+H key combinations to copy data with and without headers, respectively. - [Example for copy to clipboard](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/clipboard) - [Copy to clipboard documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/clipboard) ### Context menu The context menu improves user action with Angular Tree Grid using popup menu. It appears when the cell, header, or pager is right clicked. In addition to built-in default menu items, it allows you to add custom context menu items. - [Example for context menu](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/contextmenu-default) - [Context menu documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/context-menu) ### Width and height Allows changing the Angular Tree Grid size by setting the width and height properties. Horizontal and vertical scrollbars will appear when the content overflows the Angular Tree Grid element. For the Angular Tree Grid to fill its parent container, the user must simply set the height and width to 100%. - [Treegrid scrolling example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/default-scrolling) - [Treegrid scrolling documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/scrolling) ### Stacked headers Stacked headers allow grouping and visualizing column headers in a stacked manner. There is no limit to the number of columns that can be stacked. Allows the user to perform all Angular TreeGrid actions, even when the columns are stacked. - [Example for stacked headers](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/stackedheader) - [Stacked header documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/columns/column-headers#stacked-header) ### Keyboard navigation The Tree Grid ensures that every cell is keyboard accessible. Major features like expanding or collapsing child rows, sort, select, and edit can be performed using keyboard commands alone; no mouse interaction required. This helps in creating highly accessible applications using this component. - [Keyboard navigation documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/accessibility#keyboard-navigation) - [Example for keyboard navigation](https://ej2.syncfusion.com/angular/demos/#/material/treegrid/keyboard) ### Screen reader The Angular Tree Grid has complete WAI-ARIA accessibility support. Its UI includes high-contrast visual elements, helping visually impaired people have the best viewing experience. Also, the valid UI descriptions are easily accessible through assistive technologies such as screen readers. ### Right to left (RTL) Right-to-left rendering allows displaying the text and layout of the Angular Tree Grid from right to left. This improves the user experience and accessibility for RTL languages. - [RTL documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/global-local#right-to-left-rtl) ## Angular version compatibility With continuous improvement in Angular versions, the Angular Tree Grid is kept up to date to make it compatible with versions starting from 4 to the latest version. - [More details on Angular Tree Grid version compatibility](https://support.syncfusion.com/kb/article/12360/angular-tree-grid-version-compatibility) Hierarchical data binding 60+ interactive demos [Explore Complete Angular Comparison](https://www.syncfusion.com/pages/angular-competitive-upgrade/) ## Other supported frameworks The Tree Grid is available for the Blazor, React, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [Blazor Tree Grid](https://www.syncfusion.com/blazor-components/blazor-tree-grid) - [React Tree Grid](https://www.syncfusion.com/react-components/react-tree-grid) - [JavaScript Tree Grid](https://www.syncfusion.com/javascript-ui-controls/js-tree-grid) - [Vue Tree Grid](https://www.syncfusion.com/vue-components/vue-tree-grid) ## Supported browsers The Angular Tree Grid works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/getting-started) ##### Local/Remote Data Binding in Angular Tree Table/Tree Grid | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-tree-grid/data-binding # Angular Tree Grid/Tree Table/Tree List Data binding ## Overview The Angular TreeGrid data binding feature supports to bind data seamlessly with various local and remote data sources such as Array of JSON, RESTful services, OData services, and WCF services. It uses the data manager to handle data and supports customizing data requests and processing. ## JavaScript array collection Binds the Tree Grid with an array of JSON, allowing it to work smoothly in single-page applications (SPA). The Angular Tree Grid data binding supports both hierarchical and self-referential JSON data structures. - [JSON binding documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/data-binding/local-data/) - [Example for JSON binding](https://ej2.syncfusion.com/angular/demos/#/material/treegrid/localdata) ## Remote data binding Binding the Angular Tree Grid with RESTful services allows data from the services to be consumed using the data manager. It supports various data adaptors such as OData, ODataV4, URL, and Web API for working with a particular data service - [Example for remote data binding](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/remotedata) - [Remote data binding documentation](https://ej2.syncfusion.com/angular/demos/#/material/treegrid/remotedata) ## Observable binding An Observable is used extensively by Angular since it provides significant benefits over techniques for event handling, asynchronous programming, and handling multiple values. TreeGrid data can be consumed from an Observable object. - [Observable binding documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/observables/) Hierarchical data binding 60+ interactive demos [Explore Complete Angular Comparison](https://www.syncfusion.com/pages/angular-competitive-upgrade/) ##### Column for Angular-tree-grid | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-tree-grid/column # Angular Tree Grid/Tree Table/Tree List Column Behaviors ## Overview Columns define the schema of a data source in Angular Tree Grid component. It supports formatting, column definitions, column chooser, column menu, column reordering, and other important features. The operations such as sorting, filtering, and searching can be performed based on column definitions ## Define columns You can define the needed columns explicitly in a Tree Grid. You can also enhance the appearance of columns by setting the header text, text alignment, cell value format, and width. ## Auto size Users can interactively auto size column width to show its full content by double clicking on column borders. It also supports triggering auto sizing to the required columns programmatically. - [Columns auto sizing documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/columns/auto-fit-columns/) ## Cell Attributes Users can decorate each cell element of a Tree Grid with their own attributes by customizing styles, add additional class names, etc. - [Custom attributes documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/cell/cell#custom-attributes) ## Text wrap Wraps the Tree Grid cell text to the next line when it is too large to fit inside a cell. Users can wrap the header or content cell’s text by setting the available wrap mode options. - [Text wrap example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/autowrap) - [Text wrap documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/cell/auto-wrap) ## Reorder Reorder Tree Grid columns either through user interaction or programmatically. Simply dragging a column header into the desired column position will reorder the columns of a Tree Grid. - [Column Reorder example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/reorder) - [Column Reorder documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/columns/column-reorder) ## Resize Column resize allows changing column width by simply dragging the right corner of the column header. A scroll bar appears when the Tree Grid content width exceeds the element width. - [Column Resize example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/resizing) - [Column Resize documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/columns/column-resizing) ## Column menu Allows performing various column-based actions with the help of TreeGrid column menu. Menu items can also be customized to list only the preferred actions. - [Column menu example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/columnmenu) - [Column menu documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/columns/column-menu) ## Value accessors The value accessors specify how the cell value is to be retrieved from the data. The preferred value accessors can be used when the row data is not just a simple object. - [Value accessor documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/columns/column-rendering#using-valueaccessor-property) ## Cell styling The Angular Tree Grid supports customization of cell styles by using CSS or programmatically - [Cell styling documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/cell/cell/#customize-cell-styles) ## Column chooser The column chooser provides a list of column names paired with check boxes that allows the user to toggle visibility. This helps the users to control the column visibility through an interactive UI. - [Column chooser demo](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/columnchooser) - [Column chooser example](https://ej2.syncfusion.com/angular/demos/#/material/treegrid/columnchooser) Hierarchical data binding 60+ interactive demos [Explore Complete Angular Comparison](https://www.syncfusion.com/pages/angular-competitive-upgrade/) ##### Angular Editable Tree Table/Tree Grid | Custom Editor | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-tree-grid/editing # Angular Tree Grid/Tree Table/Tree List Editing ## Overview The Angular Editable Tree Grid / Table provides full support to create, read, update, and delete operations (CRUD). In addition to built-in editor components to edit a particular column value, using template support users can use custom editor components that suit their application needs. It performs editing operations with Array of JSON or remote data service with the help of data manager. ## Edit modes The Angular Tree Grid editing supports various edit modes such as cell, row, and dialog. These provide an interactive UI to add and edit records. In addition, editing can be performed programmatically. - [Dialog editing example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/dialogediting) - [Dialog editing documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/editing/dialog-editing) - [Cell editing example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/inlineediting) - [Cell editing documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/editing/cell-editing) ## Bulk editing Bulk editing allows you to save the added, edited, and deleted records in a single request. This feature is used in the Tree Grid by enabling the batch editing mode. This provides an Excel-like editing experience and saves all the changes. - [Example for batch editing](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/batchediting) - [Batch editing documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/editing/batch-editing) ## AddRow position New records can be inserted in different positions such as below, above, child to the selected record, and top or bottom of the data source. - [Addrow position documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/editing/row-position) ## Custom editor/customizable edit UI The editor for a Tree Grid cell can be specified by providing the edit type. The preferred editor can also be defined for specific columns. - [Custom editor documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/editing/edit-types#render-custom-cell-editors) - [Example for custom editor](https://ej2.syncfusion.com/angular/demos/#/material/treegrid/edittemplate) ## Validation When updating cells or rows, Tree Grid validates user inputs. This helps users to improve the overall data quality by validating user input for accuracy and completion. Users can also customize validation criteria and message according to their requirement. - [Validation documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/editing/validation) Hierarchical data binding 60+ interactive demos [Explore Complete Angular Comparison](https://www.syncfusion.com/pages/angular-competitive-upgrade/) ##### Aggregation with Angular Tree Table/Tree Grid | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-tree-grid/aggregation # Angular Tree Grid/Tree Table/Tree List Aggregation ## Built-in aggregate types The Angular Tree Grid relies on the data manager to aggregate column values. Default aggregate types such as sum, max, min, average, and count can be used. Formatted aggregate values are displayed in aggregate-enabled columns - [Built-in aggregates documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/aggregates/aggregates/#built-in-aggregate-types) ## User-defined aggregate types The Angular Tree Grid allows users to define custom aggregate logic for a particular aggregate column. This requires a custom aggregate function that holds custom logic to calculate aggregate value of the TreeGrid columns. - [Custom aggregates documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/aggregates/custom-aggregate/) Hierarchical data binding 60+ interactive demos [Explore Complete Angular Comparison](https://www.syncfusion.com/pages/angular-competitive-upgrade/) ##### Pagination in Angular Tree Table/Tree Grid | Pager | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-tree-grid/pagination # Angular Tree Grid/Tree Table/Tree List Paging ## Overview Through Angular Tree Grid paging, a segment of data can be viewed from the assigned data source. The Angular Tree Grid offers built-in pager UI with options to customize its entire UI. It also has an [on-demand paging](https://ej2.syncfusion.com/angular/documentation/treegrid/data-binding/remote-data/) mode for effective data retrieval from remote web services. ## Page Size modes Two behaviors are available in Tree Grid paging to display certain number of records in a current page. It is based on individual records count or the root level records count. - [Page size mode documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/paging/#page-size-mode) - [Example for page size mode](https://ej2.syncfusion.com/angular/demos/#/material/treegrid/paging-api) ## Page size drop-down The page size can be changed using the page size drop-down in the pager. The Angular Tree Grid allows users to customize the values in the page size drop-down. - [Page size drop down example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/default-paging) - [Page size drop down documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/paging#pager-with-page-size-dropdown) ## On-demand The pager UI of the Tree Grid requests data on-demand when navigating to another page. Using simple properties, the pager can be customized. ## Customizable pager UI Using pager template, users can customize the pager UI. - [Custom pager documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/paging#pager-template) Hierarchical data binding 60+ interactive demos [Explore Complete Angular Comparison](https://www.syncfusion.com/pages/angular-competitive-upgrade/) ##### High Performance Angular Tree Table/Tree Grid | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-tree-grid/performance ## Overview The Angular Tree Grid has optimized design for high-performance. It loads millions of records in just a few seconds without any performance degradation with the help of row and column virtualization. ## Virtualization Angular Tree Grid virtualization is a technique that limits UI rendering to just the parts that are currently visible. This functionality helps improve performance on component’s initial rendering time. ### Row virtualization Row virtualization in Angular Tree Grid allows loading and rendering rows only in the content viewport. It renders rows dynamically when scrolling vertically. - [Row virtualization documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/virtual-scroll#row-virtualization) - [Example for row virtualization](https://ej2.syncfusion.com/angular/demos/#/material/treegrid/virtual-scrolling) ### Column virtualization Column virtualization allows the columns of the data source to be virtualized and renders them in the viewport. Scroll horizontally to view more grid columns. - [Column virtualization documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/virtual-scroll/#column-virtualization) Hierarchical data binding 60+ interactive demos [Explore Complete Angular Comparison](https://www.syncfusion.com/pages/angular-competitive-upgrade/) ##### Row | Angular Tree Grid/Tree Table | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-tree-grid/row ## Overview Rows in Tree Grid represents each task or data object information from the data source. It supports expanding/collapsing child rows, reordering of rows, indent/outdent rows to change its hierarchy levels and much more features. ## Expand and collapse parent rows Users can expand and collapse parent rows at any time to view information when needed. All the rows or only specific rows can be collapsed programmatically at initial rendering. ## Row reordering Rows can be reordered by drag and drop action to change its position and hierarchy levels. A child row from a parent row can be reordered as sibling to the same parent row or as child to any other parent row. - [Example for row reordering](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/drag-drop) - [Row reordering documentation](https://ej2.syncfusion.com/angular/demos/#/material/treegrid/drag-drop) ## Row template and detail template Users can create custom UI for row elements in the table of a TreeGrid. Alternatively, additional information about a data row can also be displayed beneath each row. - [Example for row template](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/row-template) - [Row template documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/row/row-template) - [Documentation for detail template](https://ej2.syncfusion.com/angular/documentation/treegrid/row/detail-template/) Hierarchical data binding 60+ interactive demos [Explore Complete Angular Comparison](https://www.syncfusion.com/pages/angular-competitive-upgrade/) ##### Filtering in Angular Tree Table/Tree Grid | Filter Types | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-tree-grid/filter # Angular Tree Grid/Tree Table/Tree List Filtering ## Overview The Angular Tree Grid filtering helps view particular or related records, which meet a given filtering criteria. It supports various filter types that include powerful Excel-like filter. The Angular Tree Grid filter allows users to choose appropriate filter type, define their own custom filtering logic, and customize the filtering UI based on their application needs. Filtering with related parent or child records can be defined. ## Hierarchy modes Allows users to view parent or child records or both relative records along with the filtered records in a Tree Grid component. Helps users to be aware of record’s hierarchy even when filtering. - [Filter hierarchy mode documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/filtering/filtering/#filter-hierarchy-modes) ## Powerful Excel-like filter The Excel-like filter helps create complex filter criteria for a column by allowing users to select possible filter values from a check box list. Additionally, users can build complex filter criteria using advanced filter option. - [Excel filter example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/filtermenu) - [Excel filter documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/filtering/excel-like-filter) ## Custom filter/extensible filter UI Filter UI and logic for a column will be applied based on the column type. It is also possible for the users to define their own custom filter UI and filtering logic for a column to suit their application needs. - [Custom filter UI documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/filtering/filter-bar/#filter-bar-template-with-custom-component) - [Example for custom filter](https://ej2.syncfusion.com/angular/demos/#/material/treegrid/filter) ## Search Search Tree Grid rows using the built-in search box in the toolbar or programmatically through an external button. Using built-in settings, search behavior can be customized. Different search modes are available to search and display rows along with the parent or child rows or with both parent and child rows. - [Searching example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/search) - [Searching documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/searching) Hierarchical data binding 60+ interactive demos [Explore Complete Angular Comparison](https://www.syncfusion.com/pages/angular-competitive-upgrade/) ##### Selection in Angular Tree Table/Tree Grid | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-tree-grid/selection # Angular Tree Grid/Tree Table/Tree List Selection ## Overview The Angular Tree Grid allows selecting rows or cells. One or more rows or cells can also be selected by holding Ctrl or Command or Shift, or programmatically. ## Row selection The Angular Tree Grid allows you to select a range of rows or a single row by just clicking or tapping the row. To perform multi-selection, press and hold CTRL or SHIFT to select the desired row or range of rows. - [Example for row selection](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/selection) - [Row selection documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/selection/row-selection) ## Cell selection A range of cells can be selected by dragging the pointer over cells. Also, press and hold CTRL or SHIFT while clicking a cell to select the desired cell or range of cells - [Cell selection documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/selection/cell-selection/) - [Example for cell selection](https://ej2.syncfusion.com/angular/documentation/treegrid/selection/cell-selection) ## Checkbox selection Users can select multiple Tree Grid records with the help of a checkbox in each row. The selection persists even after performing any action in the Tree Grid. It also provides an option to select or deselect all the rows in a Tree Grid using a checkbox in the corresponding column header. - [Checkbox selection documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/selection/check-box-selection/) - [Example for checkbox selection](https://ej2.syncfusion.com/angular/demos/#/material/treegrid/checkbox-selection) Hierarchical data binding 60+ interactive demos [Explore Complete Angular Comparison](https://www.syncfusion.com/pages/angular-competitive-upgrade/) ##### Sortable Angular Tree Table/Tree Grid | Custom Sorting | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-tree-grid/sorting # Angular Tree Grid/Tree Table/Tree List Sorting ## Overview The Angular Tree Grid allows users to sort rows either in the ascending or descending order against a column by simply clicking the header. Sort multiple column’s data by holding the Ctrl key and clicking the header. ## Sort multiple columns Sort Tree Grid rows using multiple columns by clicking on the desired column headers and holding Ctrl or Command keys. - [Sorting documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/sorting) ## Custom sort function Built-in options are provided to define the custom sort logic for the desired columns. *[Custom sorting documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/sorting#custom-sorting) Hierarchical data binding 60+ interactive demos [Explore Complete Angular Comparison](https://www.syncfusion.com/pages/angular-competitive-upgrade/) --- title: Angular Gantt Chart | Timeline Chart | Syncfusion description: Angular Gantt Chart is a project planning and management tool used to display and manage hierarchical tasks with timeline details. image: "https://ft.syncfusion.com/featuretour/ft-og-images/angular/angular-gantt-chart.png" url: "https://www.syncfusion.com/angular-components/angular-gantt-chart" --- # Angular Gantt Chart - A Quick and Easy Task Scheduling Component - A complete project management tool for scheduling and planning projects. - You can manage and monitor specific tasks and resources in a project. - The intuitive user interface lets you manage complex projects on the go. ## Overview The Angular Gantt Chart is a project planning tool used to display and manage hierarchical tasks with timeline details. It helps assess how long a project should take, determine the resources needed, manage the dependencies between tasks, and plan the order in which the tasks should be completed. ## AI-ready Gantt Chart for smarter project planning Plan and manage projects intelligently with this AI-ready Gantt Chart. Prioritize tasks, predict timelines, and optimize resources effortlessly for peak productivity. - Auto-prioritize tasks: Let AI sort tasks by urgency so your team stays focused. - Timeline prediction: Forecast milestones and completion dates with machine learning. ### High performance [Virtual scrolling in the Angular Gantt Chart](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/gantt/load-on-demand) allows you to load large amounts of data without performance degradation. ### Seamless data binding [Bind data with various local and remote data](https://www.syncfusion.com/angular-components/angular-gantt-chart/data-binding) sources such as JSON, OData, WCF, and RESTful web services with the help of a data manager. ### Adapts to any resolution The Gantt Chart has a highly responsive layout and an optimized design for desktops, tablets, and phones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Elegant animation The Gantt Chart for Angular provides fluid animation to present data with smooth transitions. ### Templates Use templates to customize taskbars and grid columns. Customize the timeline header for a better view of the data. ### Timeline zooming Increase or decrease the width of timeline cells and change the timeline units dynamically with [zooming](https://ej2.syncfusion.com/angular/documentation/gantt/timeline/zooming). This lets you clearly view tasks in a project, from minute to decade. ### Attractive, customizable themes Create cutting-edge design with several built-in themes, such as Fluent, Tailwind CSS, Bootstrap, Material, and Fabric. Utilize the [online Theme Studio tool](https://ej2.syncfusion.com/themestudio/?theme=fluent) to customize themes of Gantt Chart easily. ### Globalization and localization [Enable users from different locales](https://ej2.syncfusion.com/angular/documentation/gantt/global-local) to use the control by formatting dates, currency, and numbering to suit preferences. ## Plan projects smarter with the AI-driven Gantt Chart Manage projects efficiently using the AI-ready Angular Gantt Chart. Prioritize tasks, forecast timelines, and allocate resources with precision for maximum productivity. - Automatically prioritize tasks: AI ranks tasks by urgency to keep your team focused. - Timeline prediction: Use AI insights to estimate milestones and delivery dates. ## Angular Gantt Chart code example Easily get started with the Angular Gantt Chart using a few simple lines of HTML and TS code, as demonstrated below. Also explore our [Angular Gantt Chart example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/gantt/default), which shows you how to render and configure the component in Angular. - html - ts "control-section" projectStartDate highlightWeekends 'ej2-ganttdefault' GanttDefaultComponent ## Timeline The Angular Gantt Chart supports different, configurable timeline views for hour, day, week, month, and year. - [More details on timeline views](https://www.syncfusion.com/angular-components/angular-gantt-chart/timeline) ## Task scheduling and relationships Users can easily plan and schedule tasks in both auto and manual mode to track their projects. Create relationships between different tasks in project management. When a project is complex and contains many tasks that depend on the completion of others, task dependencies enable you to decide when a task can be started or finished using finish-to-start, start-to-finish, start-to-start, and finish-to-finish task link types. - [More details on task scheduling](https://www.syncfusion.com/angular-components/angular-gantt-chart/scheduling) ## Critical path The Angular Gantt Chart offers support for a critical path, representing a series of tasks that directly influence the calculated finish date of a project. If any task within the critical path is delayed, it leads to a delay in the timeline. This feature is particularly useful for managing projects with fixed deadlines, allowing users to identify and prioritize tasks crucial for timely delivery. ## Split and merge tasks The split task feature allows users to split a task or interrupt the work during planned or unforeseen circumstances. It makes the view dynamic and interactive, improving the visualization of the project taskbar. Multiple segments can be split and merged within a taskbar. ## Resource view Visualize the list of tasks assigned to each resource in a hierarchical manner. Multiple tasks assigned to each resource can be visualized in a row when the records are in a collapsed state. ## Work breakdown structure (WBS) column The WBS column organizes project tasks into a multilevel hierarchy by assigning unique codes to each task. This structure improves visibility and control over complex task relationships, making it well-suited for projects such as construction, enterprise systems, and large-scale. ## Editing The Gantt Chart provides full support for create, read, update, and delete (CRUD) operations. In addition to using built-in editor controls to edit a particular column value, users can create custom editor controls using template support. Users can also edit the tasks fields directly in their respective cells using a dialog or interactively using taskbars. - [More details on editing features](https://www.syncfusion.com/angular-components/angular-gantt-chart/editing) ## Filtering Data can be filtered using the filter option in each column and search option in the toolbar. The component supports two filter types: Excel-like filters and menu filters. The Angular Gantt Chart allows users to choose appropriate filter types, define their own custom filtering logic, and customize the filtering UI. Filtering with related parent or child records can be defined. - [More details on filtering feature](hhttps://www.syncfusion.com/angular-components/angular-gantt-chart/filtering) ## Undo and redo The undo feature enables users to revert the most recent action performed in the Gantt Chart. The redo feature allows users to reapply an action that was previously undone. ## Virtual scrolling Virtual scrolling in the Angular Gantt Chart allows you to load large amounts of data without performance degradation. In row virtualization mode, all tasks are fetched initially from the data source and rendered in the DOM within a compact viewport area. ## Frozen columns Frozen columns stay fixed on the left, right, or both sides of the chart, while the rest of the content scrolls independently. This makes it easy to keep important task identifiers visible at all times. ## Auto scroll to taskbar on row selection Focus on the tasks that are not visible but scheduled later along the timeline by selecting their rows in the grid section. ## Highlight days and events Highlight important days or events in a project using event markers. ## Baselines Compare the current task’s progress with the planned timeline using baselines. ## Resource allocation Allocate multiple resources like staff, equipment, and materials to each task. ### Data markers Display events for a specific task that can be placed on the timeline on any given date. ### Tooltip The tooltip displays task information while the mouse hovers over the task and editing actions for the taskbar and connector lines. ### Holidays Display nonworking days using the holidays feature. ### Row height and taskbar height Row height is a major factor when displaying records in the viewport and it can be customized effortlessly. The height of child taskbars and parent taskbars can be customized using the taskbarHeight property. ### Context menu The context menu improves user interaction with Angular Gantt Chart component by providing a pop-up menu. It appears when a cell or header is right-clicked. In addition to built-in, default menu items, it allows you to add custom items. ### Exporting Easily export the Angular Gantt Chart component in file formats such as Excel, CSV, and PDF. ### Keyboard navigation Every cell in the Angular Gantt Chart is keyboard-accessible. Major features like sorting, selection, and editing can be performed using keyboard commands alone; no mouse interaction is required. This helps in creating highly accessible applications using this component. ### Screen reader The Angular Gantt Chart has complete WAI-ARIA accessibility support. The UI includes high-contrast visual elements to help people with low vision have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers. ## Mobile-optimized and touch-friendly The Angular Gantt Chart has a highly responsive layout and fine touch support for desktops, tablets, and smartphones. ### Touch support User-friendly touch gestures and an interactive UI design help produce the best user experience. All Gantt Chart features work on touch devices with zero configuration. ### Responsive The Angular Gantt Chart has a responsive layout, allowing it to be viewed on various devices. It is also possible to hide specific columns for particular screen sizes using column-based media query support. ## Angular version compatibility The Angular Gantt Chart is kept up-to-date to make it compatible with Angular versions from 4 to the latest version. - [More details on Angular Gantt Chart version compatibility](https://support.syncfusion.com/kb/article/12094/angular-gantt-chart-version-compatibility) ## Other supported frameworks The Gantt Chart is available for the Blazor, React, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) - [React Gantt Chart](https://www.syncfusion.com/react-components/react-gantt-chart) - [JavaScript Gantt Chart](https://www.syncfusion.com/javascript-ui-controls/js-gantt-chart) - [Vue Gantt Chart](https://www.syncfusion.com/vue-components/vue-gantt-chart) ## Supported browsers The Angular Gantt Chart works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/gantt/getting-started) [Features and bugs](https://www.syncfusion.com/feedback/angular?control=gantt-chart) ##### Data Binding | Angular Gantt Chart | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-gantt-chart/data-binding ## Overview The Angular Gantt Chart data binding feature supports binding data seamlessly with various local and remote data sources such as Array of JSON, RESTful services, OData services, and WCF services. It uses the data manager to handle data, and supports customizing data requests and processing. ## Angular array collection Bind the Gantt Chart with an array of JSON, enabling it to work smoothly in single-page applications (SPA). - [JSON binding documentation](https://ej2.syncfusion.com/angular/documentation/gantt/data-binding/#local-data) ## Remote data binding Binding the Angular Gantt Chart with RESTful services allows data from the services to be consumed using the data manager. It supports various data adaptors such as JSON, OData, ODataV4, URL, and Web API for working with a particular data service - [Url Adaptor documentation](https://ej2.syncfusion.com/angular/documentation/gantt/data-binding/#url-adaptor) ##### Angular Editable Gantt Chart | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-gantt-chart/editing ## Overview The Angular Gantt Chart provides full support to create, read, update, and delete operations (CRUD). In addition to built-in editor components to edit a particular column value, with template support users can use custom components that suit their application needs. Users can also edit the tasks fields directly in their respective cells using a dialog or interactively using taskbars. - [Example for editing](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/gantt/editing) ## Grid editing Angular Gantt supports cell and dialog edit modes in its grid area. It provides an interactive UI to add and edit records. In addition, editing and deletion of tasks can be performed programmatically. - [Documentation for grid editing](https://ej2.syncfusion.com/angular/documentation/gantt/managing-tasks/#cell-editing) ## Custom editor/customizable edit UI The editor for a grid cell can be specified by providing the edit type. The preferred editor can also be defined for specific columns. - [Custom editor documentation](https://ej2.syncfusion.com/angular/documentation/gantt/managing-tasks/#cell-edit-template) ## Taskbar editing Users can interact with the taskbar by resizing or dragging it, and based on the new position of the taskbar in timeline, the task values are updated. - [Taskbar editing documentation](https://ej2.syncfusion.com/angular/documentation/gantt/managing-tasks/#taskbar-editing) ## Dependency validation Dependencies between tasks can be updated either through the Dependency Column in the grid area or by drawing dependency connector lines in the chart area. Dependencies can be viewed and updated using a dialog. With dependency connection, the modified data by a user has to be validated based on the predecessor values before saving. Predecessor validation can also be customized as per application needs. - [Validation documentation](https://ej2.syncfusion.com/angular/documentation/gantt/taskdependency/#validate-predecessor-links-on-editing) ##### Angular Filterable Gantt Chart | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-gantt-chart/filtering ## Overview The Angular Gantt Chart filtering helps view specific or related records, which meet a given filtering criteria. It supports various filter types that include powerful Excel-like filter. Allows users to choose appropriate filter type, define their own custom filtering logic, and customize the filtering UI based on their application needs. Filtering with related parent or child records can be defined. ## Filter hierarchy modes Allows users to view parent or child records or both relative records along with the filtered records in a Gantt chart. Helps users to be aware of record’s hierarchy even when filtering. - [Documentation for filtering with hierarchy](https://ej2.syncfusion.com/angular/documentation/gantt/filtering/#filter-hierarchy-modes) ## Powerful Excel-like filter The Excel-like filter helps create filter criteria for a column by allowing users to select possible filter values from a checkbox list. Additionally, users can build complex filter criteria using the advanced filter option. - [Excel filter example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/gantt/filtering) ## Custom filter/extensible filter UI Filter UI and logic for a column will be applied based on the column type. Users can also define their own custom filter UI and filtering logic for a column to suit their application needs. - [Custom filter UI documentation](https://ej2.syncfusion.com/documentation/gantt/filtering/#custom-component-in-filter-menu) ## Search Search Gantt Chart rows using built-in search box in the toolbar or programmatically. Using built-in settings, search behavior can be customized. - [Searching documentation](https://ej2.syncfusion.com/angular/documentation/gantt/filtering/#search) ##### Row | Angular Gantt Chart | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-gantt-chart/row ## Overview Rows in Gantt Chart represents each task or data object information from the data source. It supports expanding/collapsing child rows, reordering of rows, indent/outdent rows to change its hierarchy levels and much more features. ## Expand and collapse parent rows Users can expand and collapse parent rows at any time to view information when needed. All the rows or only specific rows can be collapsed programmatically at initial rendering. ## Row reordering Rows can be reordered by drag and drop action to change its position and hierarchy levels. A child row from a parent row can be reordered as sibling to the same parent row or as child to any other parent row. - [Example for row reordering](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/gantt/drag-and-drop) ## Indent and outdent Indent and outdent operations can be performed on rows to change its hierarchy levels. On indenting a row, it moves as the last child of its previous row. On outdenting a row, it moves as sibling to its parent row. - [Example for indent and outdent](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/gantt/editing) ##### Tasks sheduling | Angular Gantt Chart | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-gantt-chart/scheduling ## Overview Each task in the data source is validated based on the child tasks with some factors like working time, holidays, weekends, and predecessors, and then rendered under the Gantt chart timeline within its time period as a bar chart. The start date, end date, progress, and duration of a task are depicted as horizontal rectangular bars. ## Baseline Baseline visualizes the difference between the original scheduled date and the current scheduled date of a task in a project. Each task has two taskbars rendered on the same row for comparison of dates to help understand the overall progression of the project. - [Example for baseline](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/gantt/baseline) ## Unscheduled tasks The Angular Gantt Chart with its rich UI provides built-in support for unscheduled tasks. These are tasks that are not scheduled with proper dates or duration at the start of the project, but which can be scheduled properly at any time during project implementation based on factors such as resource availability and dependent tasks. - [Example for unscheduled task](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/gantt/unscheduled-task) ## Dependency tasks Angular Gantt chart shows the dependency relationship between tasks in the project. These tasks have an effect on one another and illustrate when a task should begin or end in relation to other tasks. - [Example for dependency tasks](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/gantt/editing) ## Flexible working hours The default working hours are set from 08:00 to 17:00. However, this can be customized for each day of the week, allowing for flexible scheduling that aligns with the specific project requirements. - [Example for managing working hours](https://ej2.syncfusion.com/angular/demos/#/material3/gantt/working-time-range) ##### Single, Multiple, & Drag Selection | Angular Gantt Chart | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-gantt-chart/selection ## Overview The Angular Gantt Chart control allows users to select rows or cells. One or more rows or cells can be selected programmatically or by holding Ctrl, Command, or Shift. ## Row selection Select a range of rows or a single row by just clicking or tapping the row. To perform multiple selection, press and hold CTRL or Shift while selecting the desired range of rows. - [Example for row selection.](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/gantt/selection) - [Row selection documentation.](https://ej2.syncfusion.com/angular/documentation/gantt/selection) ## Cell selection Select a range of cells or a single cell by just clicking or tapping the cell. To perform multi-selection, press and hold CTRL or SHIFT to select the desired cell or range of cells. The two types of cell selection modes are flow and box. - [Cell selection documentation.](https://ej2.syncfusion.com/angular/documentation/gantt/selection/#cell-selection) ##### Timeline | Angular Gantt Chart | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-gantt-chart/timeline ## Overview A timeline is used to represent the project duration as individual cells with defined units and formats. It displays project tasks in chronological order with progress, tasks dependencies, and more. ## Tier Layout The Angular Gantt Chart component has a two-tier layout: top tier and bottom tier. The two tiers allow users to view two different timescales at once. The units and labels of both tiers are customizable to meet any application requirement. - [Example for tier layout.](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/gantt/default) ## Timeline modes The Angular Gantt Chart timeline supports various built-in view modes modes: hour, week, month, and year. Modes are chosen based on the timescale of the project. - [Example for timeline modes.](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/gantt/timeline) - [Timeline modes documentation.](https://ej2.syncfusion.com/angular/documentation/gantt/timeline/#timeline-view-modes) ## Zooming Users can view the tasks in a project clearly in timespans from minutes to years using built-in zooming actions. Also the zoom-to-fit option allows users to view all the tasks in a single view port. - [Example for zooming.](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/gantt/zooming) ## Working days and holidays Nonworking days such as holidays and weekends can be customized. Working hours in a day for a project can be defined. This helps users keep track of each task and resource task status based on the working time of the company. - [Example for working days and holidays.](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/gantt/work-week) ## Event markers Highlight important events in a project. For all the tasks in a project or a particular task, an event can be highlighted to indicate an important activity or day. - [Example for event markers.](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/gantt/event-markers) ##### Angular ListBox Component | Dual ListBox | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-listbox # Angular ListBox component | Dual ListBox - Simple form component with multi-selection of list items made easy. - Dual ListBox with drag and drop of items. - Built-in features like sorting, grouping, multiple selection, and many more. ## Overview The Angular ListBox is a graphical user interface for displaying a list of items with multi-selection options. It has a rich appearance and allows users to select one or more items from the list using checkboxes or keyboard interactions. It has several out-of-the-box features, such as data binding, sorting, grouping, reordering, dragging and dropping, UI customization, and accessibility. ## Data binding You can bind data from a variety of data sources such as JSON data collections or remote data source using different kinds of adaptors such as OData, OData V4, URL, JSON, and Web API. This uses JavaScript data manager to manage data, and also has customization option for data request and processing. ## Selection ListBox selection is used to highlight the selected items. By default, multi-selection is enabled in the ListBox. You can also modify it to a single selection. ### Single selection When a user clicks or taps an item, ListBox enables the selection of the list item by default. ### Multiple selection The Angular ListBox component supports multiple selection using touch or keyboard actions. ### Checkbox selection Checkbox type selection allows you to select items using check boxes, and provision to select all items is also available. ## Reordering of selected item In ListBox, you can reorder selected items within the list. It can be moved up and down using keyboard interactions or toolbar action. ## Dragging and Dropping of items The Angular ListBox allows you to drag and drop items between one or more list boxes. You can customize the placeholder and dragged item hint. ## Toolbar The ListBox toolbar allows you to perform predefined actions like, - Reordering: Moves selected items up or down. - Item transferring: Transfers selected or all items between connected list boxes. ## Grouping with category Group the list items with the corresponding category to pick an item quickly. It also increases the visual experience of the user. ## UI customization with templates The appearance (style) of each item displayed in the listbox can be customized. ## Angular HTML form support The Angular ListBox is a form component that Seamlessly supports HTML forms, template-driven forms (Angular), and reactive forms. ## Sortable list items You can display items in the ascending or descending order in a list. ## Filtering Filtering is used to select a few items from the list in the data column, that meet a given criteria. Enable the filtering functionality to show the search input box at the top of the Listbox. ## Other supported frameworks ListBox is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the different ListBox platforms from the links below, - [Blazor ListBox](https://www.syncfusion.com/blazor-components/blazor-listbox) - [React ListBox](https://www.syncfusion.com/react-components/react-listbox) - [Vue ListBox](https://www.syncfusion.com/vue-components/vue-listbox) - [JavaScript ListBox](https://www.syncfusion.com/javascript-ui-controls/js-listbox) ## Angular version compatibility With continuous improvement in Angular versions, the Angular List Box is kept up to date to make it compatible with the latest version. ### Angular 11 - [Getting started with Angular 11 List Box](https://support.syncfusion.com/kb/article/11043/how-to-get-started-easily-with-syncfusion-angular-11-list-box) - [Angular 11 List Box example](https://github.com/SyncfusionExamples/ej2-angular-11-listbox) ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#listbox) accessibility that makes a list view accessible to on-screen readers and assistive devices. - Follows [WAI-ARIA best practices](https://www.w3.org/TR/wai-aria-practices/#listbox) for implementing keyboard interaction. - Designed with UI element visuals such as foreground color, background color, line spacing, text, and images based on the [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standard. - Supports right-to-left (RTL) direction for users working in right-to-left languages like Hebrew, Arabic, or Farsi. ## Developer-friendly APIs Developers can customize all UI elements and control their behaviors according to the end user’s requirement using the component’s rich set of client-side APIs. - [ListBox APIs documentation](https://ej2.syncfusion.com/angular/documentation/api/list-box/#properties) ## Angular ListBox Code Example Easily get started with the Angular ListBox using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular ListBox Example](https://ej2.syncfusion.com/angular/demos/#/material/list-box/default) that shows you how to render and configure a ListBox in Angular. - html - ts "listbox-control" Bugatti Veyron Super Sport SSC Ultimate Aero Aston Martin One- 77 Ferrari LaFerrari ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Dashboard Layout - Build Interactive Layouts | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-dashboard-layout # Angular Dashboard Layout - Interactive and Responsive Layout - A simple and easily configurable layout component for designing interactive and responsive dashboards. - Allows effortless and dynamic customization of dashboards with draggable and resizable panels. - Easy to integrate JavaScript UI components to visualize any complex data or key metrics. ## Overview Angular Dashboard Layout is a grid-structured layout component that helps create static and dynamic dashboard layouts with panels. It is also referred as Angular Dashboard Layout Template. Dashboard panels are the basic building blocks of a dashboard and can be added programmatically or dynamically at runtime. The panels hold UI components and allow resizing, reordering, dragging and dropping, removing, and adding. Easily place components at the desired positions within the grid layout. ### Grid-structured layout The Angular Dashboard Layout is a component with a [grid-like structure](https://ej2.syncfusion.com/angular/documentation/dashboard-layout/setting-size-of-cells) that can easily split content into equal-sized cells. ### Easy to interact The panels allow for [resizing](https://ej2.syncfusion.com/angular/documentation/dashboard-layout/interaction-with-panels/resizing-of-panels), rearranging, [dragging](https://ej2.syncfusion.com/angular/documentation/dashboard-layout/interaction-with-panels/dragging-moving-of-panels), and dropping, [removing](https://ej2.syncfusion.com/angular/documentation/dashboard-layout/panels/add-remove-panels) and adding UI components. Components can be placed conveniently within the grid arrangement in the desired positions. ### Insert any UI component DataGrid, Charts, gauges, Maps, or any HTML content can be placed as panel content inside the layout to present metrics. ### Auto arranging panels With [floating support](https://ej2.syncfusion.com/angular/documentation/dashboard-layout/floating-of-panels), the panels in the layout will automatically organize themselves by sliding upward to occupy any open spaces. This makes efficient use of the layout for positioning panels. ### Adapts to any resolution The Dashboard Layout is a highly [responsive](https://ej2.syncfusion.com/angular/documentation/dashboard-layout/responsive-adaptive) with an optimized design for desktops, touchscreens, and smart phones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Attractive, customizable themes Cutting-edge design with several built-in themes, such as Fluent, Tailwind CSS, Bootstrap, Material, and Fabric. Utilize the [online Theme Studio tool](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) to customize themes easily. ## Angular Dashboard Layout Code Example Easily get started with the Angular Dashboard Layout using a few simple lines of HTML and TS code example as demonstrated below. Also, explore our [Angular Dashboard Layout Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/dashboard-layout/default), that shows you how to render and configure a Dashboard Layout in Angular. - html - ts "control-section" "padding:5px;text-align: right;" ViewEncapsulation DashboardLayoutComponent '@syncfusion/ej2-angular-layouts' /** * Default component */ 'app.component.css' 'app.component.html' '
' addEventListener ## Dynamic layout design The Angular Dashboard component allows dynamic designing of the layout by adding, removing, resizing, floating, and reordering the panels within the layout. ## Drag and Drop Angular Dashboard with rich UI provides smooth dragging of the panels to replace or re-order at the desired position within the layout. - [Drag and drop documentation](https://ej2.syncfusion.com/angular/documentation/dashboard-layout/interaction-with-panels/dragging-moving-of-panels) ## Resizing Easy resizing of a panel in all directions enables quick designing of the layout, and fitting small or large-sized content conveniently. - [Resizing documentation](https://ej2.syncfusion.com/angular/documentation/dashboard-layout/interaction-with-panels/resizing-of-panels) ## Floating The panels within the layout will auto arrange by moving in the upward direction to occupy empty spaces available in the layout. This provides effective usage of the layout for panel placement. Angular admin template has all the functionality you’ll need to create beautiful, high-performance admin dashboards. With cool neutral colors and plenty of whitespace, it has a modern minimalist design style. - [Floating documentation](https://ej2.syncfusion.com/angular/documentation/dashboard-layout/floating-of-panels) ## Placing components as content Place any HTML content or HTML UI components like Grid, Charts, Gauge, Maps, etc. to represent the metrics or KPI as panel content inside the dashboards. ## State persistence The Angular Dashboard Layout component’s public serialize method allows users to obtain and save the current layout structure of the component in order to construct another dashboard with the same panel structure. - [State persistence documentation](https://ej2.syncfusion.com/angular/documentation/dashboard-layout/save-restore) ## Angular version compatibility With continuous improvement in Angular versions, the Angular Dashboard Layout is kept up to date to make it compatible with versions starting from 4 to the latest version. - [More details on Angular Dashboard Layout version compatibility](https://support.syncfusion.com/kb/article/12311/angular-dashboard-layout-version-compatibility) Grid-structured layout Auto-arranging panel [Explore Complete Angular Comparison](https://www.syncfusion.com/pages/angular-competitive-upgrade/) ## Other supported frameworks The Dashboard Layout is available for the Blazor, React, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [Blazor Dashboard](https://www.syncfusion.com/blazor-components/blazor-dashboard) - [React Dashboard Layout](https://www.syncfusion.com/react-components/react-dashboard-layout) - [JavaScript Dashboard Layout](https://www.syncfusion.com/javascript-ui-controls/js-dashboard-layout) - [Vue Dashboard Layout](https://www.syncfusion.com/vue-components/vue-dashboard-layout) ## Supported browsers The Angular Dashboard works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/dashboard-layout/getting-started) --- title: Angular File Manager | File Explorer | Syncfusion description: Angular File Manager (File Explorer) is a Windows-Explorer-like component that allows you to effectively manage a file and folders on the client side. image: "https://ft.syncfusion.com/featuretour/ft-og-images/angular/angular-file-manager.png" url: "https://www.syncfusion.com/angular-components/angular-file-manager" --- # Angular File Manager - Lightweight, Modern User Interface Component - A modern user interface for easy and effective management of files and folders in the file system. - Performs all file operations like upload, download, delete, create, sort, search, and rename along with preview images. - Adaptive and responsive design built to be touch-friendly for easy interactions. ## Overview The Angular File Manager (a.k.a. File Explorer) is a graphical user interface component for managing the file system that allows users to perform most common file operations like accessing, editing, and sorting files or folders. This component also provides easy navigation to select a file or folder from the file system. ### Easy to customize With [customization options](https://ej2.syncfusion.com/angular/documentation/file-manager/customization), the entire layout can be customized and modified easily, and initial views switched. ### Built-in file operations Provides a wide range of built-in file operations including copying, moving, renaming, and deleting files, drag-and-drop, image preview, and more. ### Easy to interact An intuitive and easy-to-interact interface that includes a toolbar, treeview, breadcrumb, and menu. ### Localization Localize the text values of the context menu and tooltips displayed in the user interface using the [localization library](https://ej2.syncfusion.com/angular/documentation/file-manager/localization). ### Integration with other components Integrate with Syncfusion’s PDF Viewer, Word Editor, and Spreadsheet component to open and view PDF, Excel, and Word files. ### Connect with cloud storage services Easily connect and manage data stored in a various storage services, including local, cloud, and database. ### Adapts to any resolution The File Manager is designed to be responsive and adaptable, with a layout that works well on devices including desktops, touch screens, and smart phones. ### Attractive, customizable themes Cutting edge design with 5+ built-in themes such as Fluent, Tailwind CSS, Bootstrap, Material, Fabric, and more. Utilize the [online Theme Studio tool](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) to customize themes easily. ## Angular File Manager Code Example Easily get started with the Angular File Manager using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular File Manager Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/file-manager/overview) that shows you how to render and configure a File Manager in Angular. - html - ts "sample-container" ViewEncapsulation FileManagerComponent NavigationPaneService DetailsViewService '@syncfusion/ej2-angular-filemanager' /** * File Manager full functionalities sample */ 'control-content' OverViewController 'https://ej2-aspcore-service.azurewebsites.net/' 'api/FileManager/FileOperations' 'api/FileManager/GetImage' 'api/FileManager/Upload' 'api/FileManager/Download' ## Flat JSON data binding The File Manager component supports rendering flat JSON data objects, eliminating the need for HTTP client requests and back-end URL configuration. All file operations can be handled within the component itself through file action events. ## Customizable layout design The Angular File Manager UI consists of a toolbar, navigation pane, and content pane through which the files or folders in the file system can be accessed and managed. The entire layout can be customized with features like right-to-left alignment, enabling or disabling the toolbar and navigation pane, and switching between views. ## Toolbar The toolbar contains a list of tools for performing various operations like upload file, download file, and switch views. The toolbar can be configured with any custom functionality to be performed on the file system. ## Navigation pane The Angular File Manager navigation pane allows quick and direct access to a file or folder in a file system where the entire folder hierarchy is listed using a tree view. This can be made visible or hidden as needed. ## Content pane The content pane displays the files and folders in the file system. The files in the content pane can be displayed in either a large icon view or a details view. ## File operations The Angular File Manager component includes all the common operations needed for managing a file system: copy, move, upload, download, edit, create, delete, and sort. ## File upload and download The File Manager control allows easy file uploading and downloading in a file system. ## Sorting Files and folders in the file system can be sorted in ascending or descending order by clicking the column header. Files and folders can be sorted based on name, date created, size, and other details. The default sorting functionality can also be customized in the File Manager. ## Searching The File Manager control contains built-in search functionality that allows you to search for and access a file or folder in the current path and its child folders. ## Moving files and folders with drag and drop Files and folders can be moved within the file system by dragging and dropping them. Drag-and-drop support can be turned on or off. ## Access control restriction Restrict access to files and folders by defining a set of rules for them. Only authorized users will be able to access them. ## Restrict upload file types You can specify the types of files that can be uploaded in the File Manager. Other file types will be restricted from uploading. ## Multiple file selection The Angular File Manager control has built-in support for the selection of multiple files or folders. Multiple file selection is effective when a single operation like download or delete needs to be performed for multiple files in the file system. ## Directory upload The Angular File Manager control has support to upload a directory (folder) with its subfolders and files. ## Chunk upload The File Manager supports the chunk upload feature, which allows large files to be split into smaller chunks based on the specified chunk size and uploaded sequentially to the server. This improves reliability and performance when handling massive file uploads. ## Quick access menu The Angular File Manager component provides a context menu to list the operations that can be performed with files and folders. It appears when a file or folder is right-clicked. Context menu items can be customized according to user preferences. ## Manage storage service providers The File Manager control allows you to manage data from storage services. ### Keyboard navigation The Angular File Manager control ensures that every cell is accessible using the keyboard. Major features like sort, select, and edit can be performed using keyboard commands alone; no mouse interaction is required. This helps in creating highly accessible applications using this control. ### Developer-friendly APIs Developers have control over all the UI elements and behaviors of the components to provide the best experience to end users. ### Right to left (RTL) Supports right-to-left (RTL) direction for users working in right-to-left languages like Hebrew and Arabic. ## Angular version compatibility With continuous improvement in Angular versions, the Angular File Manager is kept up to date to make it compatible with versions starting from 4 to the latest version. Built-in file operations 10+ interactive demos ## Other supported frameworks The File Manager layout is available for the Blazor, React, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager) - [React File Manager](https://www.syncfusion.com/react-components/react-file-manager) - [JavaScript File Manager](https://www.syncfusion.com/javascript-ui-controls/js-file-manager) - [Vue File Manager](https://www.syncfusion.com/vue-components/vue-file-manager) ## Supported browsers The Angular File Manager works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) ##### Angular Barcode Generator | Customizable QR Code | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-barcode # Angular Barcode Generator - Powerful, Feature-Rich QR Code Component - Supports most common 1D and 2D barcodes. - Supports complete customization of a barcode to augment its appearance. - Easy to use and integrate. ## Overview The Angular Barcode Generator component is a lightweight, high-performance control that displays industry-standard 1D and 2D barcodes in Angular applications. Generated barcodes are optimized for printing and on-screen scanning. The component is designed for ease of use and does not require fonts. ## Customization The Angular Barcode Generator is easily customizable. You can customize its color (dark or light), height, width, and more. ## Label The Angular Barcode Generator lets you display a barcode with or without text and provides alignment options. ## Barcode symbologies The Syncfusion Angular Barcode Generator component supports a wide range of barcode symbologies. ### QR Code Quick response codes (QR codes) are two-dimensional barcodes. They can efficiently store more information in a smaller space than 1D barcodes. Each barcode can store values up to 7,089 characters. They are mostly used for URLs, business cards, and contact information. ### Data Matrix A Data Matrix is a two-dimensional barcode. The information encoded should be text or numeric values. Each barcode can store values up to 2,335 alphanumeric characters. They are mostly used by couriers and the food industry. ### Code 39 Code 39 is a common barcode type used for various labels such as on name badges, inventory, and in industrial applications. The symbology of the Code 39 character set consists of barcode symbols representing numbers 0-9, uppercase letters A-Z, and the space character. ### Code 39 Extended The Code 39 Extended is an extended version of Code 39. Lower characters and special characters are supported. ### Code 11 Code 11, also known as USD-8, is high numeric symbology. The character set includes the digits 0-9, the hyphen symbol ( - ), and start and stop characters. It is commonly used in telecommunications. ### Codabar Codabar is also known as USD-4 and Code 2 of 7. It can encode the digits 0-9, six symbols, and start and stop characters. It is even possible to print Codabar codes using typewriter-like impact printers, which allows the creation of many codes with consecutive numbers without having to use a computer. ### Code 32 The Code 32 is also known as Italian Pharmacode. It has the following structure: the ‘A’ character that is not really encoded, eight digits for Pharmacode, and one digit for Checksum module 10 that is automatically calculated by Barcode Professional. ### Code 93 Code 93 was designed to complement and improve Code 39. It is used to represent the full ASCII character set by using combinations of two characters. Code 93 can encode uppercase letters, numeric digits, and a handful of special characters. ### Code 93 Extended Code 93 Extended is based on Code 93, but it can encode the full 128-character ASCII. The characters represented by Code 93 are represented in Code 93 Extended as single barcode characters, but all other characters are represented by a control character plus another character. ### Code 128 Code 128 is a very high-density barcode that supports alphanumeric characters. This barcode is used as the basis for many other barcodes like UCC/EAN, HIBC (health industry barcode), and the blood bank industry. ### UPC - A The universal product code (UPC-A) is a numeric symbology used in retail. UPC-A symbols consist of 11 data digits and one check digit. The first digit is a number system digit that normally represents the type of product being identified. ## Customizing the text You can customize the alignment, position, and margins of the barcode and QR code text. ## Other supported frameworks Barcode is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the different Barcode platforms from the links below, - [Blazor Barcode](https://www.syncfusion.com/blazor-components/blazor-barcode) - [React Barcode](https://www.syncfusion.com/react-components/react-barcode) - [Vue Barcode](https://www.syncfusion.com/vue-components/vue-barcode) - [JavaScript Barcode](https://www.syncfusion.com/javascript-ui-controls/js-barcode) ## Angular BarCode Control Code Example Easily get started with the Angular BarCode using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular BarCode Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap/barcode/default-functionalities) that shows you how to render and configure a BarCode in Angular. - html - ts "control-wrapper" "width:200px;height:200px" // specifies the template string for the barcode generator component `` ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Interactive HTML5/Angular Bullet Chart & Graph | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-bullet-chart # Angular Bullet Charts: Beautiful & Interactive - Flexible and completely customizable. - Replacement for meters and gauges. - Supports features such as multiple measures, ranges, labels, title, subtitle, etc. ## Overview The Angular Bullet Chart is used to visually compare measures, similar to the commonly used bar chart. A bullet chart displays one or more measures and compares them with a target value. You can also display the measures in a range of performance such as poor, satisfactory, and good. ## Orientation Position the bullet chart in either vertical or horizontal orientation. This is helpful when viewing the bullet chart on mobile devices. ## Right to left Render the Angular Bullet Chart control in either LTR or RTL directions. ## Target bar Target bar lines denote the current value and run perpendicular to the feature measure. - [Target bar example](https://ej2.syncfusion.com/demos/#/material/bullet-chart/bar-customization.html) ## Multiple measures Render multiple measure bars as well as multiple comparative measure symbols to allow comparison of several measures at once. - [Multiple measures example](https://ej2.syncfusion.com/demos/#/material/bullet-chart/multiple-data.html) ## Qualitative ranges A range in a bullet chart helps measure the performance of data against a qualitative state by observing the distance between each range. Each color of the range represents a quality such as good, bad, and acceptable. - [Qualitative ranges example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/bullet-chart/customization) - [Qualitative ranges documentation](https://ej2.syncfusion.com/angular/documentation/bullet-chart/ranges/) ## Angular Bullet Chart Code Example Easily get started with the Angular Bullet Chart using a few simple lines of ts code example as demonstrated below. Also explore our [Angular Bullet Chart Example](https://ej2.syncfusion.com/angular/demos/#/material/bullet-chart/default) that shows you how to render and configure the Smith Chart in Angular. - ts ` ` ## Other supported frameworks Bullet Chart is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the different Bullet Chart platforms from the links below, - [Blazor Bullet Chart](https://www.syncfusion.com/blazor-components/blazor-bullet-chart) - [React Bullet Chart](https://www.syncfusion.com/react-components/react-bullet-chart) - [Vue Bullet Chart](https://www.syncfusion.com/vue-components/vue-bullet-chart) - [JavaScript Bullet Chart](https://www.syncfusion.com/javascript-ui-controls/js-bullet-chart) ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular ProgressBar | Circular ProgressBar | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-progressbar # Angular ProgressBar - Simple and Elegant ProgressBar Component - Linear or circular progress bars provide elegance in representing progression. - Secondary progress can be shown like YouTube buffering. - Indeterminate state options allow you to show the progress interruption. ## Overview The Angular ProgressBar indicates the progress of a task with customizable visuals. It includes features to visualize progress in rectangular and circular shapes, determinate and indeterminate states, segments, and customized ranges in different colors. It also supports animation. ## Types Visualize progress in different shapes (rectangle, circle, and semi-circle) to give a unique appearance to your app design. - [progress bar types documentation](https://ej2.syncfusion.com/angular/documentation/progressbar/types) The Linear progress bar visualizes the progress in rectangle. The Circular progress bar visualizes the progress in a circle or a ring The Semi-circle progress bar visualizes the progress in a semi-circle. ## States Visualizes the progress in different modes. - [States documentation](https://ej2.syncfusion.com/angular/documentation/progressbar/states) ### Determinate Use the determinate mode progress bar when progress can be estimated. ### Indeterminate Use the indeterminate mode progress bar when progress cannot be estimated or calculated. It can be combined with determinate mode to let users know that the app is estimating the progress before the actual progress starts. ### Buffer Uses a secondary progress indicator when the primary task depends on the secondary task. This will allow users to visualize both primary and secondary tasks’ progress simultaneously. ## Segments Avoid writing several lines of code to create and position multiple progress bars: just divide a progress bar into multiple segments using a single API to visualize the progress of multiple sequential tasks. ## Angle Customize the start and sweep angles of circular progress to give a unique style to the circular progress bar. ## Tooltip Display tooltips during initial load of progress bars and mouse hover with numeric or text values of the progress. ## Custom content Add any view to the center of a circular progress bar to: indicate the completion of the progress; add start, pause, or cancel buttons to control the progress interactively; add an image that indicates the actual task in progress; add custom text that conveys the progress. ## Visualize multiple ranges Along with visualizing the progress of a task, users can also visualize multiple ranges with gradient colors or solid colors that are mapped to each range to enhance the readability. ## Appearance The appearance of a progress bar is highly customizable. - [Customization documentation](https://ej2.syncfusion.com/angular/documentation/progressbar/customization) ### Thickness Tweak the thickness of the track and progress indicator to render the progress bar with different appearances. ### Colors Apply appealing colors to the track and progress indicator to match your app theme. ### Corner radius The corner radius of the Angular Progress Bar can be customized. ## Angular ProgressBar Code Example Easily get started with the Angular ProgressBar using a few simple lines of TS codes as demonstrated below. Also explore our [Angular ProgressBar Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/progress-bar/Linear) that shows you how to render and configure a Progress bar in Angular. - ts ViewEncapsulation // specifies the template string for the ProgressBar component /ejs-progressbar>` ## Other supported frameworks ProgressBar is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the different ProgressBar platforms from the links below, - [Blazor ProgressBar](https://www.syncfusion.com/blazor-components/blazor-progressbar) - [React ProgressBar](https://www.syncfusion.com/react-components/react-progressbar) - [Vue ProgressBar](https://www.syncfusion.com/vue-components/vue-progressbar) - [JavaScript ProgressBar](https://www.syncfusion.com/javascript-ui-controls/js-progressbar) ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Kanban Board | Task Workflow Management | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-kanban-board # Angular Kanban Board - Task Tracker with Compact View - Visually organize and prioritize your tasks with a transparent workflow. - Efficient control to manage software/product development, project management, and task planner using swimlane, cards, WIP validations, and more. - A rich set of built-in functionalities such as data binding, swimlane, templating for card, scrolling, drag-and-drop, stacked header, WIP validations, responsiveness, various built-in themes, and much more. ## Overview The Angular Kanban Board is a task scheduling control that provides clear user interface representation to manage multiple stages of work. The Kanban board is widely used in various real-time applications such as task scheduler, project management, software or product development, manufacturing process, personal task management, and much more. ## Angular Kanban Code Example Easily get started with the Angular Kanban using a few simple lines of HTML and TS codes as demonstrated below. Also explore our [Angular Kanban Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/kanban/overview) that shows you how to render and configure a Kanban Board in Angular. - html - ts "control-section" "content-wrapper" ViewEncapsulation '@syncfusion/ej2-base' CardSettingsModel '@syncfusion/ej2-angular-kanban' 'control-content' DefaultComponent ## Data binding Data binds seamlessly with various local and remote data sources, such as: JSON, RESTful services, OData services, and WCF services. Angular Kanban loads data on demand by default to reduce transfer and load times. Proper field mapping is mandatory when binding Kanban to the data sources with different field names. - [Data binding documentation](https://ej2.syncfusion.com/angular/documentation/kanban/data-binding) ## Workflow The Kanban restrict or allow card transitions from one column to another to maintain a controlled workflow process. - [Kanban workflow example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/kanban/workflow) ## Work in progress (WIP) limits Users can set limits to the card count at each stage of Kanban workflow to avoid working on multiple tasks. Kanban columns visually change its appearance when validation fails. - [WIP validation documentation](https://ej2.syncfusion.com/angular/documentation/kanban/validation) ## Flexible layout By default, Angular Kanban has a simple layout with cards and columns. But users can create complex Kanban boards based on their application needs and integrate with any team in an organization. - [Flexible layout documentation](https://ej2.syncfusion.com/angular/documentation/kanban/responsive-mode#layouts) ## Card options A card is the main element of Kanban board that provides clear representation of tasks and flows across various stages. ### Customizable cards Change the look and feel of Kanban cards by customizing their default appearance and style using any HTML or CSS element. ### Drag and drop cards Provides smooth drag-and-drop support to modify the status of cards. - [Drag and drop cards documentation](https://ej2.syncfusion.com/angular/documentation/kanban/drag-and-drop) ### Selection Easily select multiple cards using mouse, keyboard, or touch interfaces. You can also make multiple selection of cards by pressing the Shift key. - [Card selection documentation](https://ej2.syncfusion.com/angular/documentation/kanban/cards#selection) ## Columns The Kanban board divides its layout as columns to visualize the different stages of work, e. g. to-do, validate, in-progress, testing, and completed. - [Columns documentation](https://ej2.syncfusion.com/angular/documentation/kanban/columns) ### Expand/Collapse column Built-in support is available for expanding and collapsing the columns by interaction and programmatically. Users can also control the collapsible behavior on page load. ### Multi-key Users can map multiple keys to single columns to group similar columns. i.e., development column has implementation, review, and testing. - [Multi-key documentation](https://ej2.syncfusion.com/angular/documentation/kanban/columns#multi-key-mapping) ## Card editing Angular Kanban provides full support to create, read, update, and delete operations (CRUD) on cards. In addition to built-in editing through dialog, users can create a template that suits their application needs. Editing operations are performed with the help of a data manager. - [Card editing documentation](https://ej2.syncfusion.com/angular/documentation/kanban/dialog) ## Stacked header Angular Kanban allows you to add additional headers to group the logically related columns above the column header in a stacked manner. - [Stacked header documentation](https://ej2.syncfusion.com/angular/documentation/kanban/columns#stacked-headers) ## Swimlane Visually split the Kanban board horizontally to categorize the cards based on key i.e., assignee, project, or type. Users can customize the swimlane header with templates and control the visibility of empty rows and items count in a swimlane row. - [Swimlane documentation](https://ej2.syncfusion.com/angular/documentation/kanban/swimlane) ## Frozen rows The Swimlane frozen rows option makes the rows always visible at the top when scrolling the content. It is mainly used to show corresponding swimlane rows. - [Frozen rows documentation](https://ej2.syncfusion.com/angular/documentation/kanban/swimlane#enable-frozen-rows) ## Tooltip Display card information with a default tooltip or customized tooltip template. - [Tooltip documentation](https://ej2.syncfusion.com/angular/documentation/kanban/tooltip) ## Templating Users can customize the UI elements of Kanban using templates i.e., column header, cards, swimlane header, and tooltip. - [Custom card template documentation](https://ej2.syncfusion.com/angular/documentation/kanban/cards#template) ## Developer-friendly APIs Developers can have full control over the UI and behavior of the Kanban board through its built-in, developer-friendly APIs. The simple and extensible APIs allow you to customize Kanban functionalities with ease. - [APIs documentation](https://ej2.syncfusion.com/angular/documentation/api/kanban/index-default) ## Built-in themes Five built-in SASS-based themes are available, such as Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and High Contrast. - [Theme Studio application](https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio) ## Right to left (RTL) JS Kanban allows you to render its layout, columns, and cards from right to left to improve the user experience and accessibility for RTL languages. - [RTL documentation](https://ej2.syncfusion.com/angular/documentation/kanban/localization#right-to-left-rtl) ## Responsive and touch-friendly Angular Kanban has a highly responsive layout and a finely optimized design for desktops, touch screens, and smart phones. ### Touch support User-friendly touch gestures and an interactive UI design on Kanban help produce the best user experience. ### Adaptive UI The Kanban user interface adapts automatically to mobile and desktop devices. This helps the application to scale elegantly across all form factors without any additional effort. ## Localization Localize all the static strings that are used in the user interface of the Angular Kanban control using the localization (l10n) library. - [Localization documentation](https://ej2.syncfusion.com/angular/documentation/kanban/localization) ## Other supported frameworks The Kanban Board is available for the Blazor, React, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [Blazor Kanban](https://www.syncfusion.com/blazor-components/blazor-kanban-board) - [React Kanban](https://www.syncfusion.com/react-components/react-kanban-board) - [JavaScript Kanban](https://www.syncfusion.com/javascript-ui-controls/js-kanban-board) - [Vue Kanban](https://www.syncfusion.com/vue-components/vue-kanban-board) ## Supported browsers The Angular Kanban Board works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/kanban/getting-started) ##### Angular Dropdown Tree | Customized Item Selection | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-dropdown-tree # Angular Dropdown Tree - Display hierarchical data - Easily present a selection list of hierarchical data in a tree-like structure. - Use built-in features like data binding, load on demand (lazy loading), multiselection, checkboxes, and more. - Customize the selection pop-up and tree items with different template options. ## Overview The Dropdown Tree control is a text-box control that allows users to select a single value or multiple values from hierarchical data in a tree-like structure. It has several out-of-the-box features, such as data binding, checkboxes, templates, UI customization, accessibility, and preselected values. ## Data binding Bind data to the Dropdown Tree control from different data sources. Data can be local or in any remote service and fetched using different kinds of adapters like OData, OData V4, URL, JSON, and web API. ## Render modes The Dropdown Tree component has different render modes to visualize selected items. ### Box mode The selected items are displayed as a chip (box) in the Dropdown Tree input box. ### Delimiter mode The selected items are displayed with the delimiter character in the Dropdown Tree input box. ### Default mode The default mode is a combination of both the box and delimiter modes. When the control is in focus, selected items will be displayed as chips similar to the box mode. Otherwise, they will be displayed with a delimiter character as in the delimiter mode. ### Template mode The selected items are displayed with the given custom template value instead of the selected item text in the Dropdown Tree input box. ## Checkboxes The Angular Dropdown Tree control provides built-in support for checkboxes, allowing users to select more than one item. Enabling the checkboxes and autocheck functionality makes the parent and child items dependent on each other. This control also provides a Select All option in the pop-up. ## Multiple selection The Dropdown Tree control allows users to select more than one item in the pop-up using the multiselection functionality. ## UI customization with templates Use templates to change the appearance of the selection pop-up for tree items as well as the header and footer of the pop-up tree. ### Header template Design your own header for the pop-up tree using the header template. ### Item template Define the custom appearance of each tree item using the item template. ### Footer template Design your own custom footer for the pop-up tree using the footer template. ## Built-in and customizable themes Several built-in, Sass-based themes are available: Fluent, Tailwind CSS, Bootstrap 5, Bootstrap, Material, and high contrast. Users can customize these themes by either overriding the existing Sass styles or creating custom themes using the Theme Studio application. - [Theme Studio application](https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio/) ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility to make the Dropdown Tree accessible to screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing keyboard interaction. - Uses [WCAG 2.0](https://www.w3.org/TR/WCAG20/)-based design for UI visual elements such as foreground color, background color, line spacing, text, and images. - Supports right-to-left (RTL) direction for users working with RTL languages like Hebrew and Arabic. ## Developer-friendly APIs Developers can customize all UI elements and control their behaviors according to the end user’s requirements through the component’s rich set of client-side APIs. ## Other supported frameworks The Dropdown Tree component is also available in React, JavaScript, and Vue frameworks. Check out the different Dropdown Tree platforms from the links below: - [React Dropdown Tree](https://www.syncfusion.com/react-components/react-dropdown-tree) - [Vue Dropdown Tree](https://www.syncfusion.com/vue-components/vue-dropdown-tree) - [JavaScript Dropdown Tree](https://www.syncfusion.com/javascript-ui-controls/js-dropdown-tree) ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Columns | Angular Gantt Chart | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-gantt-chart/column ## Overview Columns define the schema of a data source in Blazor Gantt Chart component. It supports formatting, column definitions, column chooser, column menu, column reordering, and other important features. The operations such as sorting, filtering, and searching can be performed based on column definitions ## Define columns You can define columns explicitly to display the needed items in a Gantt Chart. You can also enhance the appearance of columns by setting the header text, text alignment, cell value format, and width. ## Auto generate columns When the column collection is not specified, Gantt Chart will create columns definition for the users by creating a column object from the data source. ## Cell attributes Users can decorate each cell element of a Gantt Chart with their own attributes by customizing styles, adding additional class names, etc. ## Resize Change column width by simply dragging the right corner of the column header. A scroll bar appears when the Gantt Chart content width exceeds the element width. - [Column Resize example](https://ej2.syncfusion.com/angular/demos/#/material/gantt/resize) ## Reorder Reorder Gantt Chart columns either through user interaction or programmatically. Simply dragging a column header into the desired column position will reorder the columns of a Gantt Chart. - [Column Reorder example](https://ej2.syncfusion.com/angular/demos/#/material/gantt/reorder) ## Value accessors The value accessors specify how the cell value is to be retrieved from the data. The preferred value accessors can be used when the row data is not just a simple object. ## Cell styling Customize cell styles using CSS or programmatically. ## Column menu Allows performing various column-based actions, such as sorting, filtering, hide or show columns etc., with the help of Angular Gantt Chart column menu. Menu items can also be customized to list only the preferred actions. - [Example for column menu](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/gantt/column-menu) ##### Angular Breadcrumb | Navigational Component | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-breadcrumb # Angular Breadcrumb - Simple and Flexible Component - Simple, responsive component makes navigation easy. - Support for an overflow mode to limit the number of Breadcrumb items displayed. - Built-in support for icons, binding to location, and UI customization with templates for Breadcrumb items. ## Overview The Angular Breadcrumb is a graphical user interface that serves as a navigation header for your web application or site. It helps to identify or highlight the current location within the hierarchical structure of a website. It has several built-in features such as templates, icons, binding to location, overflow mode, and UI customizations. ## Breadcrumb item icons Users tend to understand visual information better than text. Include icons or sprite images to the right or left of the Breadcrumb items to provide a visual representation of their corresponding actions. - [Icons in breadcrumb documentation](https://ej2.syncfusion.com/angular/documentation/breadcrumb/icons/) ## UI customization with templates Templates are used to create custom user experiences. Breadcrumb provides a template for each Breadcrumb item and its separator to customize or change the appearance of the entire Breadcrumb UI with HTML elements or other components. - [Customization example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/breadcrumb/template-and-customization) - [Customization documentation](https://ej2.syncfusion.com/angular/documentation/breadcrumb/templates/) ## Limit items with overflow mode Overflow mode limits the number of items to be displayed in the view when the container width exceeds a Breadcrumb item’s width or the maximum item count. The following are the different overflow modes supported in the Breadcrumb component. - [Overflow modes example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/breadcrumb/overflow-modes) - [Overflow mode documentation](https://ej2.syncfusion.com/angular/documentation/breadcrumb/overflow/) ### Menu mode Menu mode shows the number of Breadcrumb items that can be accommodated within the container space and creates a submenu with the remaining items. ### Collapsed mode Collapsed mode shows the first and last Breadcrumb items and hides the remaining items with a collapsed icon. When the collapsed icon is clicked, all items become visible and navigable. ### Wrap mode Wrap mode wraps the items to multiple lines when the Breadcrumb’s width exceeds the container space. ### Scroll mode Scroll mode shows an HTML scroll bar when the Breadcrumb’s width exceeds the container space. ### Hidden mode Hidden mode shows the maximum number of items possible in the container space and hides the remaining items. Clicking on a previous item will make the hidden item visible. ### None mode None mode shows all the items on a single line. ## Bind to location Breadcrumb items can be automatically generated based on the current location of the user within the website or by providing a URL to the Breadcrumb component. The auto generated items can be customized using templates and item render events. - [Bind to location example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/breadcrumb/bind-to-location) Note: The previous sample is hosted in a different location and Breadcrumb items are generated based on it. ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#breadcrumb) accessibility practices to work with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#breadcrumb) best practices for implementing keyboard interaction. - Based on [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, we designed the UI element visuals such as foreground color, background color, line spacing, text, and images. - Supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian. - [Breadcrumb accessibility documentation](https://ej2.syncfusion.com/angular/documentation/breadcrumb/accessibility/) ## Developer-friendly APIs Developers can control the appearance and behaviors of the Breadcrumb component using a rich set of APIs. ## Built-in themes The Angular Breadcrumb supports built-in themes such as Bootstrap 5, Tailwind CSS, Fluent, high contrast, and more. Users can customize these built-in themes or create new themes to achieve the desired look and feel either by simply overriding SASS variables or using the Theme Studio application. - [Theme Studio Application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Angular Breadcrumb Code Example Easily get started with the Angular Breadcrumb using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular Breadcrumb Example](https://ej2.syncfusion.com/angular/demos/#/material/breadcrumb/default) that shows you how to configure the Breadcrumb in Angular. - html - ts [enableNavigation]= "https://ej2.syncfusion.com/angular/demos/#/material/grid/over-view" "https://ej2.syncfusion.com/angular/demos/#/material/menu/default" "./breadcrumb/default" @syncfusion/ej2-base ` ` ## Other supported frameworks The Breadcrumb component is also available in Blazor, React, Vue, and JavaScript frameworks. Check it out on other platforms at the links below: - [Blazor Breadcrumb](https://www.syncfusion.com/blazor-components/blazor-breadcrumb) - [React Breadcrumb](https://www.syncfusion.com/react-components/react-breadcrumb) - [Vue Breadcrumb](https://www.syncfusion.com/vue-components/vue-breadcrumb) - [JavaScript Breadcrumb](https://www.syncfusion.com/javascript-ui-controls/js-breadcrumb) ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Carousel Component | Animated Image slider | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-carousel # Angular Carousel Component - A Customizable Image Slider - Built-in slide indicators, slide navigations, and more configuration options. - Beautiful animations when navigating slide panels. - Effortless customization with out-of-the-box, built-in template options. ## Overview The Angular Carousel component allows users to display images with content, links, and more, like a slide show. Typical uses of a carousel include scrolling news headlines, featured articles on home pages, and image galleries. ## Angular Carousel Code Example Easily get started with the Angular Carousel using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular Carousel Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/carousel/default) that shows you how to render and configure a Carousel in Angular. - html - ts "default-carousel" "https://ej2.syncfusion.com/angular/demos/assets/carousel/images/bridge.jpg" "height:100%;width:100%;" "https://ej2.syncfusion.com/angular/demos/assets/carousel/images/trees.jpg" "https://ej2.syncfusion.com/angular/demos/assets/carousel/images/waterfall.jpg" ViewEncapsulation app.component.html app.component.css ## Ease of use The Carousel component provides flexible ways to create slides with items or a data source. Configure the look and feel of the Carousel to match your requirement using several built-in options. - [Carousel databinding example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/carousel/data-binding) ## Animations Navigate among slides smoothly with built-in “slide” and “cross-fade” animation effects. You can also provide custom animation effects. - [Carousel animation documentation](https://ej2.syncfusion.com/angular/documentation/carousel/animations-and-transitions) - [Carousel customization example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/carousel/templates) ## Auto play slides Carousel slide transitions are performed continuously in specified time intervals. You can also customize the time intervals. ## Looping slides Carousel’s looping functionality allows users to loop back to the first item after reaching the last item. - [Looping slides documentation](https://ej2.syncfusion.com/angular/documentation/carousel/animations-and-transitions#looping-slides) ## Completely customizable UI Customize the appearance of any part of the Carousel interface using HTML and CSS styles. ### Navigation buttons Allows the users to change the previous and next slides. ### Play button Users can control the auto play slide functionality by using the play button. ### Indicators Users can show or hide the indicators to the carousel. Indicators provide quick navigation to any slide. ## Web accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility practices to work with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing keyboard interactions. - Based on the [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, the UI visual elements such as foreground color, background color, line spacing, text, and images have been designed. - Supports right-to-left (RTL) text direction for users working with right-to-left languages like Hebrew, Arabic, or Persian. ## Developer-friendly APIs Developers can control the appearance and behaviors of the Carousel control using a rich set of APIs. ## Themes The Angular Carousel component supports built-in themes such as Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and high contrast. Users can customize these built-in themes or create new themes to achieve their desired look and feel by either simply overriding SASS variables or using our Theme Studio application. - [Theme studio application](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5) ## Other supported frameworks The Carousel is available for the Blazor, React, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [Blazor Carousel](https://www.syncfusion.com/blazor-components/blazor-carousel) - [React Carousel](https://www.syncfusion.com/react-components/react-carousel) - [JavaScript Carousel](https://www.syncfusion.com/javascript-ui-controls/js-carousel) - [Vue Carousel](https://www.syncfusion.com/vue-components/vue-carousel) ## Supported browsers The Angular Carousel works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/carousel/getting-started) ##### Angular AppBar - Customizable UI Component | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-appbar # Angular AppBar - Lightweight and Fully Customizable Component - A simple and highly customizable interface. - Customizable height, theme color, position, and more. - Effortless integration with components like Button, Dropdown Menu, Menu Bar, and more. ## Overview The Angular AppBar, also known as an action bar or nav bar, displays information and actions related to the current application screen. It is used to show branding, screen titles, navigation, and actions. The component supports height modes, color modes, positioning, and more. - [See the Angular AppBar demo](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/appbar/default) ## Size Display the AppBar with predefined sizes: normal, long, or short. The size of an AppBar can be changed using the regular, prominent, and dense properties. - [Size demo](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/appbar/default) - [Size documentation](https://ej2.syncfusion.com/angular/documentation/appbar/size-and-color#size) ## Color The AppBar has predefined background colors for different visual representations: light, dark, primary, and inherit. - [Color demo](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/appbar/color) - [Color documentation](https://ej2.syncfusion.com/angular/documentation/appbar/size-and-color#color) ## Position A row of content can be aligned horizontally at the top or bottom of the AppBar. - [Position documentation](https://ej2.syncfusion.com/angular/documentation/appbar/position) ## Sticky AppBar can stick to the top of a page while scrolling the content. - [Sticky documentation](https://ej2.syncfusion.com/angular/documentation/appbar/position#sticky-appbar) ## Content alignment The Angular AppBar component aligns the content using a spacer and separator. - [Content alignment documentation](https://ej2.syncfusion.com/angular/documentation/appbar/design) ## Responsive design The AppBar layout will adjust automatically to the current screen size. - [Responsive design documentation](https://ej2.syncfusion.com/angular/documentation/appbar/design#media-query) ## Separator A separator is a vertical line that visually separates or groups items in an AppBar. - [Separator documentation](https://ej2.syncfusion.com/angular/documentation/appbar/design#separator) ## Developer-friendly APIs Developers can control the appearance and behaviors of the AppBar using a rich set of APIs. ## Themes The Angular AppBar component supports built-in themes: Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and high contrast. Users can customize these built-in themes or create new themes to achieve their desired look and feel by either simply overriding SASS variables or using our Theme Studio application. - [Theme Studio application](https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio) ## Angular AppBar code example Easily get started with the Angular AppBar using a few simple lines of HTML and TS code, as demonstrated below. Also, explore our [Angular AppBar example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/appbar/default), which shows how to render and configure an AppBar in Angular. - html - ts "control-section" "e-icons e-menu" "e-appbar-spacer" ej2-appbar-container DefaultComponent ## Other supported frameworks The AppBar component is also available in the Blazor, React, Vue, and JavaScript frameworks. Check out the component on other platforms using these links: - [Blazor AppBar](https://www.syncfusion.com/blazor-components/blazor-appbar) - [React AppBar](https://www.syncfusion.com/react-components/react-appbar) - [Vue AppBar](https://www.syncfusion.com/vue-components/vue-appbar) - [JavaScript AppBar](https://www.syncfusion.com/javascript-ui-controls/js-appbar) ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Image Editor Component | Photo Editor | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-image-editor # Angular Image Editor - A Comprehensive Tool to Edit the Image - Built-in support for cropping, rotating, flipping, zooming, and applying filters to images. - Easily export edited images in JPEG, PNG, and SVG formats. - Annotate images with shapes and customize their appearance. ## Overview The Angular Image Editor component is a graphical user interface used for editing images. It provides built-in support to rotate, flip, zoom, and crop images based on the selection. It also has support for inserting annotations including rectangle, ellipse, line, text, and freehand drawings. ## Selection and cropping The Image Editor component has multiple selection options including square, circle, and can be customized to various aspect ratios. The selection region can be dragged and resized for cropping an image. - [Selection and cropping](https://ej2.syncfusion.com/angular/documentation/image-editor/selection-cropping) ### Custom selection The selection region can be customized by dragging and resizing an image. - [Custom selection](https://ej2.syncfusion.com/angular/documentation/image-editor/selection-cropping) ### Square selection The selection region can be customized as a square, and it can be dragged and resized. ### Circle selection The selection region can be customized as a circle, and it can be moved and resized. ### Predefined aspect ratios The selection region can be customized according to the predefined ratios including 4:3, 7:5, 16:9, and more. ## Annotations The Image Editor has multiple annotations support including text, freehand drawings, images, and shapes such as rectangle, ellipse, and line. - [Annotation documentation](https://ej2.syncfusion.com/angular/documentation/image-editor/annotation) ### Text annotation Text annotations can be inserted and customized by changing their color, outline color, fill color, outline width, font family, font size, and font styles, such as bold and italics. ### Freehand drawing annotation These annotations can be customized by changing the pen color and stroke width. ### Shapes annotation The shape annotations include rectangle, ellipse, and line. The border color, fill color, and border width of the shapes can be customized. ### Image annotation This feature allows users to insert and display multiple images in addition to the main image they are editing. These image annotations can be used for different purposes, such as adding logos, watermarks, or decorative elements to an image. ### Path annotation This feature enables manipulation of paths, which are editable curves consisting of anchor points connected by control handles that allow precise control over object boundaries. Users can create and modify custom shapes within an image using paths. ### Arrow annotation This feature provides the ability to draw and customize arrows with precision. Arrows can be created, modified, and personalized according to user preferences. By highlighting objects or drawing attention to specific details, arrows effectively communicate the intended focal point. ## Z-order support This feature allows users to adjust the positioning of annotations, particularly for designing personalized templates like greeting cards or posters, where managing the layering of multiple annotations is crucial for a polished final product. ## Transform images Rotate, flip, and zoom images with annotations. - [Transform images](https://ej2.syncfusion.com/angular/documentation/image-editor/transform) ### Rotate an image Rotate images with annotation to 90, 180, 270, 360 degrees clockwise and anti-clockwise. ### Flip an image Flip images with annotations horizontally/vertically. ## Undo and redo The Image Editor provides an option to undo and redo changes made to an image. The undo option helps reverse the last action performed and the redo option reverses the last undo action performed with the Image Editor. ## Zoom in/out images Users can adjust the size of an image by zooming in or out to fine-tune their edits. The pan tool can also be used to reveal hidden areas of an image. ## Pinch zoom Pinch zoom is a technique for zooming in and out an image by using your fingers. On touch-enabled devices, you can use two fingers to pinch and zoom in or out. ## Mouse wheel zoom Mouse wheel zoom is a method of zooming in and out an image using your mouse. To zoom in, press the ctrl key and roll your mouse wheel forward, and to zoom out, roll your mouse wheel backward. ## Keyboard zoom To zoom in, hold down the Ctrl key and press the + button and to zoom out, hold down Ctrl and press the - button. This will adjust the size of the image on your screen making it either larger or smaller depending on your needs. ## Loading an image initially Easily load an image into the Angular image editor using a base 64 string or URL, with support for PNG, JPEG, and SVG image formats. ## Image Editor toolbar Offers a wide range of tools for annotating, selecting, cropping, zooming, panning, rotating, flipping, filtering, and more, enabling users to fully edit and manipulate their images. Additionally, users can customize the toolbar by defining their own items or the entire toolbar. ## Exporting and saving images Easily save an image with a specified file name, file format, and image quality. Supported file formats for saving an image include PNG, JPEG, and SVG types. This feature provides more control over the output, ensuring that users can save their work exactly as they need it. ## Quick access toolbar This feature enhances the Image Editor control by showing a toolbar when you select annotations like rectangle, ellipse, line, arrow, text, and freehand draw. It offers quick access to actions such as clone, delete, and edit text. ## Frame support Users can add decorative borders or frames around images to enhance the visual appeal of an image. ## Resize support Users can adjust the size and dimensions of an image to suit their needs, such as for printing, web display, or other purposes. ## Straightening support Users can adjust an image by rotating it clockwise or counter clockwise. The rotating degree value should be within the range of -45 to +45 degrees for accurate straightening. Positive values indicate clockwise rotation, while negative values indicate counter clockwise rotation. ## Redact support Users can conceal sensitive information by applying blur or pixel effects to specific areas of an image. This feature is particularly valuable for protecting privacy and complying with data protection regulations, making it easier to securely share images without compromising sensitive information. ## Localization Localize user interface strings of the Angular Image Editor control by using the localization (l10n) library. ## Touch-friendly editing For a seamless experience on all devices, the Angular Image Editor includes a responsive mode that adapts the UI for mobile devices and offers a great user experience on phones, tablets, and desktops. ## Developer-friendly APIs With its extensive set of APIs, developers can control the appearance and behaviors of the Image Editor to suit their needs. ## Built-in themes The Angular Image Editor features built-in themes such as Bootstrap 5, Tailwind CSS, Fluent, high contrast, and more. Users can customize these themes or create their own using SASS variables or the Theme Studio application to achieve the desired look and feel. - [Theme Studio application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Other supported frameworks In addition to Angular, the Image Editor component is also available for the React, Vue, and JavaScript frameworks. You can access the component on these platforms using the links below. - [React Image Editor](https://www.syncfusion.com/react-components/react-image-editor) - [Vue Image Editor](https://www.syncfusion.com/vue-components/vue-image-editor) - [JavaScript Image Editor](https://www.syncfusion.com/javascript-ui-controls/js-image-editor) ## Angular Image Editor Code Example Easily get started with the Angular Image Editor using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular Image Editor Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/image-editor/default) that shows you how to render and configure a Image Editor in Angular. - html - ts "action-description" "col-lg-12 control-section" "e-img-editor-sample" /** * Default Sample */ @syncfusion/ej2-base ImageEditorComponent @syncfusion/ej2-angular-image-editor DefaultImageEditorComponent ./assets/image-editor/images/flower.png ./assets/image-editor/images/bridge.png ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Message Component | Notification Component | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-message # Angular Message - Show Message Significance and Context to Users - A simple, responsive component used to denote severity levels of messages to end users. - Built-in support for severity icons and predefined appearance variants that give importance to the message. - An easily customizable UI. ## Overview The Angular Message is a graphical user interface component that displays messages with visual severity levels. It differentiates messages with icons and colors to denote the importance and context of the message. It has several built-in features, such as severities, variants, icons, and a template. ## Severities Display messages with predefined severity types that have distinctive icons and colors to convey their importance to the user. The available severity types are normal, success, info, warning, and error. ## Variants Message has predefined appearance variants for different visual representations of messages: text, outlined, and filled. ## Icons Users tend to understand visual information better than text. Include severity icons to the left of the message content to provide a visual representation of the message urgency. Users may want to hide some messages once they’ve read them. Include a close icon to the right of the message content to hide it through user input. ## Content alignment Normally, message content is aligned to the left. Users can easily align it to the center or right using the built-in classes e-content-center and e-content-right. ## UI customization with a template A template is used to create custom user experiences. The Message component lets you customize the content with a custom structure. The content can be a string, paragraph, or any other HTML element. ## Rounded and Square The corners of the message box can be rounded or squared, by adding a custom class at the application level. Based on this custom class, users can override the message styles to make it round or square. The Message control with rounded corners will have a softer, smoother appearance, while the square corners will have a more Angular, defined look. ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) accessibility practices to work with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/button/#keyboard-interaction-3) best practices for implementing keyboard interaction. - Follows [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, in design of the UI visual elements such as foreground color, background color, line spacing, text, and images. - Supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian. ## Developer-friendly APIs Developers can control the appearance and behaviors of the Message component using a rich set of APIs. ## Built-in themes The Angular Message supports several built-in themes: Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and high contrast. Users can customize any one of these built-in themes or create new themes to achieve their own desired look and feel either by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio application.](https://ej2.syncfusion.com/themestudio/?theme=fluent) ## Other supported frameworks The Message component is also available for our Blazor, React, Vue, and JavaScript frameworks. Check it out on the other platforms at these links: - [Blazor Message](https://www.syncfusion.com/blazor-components/blazor-message) - [React Message](https://www.syncfusion.com/react-components/react-message) - [Vue Message](https://www.syncfusion.com/vue-components/vue-message) - [JavaScript Message](https://www.syncfusion.com/javascript-ui-controls/js-message) ## Angular Message Code Example Easily get started with the Angular Message using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular Message Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/message/default) that shows you how to render and configure a Message in Angular. - html - ts "action-description" "col-lg-12 control-section msg-default-section" "content-section" "Editing is restricted" "Please read the comments carefully" "Your message has been sent successfully" "There was a problem with your network connection" "A problem has been occurred while submitting your data" ViewEncapsulation /** * Sample for Default Message. */ DefaultController ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Floating Action Button (FAB) | Customizable UI | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-fab # Angular Floating Action Button - Customizable Design and Function - A floating button that appears over all the contents of the web page to perform the primary screen action. - Position the FAB in predefined places. - Built-in support for primary, success, warning, info, and danger button styles. ## Overview The Angular Floating Action Button (Angular FAB) is an extension of the [Angular Button](https://www.syncfusion.com/angular-components/angular-button) that appears in front of all contents of a screen and performs a primary action. It supports several built-in features, such as icons, predefined styles, different button sizes, and UI customization. - [Angular FAB demo](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/floating-action-button/default) - [Angular FAB Getting Started documentation](https://ej2.syncfusion.com/angular/documentation/floating-action-button/getting-started) ## Predefined styles Several predefined styles are available in the Angular Floating Action Button: - Primary - Secondary - Outline - Info - Success - Warning - Danger You can use any of these styles based on the context of your application. - [FAB predefined styles documentation](https://ej2.syncfusion.com/angular/documentation/floating-action-button/styles) ## Positioning The Angular Floating Action Button provides built-in support to position the FAB on the page or target. - [FAB positioning documentation](https://ej2.syncfusion.com/angular/documentation/floating-action-button/positions) ## Icon with text button In Angular FAB, use a button with an icon to the right or left of button text or choose an icon-only button. - [FAB Icon documentation](https://ej2.syncfusion.com/angular/documentation/floating-action-button/icons#fab-with-icon-and-text) ## Built-in themes The Angular Floating Action Button supports several built-in themes such as Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize these built-in themes or create new ones to achieve their desired look and feel by simply overriding Sass variables or using our Theme Studio application. - [Theme Studio application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/button/) accessibility practices to work with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/button/) best practices for implementing keyboard interaction. - Adheres to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards in the design of UI visual elements such as foreground color, background color, line spacing, text, and images. - Supports right-to-left (RTL) text direction for users working with RTL languages like Hebrew, Arabic, or Persian. ## Developer-friendly APIs The Angular Floating Action Button (FAB) component offers a range of APIs that allows developers to customize its appearance and behavior. With these APIs, developers can create a unique and highly personalized FAB that fits seamlessly into their applications. ## Angular Floating Action Button Code Example Easily get started with the Angular Floating Action Button using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular Floating Action Button Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/floating-action-button/default) that shows you how to render and configure a FAB in Angular. - html - ts "control-section" ` ` ## Other supported frameworks The Floating Action Button component is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the component on other platforms using these links: - [Blazor Floating Action Button](https://www.syncfusion.com/blazor-components/blazor-fab) - [React Floating Action Button](https://www.syncfusion.com/react-components/react-fab) - [Vue Floating Action Button](https://www.syncfusion.com/vue-components/vue-fab) - [JavaScript Floating Action Button](https://www.syncfusion.com/javascript-ui-controls/js-fab) ## Reference [https://www.syncfusion.com/angular-components/angular-button](https://www.syncfusion.com/angular-components/angular-button) ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Speed Dial | Customizable Design and Function | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-speed-dial # Angular Speed Dial - Customizable Design and Function - Speed Dial appears over all the contents of the page to display multiple primary screen action buttons. - Component can be easily placed in any of multiple positions. - Built-in support for primary, success, warning, info, and danger button styles. - Action buttons can display in linear and radial directions. ## Overview The Angular Speed Dial component is an extension of the [Angular Floating Action Button](https://www.syncfusion.com/angular-components/angular-fab) that displays a list of action buttons when clicked. It displays action buttons in linear and radial directions. - [Angular Speed Dial demo.](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/speed-dial/default) - [Angular Speed Dial Getting Started documentation](https://ej2.syncfusion.com/angular/documentation/speed-dial/getting-started) ## Display modes The Angular Speed Dial component supports the display of action items in a linear or radial layout. This helps make actions more accessible and easy to use. ### Linear In the linear mode, the Angular Speed Dial component displays action items in a list-like format, either horizontally or vertically. Action items can be displayed at the top, bottom, left, or right side of the Speed Dial button. Auto positioning displays the action items based on the position of the Speed Dial. - [Speed Dial linear mode documentation](https://ej2.syncfusion.com/angular/documentation/speed-dial/display-modes) ### Radial In the radial mode, the Angular Speed Dial component displays action items in a circular pattern similar to a radial menu. If start and end angles are not specified, they are automatically calculated based on the position of the component. - [Speed Dial radial mode documentation](https://ej2.syncfusion.com/angular/documentation/speed-dial/radial-menu) ## Predefined styles Several predefined styles are available in Angular Speed Dial: - Primary - Secondary - Outline - Info - Success - Warning - Danger - [Speed Dial styles documentation](https://ej2.syncfusion.com/angular/documentation/speed-dial/styles) ## Positioning Place the Speed Dial button in various built-in positions on the target element or page. - [Speed Dial positions documentation](https://ej2.syncfusion.com/angular/documentation/speed-dial/positions) ## Icon with text The Angular Speed Dial component enables customization of the Speed Dial button and action items, including the use of text only, icon with text, or icon only. This allows developers to create highly personalized buttons and action items that effectively communicate the actions they perform. - [Speed Dial icons documentation](https://ej2.syncfusion.com/angular/documentation/speed-dial/items) ## Templates Customize the default appearance of the Speed Dial and its action items. By using item and popup templates, a highly personalized Speed Dial can be created, which enhances the user experience. - [Speed Dial templates documentation](https://ej2.syncfusion.com/angular/documentation/speed-dial/template) ## Modal popup mode Modal popup mode enables an overlay to prevent background interaction when popup action items are opened. - [Speed Dial modal documentation](https://ej2.syncfusion.com/angular/documentation/speed-dial/modal) ## Built-in themes The Angular Speed Dial supports these built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize one of these built-in themes or create new themes to achieve their desired look and feel by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio application.](https://ej2.syncfusion.com/themestudio/?theme=material) ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/button/) accessibility practices to work with screen readers and assistive devices. - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/) accessibility that helps pop-up action items be accessed by on-screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/button/) best practices for implementing keyboard interaction. - Based on [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, UI visual elements such as foreground color, background color, line spacing, text, and images are designed. - Supports right-to-left (RTL) text direction for users working with RTL languages like Hebrew, Arabic, or Persian. ## Developer-friendly APIs The Angular Speed Dial component offers APIs for customizing its appearance and behavior, as well as templates for personalizing the look and feel of the Speed Dial and its action items. With these APIs, developers can create a unique and highly personalized Speed Dial that fits seamlessly into their applications. ## Angular Speed Dial code example Easily get started with the Angular Speed Dial using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular Speed Dial Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/speed-dial/default) that shows you how to render and configure the Angular Speed Dial. - html - ts "control-section" SpeedDialItemModel @syncfusion/ej2-angular-buttons app.component.html ## Other supported frameworks The Speed Dial component is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the component on other platforms using these links: - [Blazor Speed Dial](https://www.syncfusion.com/blazor-components/blazor-speeddial) - [React Speed Dial](https://www.syncfusion.com/react-components/react-speed-dial) - [Vue Speed Dial](https://www.syncfusion.com/vue-components/vue-speed-dial) - [JavaScript Speed Dial](https://www.syncfusion.com/javascript-ui-controls/js-speed-dial) ## Reference [https://www.syncfusion.com/angular-components/angular-fab](https://www.syncfusion.com/angular-components/angular-fab) ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Skeleton | Modern Data-Loading Indicator | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-skeleton # Angular Skeleton - Modern Data-Loading Indicator Component - Modern data-loading indicator: A placeholder that shows the preview of a page until it is loaded. - Built-in wave, fade, and pulse shimmer effects. - Built-in support for different layout shapes to create a preview of any layout. ## Overview Angular Skeleton is a modern data-loading indicator that shows a preview of how the page is going to be displayed with a shimmer effect. It improves the user experience by informing users of ongoing processes. - [Angular Skeleton demo](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/skeleton/default) - [Angular Skeleton getting started documentation](https://ej2.syncfusion.com/angular/documentation/skeleton/getting-started) ## Built-in shapes Use built-in shapes in Angular Skeleton to create a preview of any layout. - [Skeleton shapes documentation](https://ej2.syncfusion.com/angular/documentation/skeleton/shapes) ## Built-in shimmer effects Angular Skeleton supports wave, fade, and pulse shimmer effects. - [Skeleton shimmer effects documentation](https://ej2.syncfusion.com/angular/documentation/skeleton/shimmer-effect) ## Customization The appearance of the Angular Skeleton component can be customized by changing the wave color, background, width, and height. Shimmer effect can be applied to any element to make it act like a CSS component. ## Built-in themes The Angular Skeleton supports built-in themes such as Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize these built-in themes or create new themes to achieve the desired look and feel by simply overriding SASS variables or using the Theme Studio application. - [Theme Studio application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Angular Skeleton code example Easily get started with the Angular Skeleton using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular Skeleton Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/skeleton/default) that shows you how to render and configure the Angular Skeleton. - html - ts "control-section" > ` ` ## Other supported frameworks The Skeleton component is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the component on other platforms using these links: - [Blazor Skeleton](https://www.syncfusion.com/blazor-components/blazor-skeleton) - [React Skeleton](https://www.syncfusion.com/react-components/react-skeleton) - [Vue Skeleton](https://www.syncfusion.com/vue-components/vue-skeleton) - [JavaScript Skeleton](https://www.syncfusion.com/javascript-ui-controls/js-skeleton) [I’d love to read it now.](https://ej2.syncfusion.com/angular/documentation/skeleton/getting-started) ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Mention | @Mention component | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-mention # Angular @Mention Component - Easily tag users, groups, and topics in the Angular Rich Text Editor. - Easily integrate with text area, text box, or other editable components. ## Overview Angular Mention is an autocomplete-like component for tagging or selecting a user or group from a suggestion list. The component opens a suggestion list when a user starts typing with the ‘@’ character, just like on popular social media sites such as Facebook, Twitter, and more. It supports several out-of-the-box features: data binding, grouping, UI customization, accessibility, and more. ## Data binding The Angular Mention component seamlessly works with local and remote data sources such as an array of primitive data, data sets of complex items, JSON data collections, and remote data sources. ## Angular Rich Text Editor with mention and hashtags Tag or select a user or group from the suggestion list when composing content in the Rich Text Editor. ## Integration Easy to integrate with editable components such as text area, text box, and div elements with content-editable set to true. ## Trigger character Change the mention (trigger) character to # or other characters. ## Multiple lists Use multiple mention characters in a single editor, such as @ for a user selection list and # for a topic selection list. ## Highlight matched text Change the visual appearance of the matching characters in the suggestion list. ## Minimum characters Open the suggestion list when the specified character limit is reached. ## Space in search Supports spaces in searches and displays the results in the suggestion list. ## Selection suffix Users can add a suffix to the selected suggestion. ## Grouping Display suggestions with categories and groups in the Angular Mention component. ## Sorting Display sorted suggestions in ascending or descending order. ## Number of suggestions Limit the number of items displayed in the suggestion list. ## UI customization The appearance (style) of each item displayed in the suggestion list and the selected value can be customized. ## Suggestions with icons Include icons in the suggestion list items to improve visual representation. ## Item template Customize each suggestion list item by using item templates. ## Display template Customize the appearance of the selected items displayed in the Angular Mention component. ## Empty record template Customize the empty result text in the suggestion pop-up. ## Loading template Customize the appearance of the suggestion pop-up while data is loading. ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) accessibility practices to work with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) best practices for implementing keyboard interaction. - Adheres to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards in the design of UI visual elements such as foreground color, background color, line spacing, text, and images. - Supports right-to-left (RTL) text direction for users working with RTL languages like Hebrew, Arabic, or Persian. ## Developer-friendly APIs Developers can control the appearance and behaviors of the Mention component using a rich set of APIs. ## Built-in themes The Angular Mention component supports several built-in themes, such as Fluent, Bootstrap 5, Tailwind CSS, Material, high contrast, and more. Users can customize any of these built-in themes or create new themes to achieve their own desired look and feel either by simply overriding Sass variables or using our Theme Studio application. - [Theme Studio application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Maps Library | Interactive Maps Component | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-maps-library # Angular Maps Library - A Feature-Rich & Customizable Maps Component - Render maps from various map providers including OpenStreetMap, Google Maps, and Bing Maps. - Easily customize maps by rendering GeoJSON data and adding built-in features like bubbles, markers, navigation lines, and legends. - Simulate concepts like bus seat selection and sports stadiums by rendering custom shapes. ## Overview The Angular Maps library is a geographical data visualization tool for rendering maps from GeoJSON data or other map providers like OpenStreetMap, Google Maps, and Bing Maps. Its rich feature set includes markers, labels, bubbles, navigation lines, legends, tooltips, zooming, panning, drill down, and more. ### Easy to customize To visualize a geometric shape in SVG format in Maps, you can [bind GeoJSON data](https://ej2.syncfusion.com/angular/documentation/maps/getting-started#render-shapes-from-geojson-data) to it. GeoJSON data is light and simple to read. You can render a world map or a U.S. map and alter it with the Angular Maps control’s built-in options to achieve the required layout. ### Geospatial imaging services Works with services like Google Maps, [Bing Maps](https://ej2.syncfusion.com/angular/documentation/maps/providers/bing-maps), and [OpenStreetMap](https://ej2.syncfusion.com/angular/documentation/maps/providers/map-provider) to view satellite, aerial, and street maps by locating map data quickly without the use of any external shape inputs. ### Markers and bubbles [Markers](https://ej2.syncfusion.com/angular/documentation/maps/markers) are notes on maps that indicate specific latitude and longitude points using symbols. [Bubbles](https://ej2.syncfusion.com/angular/documentation/maps/bubble) are used to convey additional information about shapes such as population density and land area. ### Multiple geometric layers A [map with several geometric layers](https://ej2.syncfusion.com/angular/documentation/maps/layers#multilayer) in a single view can be generated with sublayers. You can render the geographic elements of a country, such as rivers and valleys, as a sublayer. Each layer can be drilled. ### Adapts to any resolution Maps has a highly responsive layout and an optimized design for desktops, tablets, and phones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Custom projections The Angular Maps component supports [Mercator, rectangular, Miller, Eckert 3, Eckert 5, Eckert 6, and Winkel 3](https://ej2.syncfusion.com/angular/documentation/maps/customization#projection-type) projections. ### Zooming and panning [Zooming and panning](https://ej2.syncfusion.com/angular/documentation/maps/how-to/zooming) in Angular Maps are fast. Zoom the map by scrolling the mouse wheel, clicking the shapes, or using the zooming toolbar. Pan the map to navigate among regions easily. ### Globalization and localization [An internationalization library](https://ej2.syncfusion.com/angular/documentation/maps/internationalization) is used to globalize number, date, and time values in Maps. All the strings used in the Maps user interface can be localized by users as needed. [Localizing UI strings](https://ej2.syncfusion.com/angular/documentation/maps/localization) involves using the localization (l10n) library. ## Angular Maps library code example Easily get started with Angular Maps library using a few simple lines of HTML and TS code, as demonstrated in the following. Also explore our [Angular Maps library example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/maps/default), which shows you how to render maps. - html - ts shapePropertyPath 'src/app/world_map' // Specifies the template string for the maps component. './app.component.html' "United Kingdom" ## GeoJSON layer Bind GeoJSON data to maps to render any geometric shape in SVG (scalable vector graphics) format to visualize data. For example, render the world map or U.S. map and customize it to the desired look using built-in options in the Angular Maps component. Add any number of layers to the maps. - [GeoJSON layer example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/maps/default) - [GeoJSON layer documentation](https://ej2.syncfusion.com/angular/documentation/maps/getting-started#render-shapes-from-geojson-data) ## Geometric types GeoJSON data contains geometric objects with properties such as geometric types and coordinates. The geometric types are the values present in the geometric objects of the GeoJSON data that specify the type of shape to be rendered, along with the coordinates that help draw the shape’s boundary line. Polygon, MultiPolygon, LineString, MultiLineString, Point, MultiPoint, and GeometryCollection are the supported geometric types. - [Geometric types documentation](https://ej2.syncfusion.com/angular/documentation/maps/populate-data#geometry-types) ## Geo-imagery visuals Built-in support for external geospatial imagery services, such as Bing Maps and OpenStreetMap, is used to visualize satellite, aerial, and street maps, or other kinds of imagery tiles without any external shape inputs. Users can render maps from various map providers, for example, Google Maps Tile API, TomTom, Mapbox, and Esri’s ArcGIS. By using these external services, map data can be located easily. - [OpenStreetMap example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/maps/osm) - [Map providers documentation](https://ej2.syncfusion.com/angular/documentation/maps/map-providers) ## Multiple layers Using sublayers, an Angular Map can be created with multiple geometric layers in a single view. For example, render additional geographic features of a country such as rivers and valleys as sublayers. You can also drill down in each layer. - [Multiple layers example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/maps/multilayer) - [Multiple layers documentation](https://ej2.syncfusion.com/angular/documentation/maps/layers#multilayer) ## Markers Denote a place with symbols or a note at the desired latitude and longitude on a map using a marker. For example, indicate a particular place on a U.S. map using a balloon marker shape. You can also place any HTML element as a marker and add multiple markers to a map. - [Default marker example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/maps/marker) - [Marker template example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/maps/marker-template) - [Marker documentation](https://ej2.syncfusion.com/angular/documentation/maps/markers) ## Marker clustering Display multiple markers in the same location by clustering them. For example, use markers to indicate the top 50 cities in the world. If one marker overlaps another, they will be clustered, and the total number of markers will be displayed over the cluster. - [Marker clustering example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/maps/marker-cluster) - [Marker clustering documentation](https://ej2.syncfusion.com/angular/documentation/maps/markers#marker-clustering) ## Marker drag and drop Drag and drop markers to reposition them in the map. After dragging and dropping markers, the marker data source and elements such as marker shape, color, and tooltip content can be changed using supported events. - [Marker drag and drop documentation](https://ej2.syncfusion.com/angular/documentation/maps/markers#repositioning-the-marker-using-drag-and-drop) ## Polygons Polygons can be displayed over a shape layer or an online map to highlight a specific region. ## Data labels Data labels on a map provide identification for the shapes by displaying their names. Trim or hide the labels at intersections with other labels and when they exceed shape bounds. - [Data labels example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/maps/labels) - [Data labels documentation](https://ej2.syncfusion.com/angular/documentation/maps/data-labels) ## Bubbles Create a simple Angular Map with bubbles to represent additional information about shapes such as population density or land area. Bubbles are rendered with various magnitudes and colors based on the underlying data values of the shape. - [Bubbles example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/maps/bubble) - [Bubbles documentation](https://ej2.syncfusion.com/angular/documentation/maps/bubble) ## Navigation lines Denote flight routes or ship routes between two places on a geographic map with connector lines. The lines can also be curved. - [Navigation lines example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/maps/navigation-lines) - [Navigation lines documentation](https://ej2.syncfusion.com/angular/documentation/maps/navigation-line) ## Color mapping Categorize the shapes on a map by customizing their colors based on the underlying values. The Angular Maps component supports three types of color mapping: range color mapping, equal color mapping, and desaturation color mapping. - [Color mapping example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/maps/color-mapping) ### Range color mapping Apply colors to the shapes by comparing their values with a desired numeric range. For example, apply colors to states in the U.S. based on population density. - [Range color mapping documentation](https://ej2.syncfusion.com/angular/documentation/maps/color-mapping#range-color-mapping) ### Equal color mapping Differentiate a shape’s fill based on its underlying values and colors by using equal color mapping. For example, apply colors to states in the U.S. based on a winning political candidate. - [Equal color mapping documentation](https://ej2.syncfusion.com/angular/documentation/maps/color-mapping#equal-color-mapping) ### Desaturation color mapping Change the opacity of the shapes by comparing their values with a desired numeric range. Minimum and maximum opacity of the shapes can be customized. - [Desaturation color mapping documentation](https://ej2.syncfusion.com/angular/documentation/maps/color-mapping#desaturation-color-mapping) ### Desaturation with multiple colors Apply multiple colors to a shape from a gradient by comparing values with a desired numeric range. Any number of colors can be specified for creating the gradient. - [Desaturation with multiple colors documentation](https://ej2.syncfusion.com/angular/documentation/maps/color-mapping#desaturation-with-multiple-colors) ## Legends Legends provide valuable information for interpreting a map by explaining colors, shapes, or other identifiers based on the data visualized. The Angular Maps component supports two types of legends: default and interactive. - [Legend documentation](https://ej2.syncfusion.com/angular/documentation/maps/legend) - [Legend example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/maps/legend) ### Default A legend contains swatches of symbols with descriptions to denote the categories of shapes in a map. ### Interactive Use a map with an interactive legend to find the range of an underlying shape’s value on mouse hover. ## Zooming and panning Zoom an Angular Map for close-up analysis by pinching the map, scrolling the mouse wheel, clicking the shapes, or by using the zooming toolbar. Pan the map for easy navigation across regions. You can also change the zoom level of the initial rendering. - [Zooming and panning example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/maps/zooming) - [Zooming and panning documentation](https://ej2.syncfusion.com/angular/documentation/maps/user-interactions#zooming) ## Tooltip The tooltip displays details about the shape value on mouse hover. Tooltips are also displayed for markers and bubbles on a map. - [Tooltip example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/maps/tooltip) - [Tooltip documentation](https://ej2.syncfusion.com/angular/documentation/maps/user-interactions#tooltip) ## Drill down Drill down in a rendered Angular Maps component to display shape data located on another layer. For example, the initial layer may render the world map and on clicking a particular continent, the continent alone will render separately on another layer. - [Drill-down example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/maps/drilldown) - [Drill-down documentation](https://ej2.syncfusion.com/angular/documentation/maps/how-to/drilldown) ## Selection and highlight Select a particular shape on mouse click or highlight on mouse hover to bring the focus to shapes on a map. - [Selection and highlight example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/maps/selection) - [Selection documentation](https://ej2.syncfusion.com/angular/documentation/maps/user-interactions#selection) - [Highlight documentation](https://ej2.syncfusion.com/angular/documentation/maps/user-interactions#highlight) ## Custom shapes Create an Angular Map with custom shapes by rendering personalized GeoJSON data to indicate building infrastructure, points of interest, flight seat arrangement, sports stadiums, and more. - [Custom shapes example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/maps/seat-selection) ## Annotations Display any HTML element as an annotation at a specific point of interest on a map. For example, place a compass image on the map using an annotation. You can also add multiple annotations to a map. - [Annotation example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/maps/annotation) - [Annotation documentation](https://ej2.syncfusion.com/angular/documentation/maps/annotations) ## Projection Change the projection of the default rendered map. The Angular Maps component supports Mercator, Equirectangular, Miller, Eckert 3, Eckert 5, Eckert 6, Winkel 3, and Aitoff projections. - [Projection example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/maps/projection) - [Projection documentation](https://ej2.syncfusion.com/angular/documentation/maps/customization#projection-type) ## Title and subtitle Add a title and subtitle to visualize additional information on maps. Fonts and alignment used in the title and subtitle can also be customized. ## Appearance Customize the look and feel of an Angular Map by changing the fill color, background, border, and opacity of shapes. Almost all the elements in Angular Maps are customizable. The component also provides built-in palettes with customizable options by default. - [Appearance documentation](https://ej2.syncfusion.com/angular/documentation/maps/customization#customize-shape) ## State persistence State persistence allows the Maps component to maintain state by storing the most recent model value in browser cookies. When the appropriate setting is enabled, some of the Maps component model values are preserved even after the page is refreshed. - [State persistence documentation](https://ej2.syncfusion.com/angular/documentation/maps/state-persistence) ## Exporting Export or print the rendered Angular Maps to save a local copy for further use. ### Export Export the Angular Maps component to a PDF document or in image formats such as SVG, PNG, and JPEG on the client side. - [Export example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/maps/export) - [Export documentation](https://ej2.syncfusion.com/angular/documentation/maps/print#export) ### Print Print the rendered Angular Maps directly from the browser. - [Print example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/maps/print) - [Print documentation](https://ej2.syncfusion.com/angular/documentation/maps/print#print) ### Keyboard navigation The Angular Maps library ensures that every element is keyboard accessible. Major features like zooming, panning, shape selection, and drill down can be performed using just keyboard shortcuts, no mouse interaction required. This helps in creating highly accessible applications. ### Accessibility The Angular Maps library has complete WAI-ARIA accessibility support. The Maps UI includes high-contrast visual elements that help visually impaired people have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers. ## Angular version compatibility The Angular Maps library is kept up to date to make it compatible with the latest Angular version. - [More details on Angular Maps version compatibility](https://support.syncfusion.com/kb/article/12137/angular-maps-library-version-compatibility) ## Other supported frameworks The Maps is available for the Blazor, React, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) - [React Maps](https://www.syncfusion.com/react-components/react-maps-library) - [JavaScript Maps](https://www.syncfusion.com/javascript-ui-controls/js-maps-library) - [Vue Maps](https://www.syncfusion.com/vue-components/vue-maps-library) ## Supported browsers The Angular Maps library works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/maps/getting-started) [How to Add Annotations to the Angular Maps Component?](https://www.syncfusion.com/tutorial-videos/angular/maps?title=how-to-add-annotations-to-the-angular-maps-component) [How to Add Data Labels to the Angular Maps Component](https://www.syncfusion.com/tutorial-videos/angular/maps?title=how-to-add-data-labels-to-the-angular-maps-component) ##### Angular Rating Component | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-rating # Angular Rating Component - Allows users to rate the products or services by sharing their opinions and experiences. - A more precise rating is provided via built-in precision modes. - Customizable with various options, such as the number of stars to display, the maximum rating value, and the initial rating value. - Easily customize the appearance and layout of the rating items using templates. ## Overview The Angular Rating is a highly customizable component to rate products or services with precise and accurate values by using built-in precision modes. The customization supported in the Angular Rating component makes rating more expressive instead of just showing numeric values. - [Angular Rating demo](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/rating/default) - [Angular Rating getting started documentation](https://ej2.syncfusion.com/angular/documentation/rating/getting-started) ## Precision modes The Angular Rating component has several precision modes, which are listed below. - Full: The rating value is displayed in multiples of 1 (whole number). - Half: The rating value is displayed in multiples of 0.5 (half). - Quarter: The rating value is displayed in multiples of 0.25 (quarter). - Exact: The rating value is displayed in multiples of 0.1 (fraction). ## Tooltips The Angular Rating component supports tooltips to provide more information about the rating. Tooltips can be customized using the template to provide more expressive content rather than the item’s numerical values. ## Labels Labels provide additional information about the current rating value. Labels can be customized using the template and placed in different positions around the rating. ## Templates The Angular Rating component supports templates to customize rating items in different ways. Custom icons can be in the form of emojis, hearts, stars, SVG, and more. ## Right to left (RTL) The Angular Rating component supports right-to-left (RTL) rendering. ## Customization Customize rating items’ spacing, rated/unrated fill color, border color, and more, enabling it to fit the application’s needs. ### Size of the items Customizing the size of the items makes the Rating component more accessible and accurate. ### Spacing Adjust the space between items in the Rating component. ### Rated and unrated fill colors Customize the fill color of rated and unrated states of an item. ### Borders and stroke thickness Customizing the border color and stroke thickness of rated and unrated items enhances their appearance and makes them stand out. ## Built-in themes The Angular Rating supports these built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize one of these built-in themes or create new themes to achieve their desired look and feel by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio application.](https://ej2.syncfusion.com/themestudio/?theme=material) ## Web Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility to work with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing keyboard interaction. Tab: Navigate to the Rating component. Left Arrow: Decrease the rating value. Right Arrow: Increase the rating value. Up Arrow: Increase the rating value. Down Arrow: Decrease the rating value. - Follows [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards in design of the UI visual elements such as foreground color, background color, line spacing, text, and images. ## Angular Rating code example Easily get started with the Angular Rating using a few simple lines of HTML and TS code example as demonstrated below. Also explore our [Angular Rating example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/rating/default) that shows you how to render and configure the Angular Rating. - html - ts "control-section" ` ` ## Other supported frameworks The Rating component is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the component on other platforms using these links: - [Blazor Rating](https://www.syncfusion.com/blazor-components/blazor-rating) - [JavaScript Rating](https://www.syncfusion.com/javascript-ui-controls/js-rating) - [React Rating](https://www.syncfusion.com/react-components/react-rating) - [Vue Rating](https://www.syncfusion.com/vue-components/vue-rating) ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Ribbon Component | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-ribbon # Angular Ribbon Component - A highly customizable and versatile UI for building modern applications with a rich feature set. - Several built-in components. Offers easy customization to meet specific application requirements. - Both classic and simplified modes to enhance usability by organizing items and reducing clutter. - Built-in features like file menu support, help pane template, custom tooltip, and more. ## Overview The Angular Ribbon component provides a structured and easy-to-use user interface for users to access different features and functions using a series of tabs, improving user experience and efficiency. - [Angular Ribbon demo](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/ribbon/default) - [Angular Ribbon getting started documentation](https://ej2.syncfusion.com/angular/documentation/ribbon/getting-started) ## Tabs and groups Provides a structured way to organize and group related functions, improving user experience by enabling quick access to specific features within categorized sections. Each group contains a launcher button that reveals additional functions, allowing users to explore and utilize more tools efficiently. - [Ribbon tabs and groups documentation](https://ej2.syncfusion.com/angular/documentation/ribbon/tabs-groups) ## Simplified layout The Angular Ribbon offers a simplified mode that organizes items and groups into a single row for improved usability and reduced clutter. End users can quickly navigate to other commonly used items in the overflow menu and switch to normal mode using built-in toggle button. - [Ribbon simplified layout documentation](https://ej2.syncfusion.com/angular/documentation/ribbon/layouts#simplified-layout) ## Built-in Ribbon items Several built-in support items, such as buttons, checkboxes, dropdown buttons, split buttons, combo boxes, and more can be customized and used to execute specific actions. Three size modes: large, medium, and small, are supported. - [Ribbon built-in items documentation](https://ej2.syncfusion.com/angular/documentation/ribbon/items) ### Button items Use different sized buttons to showcase content and icons in a visually appealing and interactive manner. ### Checkbox items Enables users to toggle between checked and unchecked states, caption the checkbox and position the label either before or after the checkbox. ### Dropdown button items The dropdown button item functions like a regular button, but includes a dropdown menu that displays menu items. ### Split button items The split button item combines the functionality of a button with a dropdown menu, allowing users to perform a default action and access additional options. ### Combobox items The combobox item combines a drop-down list with an editable textbox, enabling users to select from predefined pop-up list options. ### Colorpicker item The color picker ribbon item enables users to select colors from a palette or define custom colors. ## Ribbon gallery In addition to the existing built-in items, gallery items allow users to perform specific actions by displaying a collection of related items, including icons, content, or images. ## Custom ribbon items The Angular Ribbon supports templates to customize the ribbon items with any non-built-in items or HTML content. - [Ribbon custom items documentation](https://ej2.syncfusion.com/angular/documentation/ribbon/items#custom-items) ## Contextual tabs The contextual tab allows users to display ribbon tabs on demand based on their needs. Similar to the normal ribbon tabs, it supports adding all built-in and custom ribbon items to execute specific actions. ## Help pane The help pane template, positioned at the right side of the Ribbon, enables users to access help content typically for actions such as managing document permissions, sharing functions, and more. - [Ribbon help pane documentation](https://ej2.syncfusion.com/angular/documentation/ribbon/help-pane-template) ## KeyTips KeyTips enable users to quickly access the tabs or ribbon items using defined unique key tips (up to 3 characters). To display, press Alt + Windows/Command keys, and close or traverse back by pressing the Esc key. ## Tooltips The Angular Ribbon control supports tooltips to display information when hovering over items, offering users additional details, enhancing user experience. - [Ribbon tooltip documentation](https://ej2.syncfusion.com/angular/documentation/ribbon/tooltip) ## File menu Supports a built-in menu that allows you to add file-related actions easily. - [Ribbon file menu documentation](https://ej2.syncfusion.com/angular/documentation/ribbon/filemenu) ## Backstage view In addition to the traditional file menu, the backstage view displays information such as application settings, user information, etc. The backstage options are displayed on the left, while the content of each option is shown on the right. ## Auto resize The Ribbon efficiently manages space by expanding or collapsing groups, with larger groups collapsing first during resizing. Users can customize the order of groups according to their needs for a personalized Ribbon. - [Ribbon resizing documentation](https://ej2.syncfusion.com/angular/documentation/ribbon/resizing) ## Built-in themes The Angular Ribbon supports these built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize one of these built-in themes or create new themes to achieve their desired look and feel by simply overriding SASS variables or using the Theme Studio application. - [Theme Studio application.](https://ej2.syncfusion.com/themestudio/?theme=fluent) ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/) accessibility practices to work with screen readers and assistive devices. - Follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/) best practices for implementing keyboard interaction. - Follows [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards in design of the UI visual elements such as foreground color, background color, line spacing, text, and images. - Supports right-to-left (RTL) text direction for users working with RTL languages like Hebrew, Arabic, or Persian. ## Angular Ribbon code example Easily get started with the Angular Ribbon using a few simple lines of HTML and TS code example as demonstrated below. Also, explore our [Angular Ribbon example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/ribbon/default) that shows you how to render and configure the Angular Ribbon. - html - ts "control-section" [splitButtonSettings]= "cutcopy-collection" [buttonSettings]= [dropDownSettings]= FileMenuSettingsModel RibbonButtonSettingsModel RibbonSplitButtonSettingsModel RibbonDropDownSettingsModel @syncfusion/ej2-ribbon @syncfusion/ej2-navigations app.component.html Keep Source Format Excel SpreadSheet e-icons e-file-new e-icons e-folder-open ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Stepper Component | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-stepper # Angular Stepper Component - Illustrate a visual representation of a multi-step process. - Features such as step orientation, linear step progression, label positioning, and more. - Provide various step types, including indicator and label, only indicator, or only label. - Easily customize the default appearance and content of each step using templates. ## Overview The Angular Stepper is a highly customizable component that enables users to navigate through a series of steps or stages in a process within a web application. Steppers display a list of steps, highlighting the current step, and allow users to move between steps. It includes several built-in features, such as different step types, orientation, linear flow, label positions, and template customization. - [Angular Stepper demo](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/stepper/default) ## Angular Stepper Code Example Easily get started with the Angular Stepper using a few simple lines of HTML code, as demonstrated below. Also explore our [Angular Stepper Example](https://www.syncfusion.comttps://ej2.syncfusion.com/angular/demos/#/bootstrap5/stepper/default), which shows you how to render and configure a Stepper in Angular. - html "control-section" "default-stepper-section" "stepper-control" "customStepperCreated()" "iconStepperCreated()" "stepper-control iconWithLabel" #stepperIconLabel "iconLabelStepperCreated()" "labelStepperCreated()" ## Step types The Angular Stepper component supports the step types listed below. - Default: Displays steps with a combination of step indicators and labels. - Indicator: Displays steps with only the step indicators. - Label: Displays steps with only the step labels. ## Orientations Supports orientation for displaying layouts: Horizontal, showing steps side-by-side, and vertical, showing steps one below the other. ## Linear flow Enable a step-by-step progression, ensuring completion of each step before moving on to the next. ## Tooltips The Angular Stepper component supports tooltips to show additional information when users hover over a step, such as a label or text. Tooltips can be customized using templates to provide more detailed information about steps. ## Label positions Supports positioning the labels at the top, bottom, left, or right. ## Validation state The Angular Stepper component enables you to set the validation state for each step, displaying a success or error icon. ## Built-in themes The Angular Stepper supports these built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize one of these built-in themes or create new themes to achieve their desired look and feel by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility practices to work with screen readers and assistive devices. - Based on [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, UI visual elements such as foreground color, background color, line spacing, text, and images are designed. - Supports right-to-left (RTL) text direction for users working with RTL languages like Hebrew, Arabic, or Persian. ## Developer-friendly APIs The Angular Stepper component offers APIs for customizing its appearance and behavior, as well as templates for personalizing the look and feel. With these APIs, developers can create a unique and highly personalized Stepper that fits seamlessly into their applications. ## Other supported frameworks The Stepper is available for the Blazor, React, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [Blazor Stepper](https://www.syncfusion.com/blazor-components/blazor-stepper) - [React Stepper](https://www.syncfusion.com/react-components/react-stepper) - [JavaScript Stepper](https://www.syncfusion.com/javascript-ui-controls/js-stepper) - [Vue Stepper](https://www.syncfusion.com/vue-components/vue-stepper) ## Supported browsers The Angular Stepper works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://blazor.syncfusion.com/documentation/stepper/getting-started) ##### Angular 3D Charts | Live Tracking | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-3d-chart # Angular 3D Charts - Beautiful and Interactive Component - Visualize and analyze data with column, stacked column, bar, and stacked bar. - Interact and explore 3D charts with features such as tooltip, selection, highlights, etc. - Experience seamless rotation and tilt in 3D Charts. ## Overview Angular 3D Charts is a graphical representation of data in three dimensions, showcasing relationships and trends among variables. Unlike traditional 2D charts, 3D charts add depth to the visualization, allowing for a more immersive and comprehensive understanding of data patterns. ### Interactive 3D charts The [tooltip](https://ej2.syncfusion.com/angular/documentation/3d-chart/tool-tip) cursor allows users to interact with the chart and obtain detailed information about data points. ### Admirable feature set The Angular 3D Chart supports legends, axis types, data labels, rotation, tilt, selection, and highlights. ### Adapts to any resolution The 3D charts have a highly responsive layout and an optimized design for desktops, touchscreens, and phones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Attractive, customizable themes Cutting-edge design with several built-in themes, such as Material 3, Fluent, Tailwind CSS, Bootstrap, Material, and Fabric. ### Globalization and localization Users from different locales can use the control to format dates, currency, and numbering to suit their preferences. ### Elegant animation The 3D Chart for Angular provides fluid animation to present data with smooth transitions. ## Angular 3D Charts Code Example Easily get started with the Angular 3D Chart using a few simple lines of HTML and TS code as demonstrated below. Also, explore our [Angular 3D Chart Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/three-dimension-chart/column) that shows you how to render and configure 3D Charts in Angular. - ts - html ViewEncapsulation @syncfusion/ej2-charts @syncfusion/ej2-base ## Series types The 3D charts can plot over six chart types, including column, bar, stacking column, stacking bar, 100% stacked column, and 100% stacked bar. ## Legend The 3D charts support legends to provide additional information about a series with customization options. - [Legend documentation](https://ej2.syncfusion.com/angular/documentation/3d-chart/legend) ## Tooltip The 3D chart control provides options to display tooltips with details about pointer values on mouse hover. - [Tooltip documentation](https://ej2.syncfusion.com/angular/documentation/3d-chart/tool-tip) ## Selection and Highlight Select or highlight data points in a series for easy understanding of the selected data. Adding pattern and color to the selected data makes charts more interactive. - [Selection documentation](https://ej2.syncfusion.com/angular/documentation/3d-chart/selection) ## Print and Export Export Angular 3D Charts to PDF documents or to image formats such as PNG and JPEG on the client side. Print the rendered 3D charts and graphs directly from the browser. - [Print and export documentation](https://ej2.syncfusion.com/angular/documentation/3d-chart/print-export) ## Axis types The 3D charts can plot different data types such as numbers, datetime, logarithmic, and string. The chart’s axis elements can be customized further to make an axis more readable. ## Data labels The 3D charts support data labels to annotate points to improve the readability of data. - [Data labels documentation](https://ej2.syncfusion.com/angular/documentation/3d-chart/data-labels) ## Customization Customize the color of data points, the depth of the wall, and the wall color of the 3D charts using built-in APIs. - [Customization documentation](https://www.syncfusion.comhthttps://ej2.syncfusion.com/angular/documentation/3d-chart/data-labels#customization) ## Multiple series Plot multiple series in a single chart to compare different data values. Enabling legends and tooltips gives more information about an individual series. ## Interactive chart The end-user experience is greatly enhanced by including a set of interactive features such as rotation, tilt, selection, and highlight. ### Keyboard navigation Every element in the Angular 3D Chart is keyboard accessible. Major features like tooltips, legends, selection, and highlights can be used with keyboard commands alone. No mouse interaction is required. This helps in creating highly accessible applications. - [Keyboard navigation documentation](https://ej2.syncfusion.com/angular/documentation/3d-chart/accessibility#keyboard-navigation) ### Screen reader Angular 3D Charts view has complete WAI-ARIA accessibility support. The 3D chart’s UI includes high-contrast visual elements that help visually impaired people to have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers. ### Right to left (RTL) Right-to-left rendering allows displaying the text and layout of 3D charts from right to left. This improves the user experience and accessibility for RTL languages. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Timeline Component | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-timeline # Angular Timeline Component - A visual representation of chronological information such as events, user activities, and more. - Features like orientation, item alignment, reverse timeline, and more. - Customize the default appearance, including styling the dot item, templated content, and more. - Responsive and adaptable to any screen size. ## Overview The Angular Timeline is a tool to display a series of data in chronological order, providing a visually compelling and user-friendly experience. This showcases user activities, tracking progress, narrating historical timelines, and more. It includes several built-in features, such as orientation, opposite content, item alignment, reverse timeline, and template customization. - [Angular Timeline demo](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/timeline/default) ## Orientations The Angular Timeline component has two orientation modes: - Horizontal: Displays items side-by-side. - Vertical: Default orientation that displays items one below the other. ## Opposite content Positioned opposite to the item content, the opposite content provides additional information to each Timeline item. ## Items alignment The Angular Timeline component supports aligning the items’ content and opposite content as follows: - Before: Align the item content to the left (or top for horizontal orientation) and the opposite content to the right (or bottom). - After: The default alignment aligns the item content to the right (or bottom for horizontal orientation) and the opposite content to the left (or top). - Alternate: Align the content of the first item to the right and the opposite content to the left, and vice versa for subsequent items. - AlternateReverse: Align the content of the first item to the left and the opposite content to the right, and vice versa for subsequent items. ## Dot item Allows you to set icons, background colors, or images to personalize the appearance of dots associated with each timeline item. ## Reverse timeline Display timeline items in reverse order, considering the alignment of items, offering flexibility, and enhancing the user experience. ## Templates The Angular Timeline component supports templates to customize the default appearance, including styling the dot items, templated content, and more. ## Customization Customize timeline items’ dot sizing, dot outer spacing, connector styling, and more, enabling it to fit the application’s needs. ### Dot sizing Customizing the size of the dot items enhances the Timeline component’s appearance. ### Dot outer spacing Adjust the space between dot items and connectors in the Timeline component. ### Connector styling Customize the size, color, and dashed styling of the connector for each item. ### Dot styling Customizing the shape, outline color, and spacing of the dot items enhances their appearance and makes them stand out. ## Built-in themes The Angular Timeline supports these built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize one of these built-in themes or create new themes to achieve their desired look and feel by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility practices to work with screen readers and assistive devices. - Based on [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, UI visual elements such as foreground color, background color, line spacing, text, and images are designed. - Supports right-to-left (RTL) text direction for users working with RTL languages like Hebrew, Arabic, or Persian. ## Developer-friendly APIs The Angular Timeline component offers APIs for customizing its appearance and behavior, as well as templates for personalizing the look and feel. With these APIs, developers can create a unique and highly personalized Timeline that fits seamlessly into their applications. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular TextArea | MemoEdit Component | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-textarea # Angular TextArea - Multiline MemoEdit Component - Use this extended version of the HTML text area element and apply Syncfusion UI theme styling. - Create a TextArea effortlessly, complete with resize handles, clear icons, and validation messages. - Add a modern look to entered text and display a floating label. ## Overview The Angular TextArea component is a fundamental input element in web development that allows users to input multiple lines of text within a designated area, such as comments, messages, or other lengthy content. This component is an extended version of the HTML text area element, featuring clear icons, a floating label, various sizing options, validation states, and more. - [Angular TextArea component example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/textarea/default) ## Floating label Improve the user experience with our floating label feature. The label transitions elegantly above the text area when users start typing. - [Angular TextArea component floating label example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/textarea/floating-label) ## Resizing Resize the text area dynamically with the help of resizing handles. Users can effortlessly adjust the height and width of the text area, enhancing comfort and usability. - [Angular TextArea component resizing example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/textarea/resize) ## Form support Seamlessly integrate our TextArea component into both template-driven and Reactive forms. Allow user input within forms and access native form validation mechanisms for enhanced data integrity and user feedback. ## Adornments The TextArea control supports custom adornments using the prependTemplate and appendTemplate properties. which allow users to render custom elements like icons, buttons, or dropdowns to enhance user interaction with prefix and suffix elements. Also, users can control the layout orientation dynamically with the adornmentFlow and adornmentOrientation properties to switch between horizontal and vertical arrangements. - [Adornments example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/textarea/adornments) - [Adornments documentation](https://ej2.syncfusion.com/angular/documentation/textarea/adornments) ## Right-to-left (RTL) rendering The Angular TextArea component supports right-to-left (RTL) rendering. Users can change the text direction and layout to render from right to left. This improvement enhances the user experience and accessibility for users of RTL languages. ## Maximum length Enforce input restrictions using the maximum length feature. By setting a character limit, you can prevent users from entering excessive text, ensuring data integrity and optimizing database storage. - [Angular TextArea component maximum length](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/textarea/api) ## Number of rows and columns Easily customize the dimensions of your text area by specifying the desired number of rows and columns so that it fits into any application layout. - [Angular TextArea component rows and columns example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/textarea/api) ## Built-in themes The Angular TextArea component has several built-in themes: Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and high contrast. Users can customize any of these built-in themes or create new themes by overriding Sass variables or using our Theme Studio application. - [Theme Studio application](https://ej2.syncfusion.com/documentation/appearance/theme-studio) ## Developer-friendly APIs Developers can control the appearance and behaviors of the TextArea in Angular, including its floating label, using a rich set of APIs. - [Angular TextArea API reference](https://ej2.syncfusion.com/angular/documentation/api/textarea/) ## Other supported frameworks The TextArea component is also available for the React, JavaScript, and Vue frameworks. Check out its platform-specific options through the following links: - [React TextArea](https://www.syncfusion.com/react-components/react-textarea) - [JavaScript TextArea](https://www.syncfusion.com/javascript-ui-controls/js-textarea) - [Vue TextArea](https://www.syncfusion.com/vue-components/vue-textarea) ## Angular TextArea code example Easily get started with the Angular TextArea using a few simple lines of HTML and TS code, as demonstrated in the following. Also explore the [Angular TextArea example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/textarea/default), which shows how to render and configure the TextArea in Angular. - html - ts "Enter your comments" > // specifies the template string for the TextArea component. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular 3D Circular Charts | Live Tracking | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-3d-circular-chart # Angular 3D Circular Charts - Beautiful and Interactive Component - Visualize and analyze data with pie and donut charts. - Interact and explore 3D Circular Charts with features such as tooltips, selection, highlights, etc. - Experience seamless rotation and tilt in 3D Circular Charts. ## Overview The Angular 3D Circular Charts provide a graphical representation of data in three dimensions, with each slice’s size indicating its proportion relative to the entire dataset. Unlike traditional 2D charts, 3D charts add depth to the visualization, allowing a better understanding of data patterns. ### Interactive 3D Circular Charts The tooltip cursor allows users to interact with the chart and obtain detailed information about data points. ### Admirable feature set The 3D Circular Charts support legends, data labels, rotation, tilt, selection, and highlights. ### Adapts to any resolution The 3D Circular Charts have a highly responsive layout and an optimized design for desktops, touchscreens, and phones. It works well on all mobile phones that use iOS, Android, or Windows OS. ### Attractive, customizable themes Cutting-edge design with several built-in themes, such as Material 3, Fluent, Tailwind CSS, Bootstrap, Material, and Fabric. ### Globalization and localization Users from different locales can use the component to format dates, currency, and numbering to suit their preferences. ### Elegant animation The 3D Circular Charts for Angular provide fluid animation to present data with smooth transitions. ## Angular 3D Circular Charts Code Example Easily get started with the Angular 3D Circular Charts using a few simple lines of HTML and TS code as demonstrated below. Also, explore our [Angular 3D Circular Charts example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/three-dimension-circular-chart/pie) that shows you how to render and configure 3D Circular Charts in Angular. - html - ts ViewEncapsulation CircularChart3DAllModule @syncfusion/ej2-charts @syncfusion/ej2-base ## Series types The 3D Circular Charts can plot other chart types, including pie and donut charts. ## Legend The 3D Circular Charts support legends to provide additional information about data points with customization options. ## Tooltip The 3D Circular Charts provide options to display tooltips with details about pointer values on mouse hover. ## Selection and highlight Select or highlight data points in a series for easy understanding of the selected data. Adding patterns and colors to the selected data makes charts more interactive. ## Print and export Export 3D Circular Charts to PDF documents or image formats such as PNG and JPEG on the client side. Print the rendered 3D Circular Charts directly from the browser. ## Data labels The 3D Circular Charts support data labels to annotate points to improve the readability of data. ## Customization Customize the color of data points and depth of the 3D Circular Charts using built-in APIs. ## Interactive chart The end-user experience is greatly enhanced by including a set of interactive features such as rotation, tilt, selection, and highlight. ### Keyboard navigation Every element in the 3D Circular Charts is keyboard accessible. Major features like tooltips, legends, selection, and highlights can be used with keyboard commands alone. No mouse interaction is required. This helps in creating highly accessible applications. ### Screen reader The 3D Circular Charts view has complete WAI-ARIA accessibility support. The 3D Circular Chart’s UI includes high-contrast visual elements that help visually impaired people to have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers. ### Right to left (RTL) Right-to-left rendering allows displaying the text and layout of 3D Circular Charts from right to left. This improves the user experience and accessibility for RTL languages. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular OTP Input Component | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-otp-input # Angular OTP Input Component - Offers a rich set of features and a user-friendly experience for one-time password entry. - Fully customizable appearance, including input types, styles, separators, and more to meet specific application needs. - Responsive design adapts seamlessly to any device. ## Overview The Angular OTP Input is a versatile form component designed for entering one-time passwords (OTP) during multi-factor authentication. It accepts a single character per input field, ensuring a focused and straightforward user experience. It offers extensive customization options with several built-in features, including input types, input lengths, styling modes, placeholders, separators, and more. - [Angular OTP Input demo](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/multicolumn-combobox/default) ## Angular OTP Input Code Example Easily get started with the Angular OTP Input using a few simple lines of C# code example as demonstrated below. Also explore our [Angular OTP Input Example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/otp-input/default) that shows you how to render and configure the OTP Input in Angular. - razor ## Input types The Angular OTP Input component has three input types: - Number: The default input type, allowing digit entries only. - Text: Allows alphanumeric and special character entries for complex OTP inputs. - Password: Similar to the text type, but masks input characters for privacy. - [Input types documentation](https://ej2.syncfusion.com/angular/documentation/otp-input/getting-started) ## Styling modes The built-in styling modes are as follows: - Outlined: The default styling mode, displaying a border around the input fields. - Filled: Fills the input fields with a background color and includes an underline. - Underlined: Highlights each input field with an underline for a sleek look. - [Styling modes documentation](https://ej2.syncfusion.com/angular/documentation/otp-input/styling-modes) ## Placeholders Display a hint character in each input field to indicate the expected value. If defined as a single character, it will be shown in all fields; otherwise, each field will display a part of the string based on its length. - [Placeholders documentation](https://ej2.syncfusion.com/angular/documentation/otp-input/placeholder) ## Separators Specify a character to be placed between input fields, customized to enhance the visual separation of OTP inputs. - [Separators documentation](https://ej2.syncfusion.com/angular/documentation/otp-input/separator) ## Validation state The Angular OTP Input component allows you to set the validation state, displaying success, warning, or error states based on the input validation. ## Customization Customize the length of the OTP Input, styling for each field, the focusing state, and more. ### Input length Adjust the length of the input fields, with a default display of four input fields. - [Input length documentation](https://ej2.syncfusion.com/angular/documentation/otp-input/appearance#setting-input-length) ### Rounded fields Customize the appearance of the OTP Input with rounded fields, enhancing its visual appeal. ### Field styling Customize the color, background color, and focus color of the input fields to enhance their appearance and make them stand out. ## Built-in themes The Angular OTP Input supports these built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize one of these built-in themes or create new themes to achieve their desired look and feel by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Accessibility - Full support for [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility practices to work with screen readers and assistive devices. - UI visual elements such as foreground color, background color, line spacing, text, and images are designed based on [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards. - Right-to-left (RTL) text direction can be set for users working with RTL languages like Hebrew, Arabic, or Persian. - [Accessibility documentation](https://ej2.syncfusion.com/angular/documentation/otp-input/accessibility) ## Developer-friendly APIs The Angular OTP Input component offers APIs for customizing its appearance and behavior, as well as templates for changing its look and feel. With these APIs, developers can create a unique and highly customized OTP Input that fits seamlessly into their applications. ## Other supported frameworks The OTP Input is available for the Blazor, React, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links: - [Blazor OTP Input](https://www.syncfusion.com/blazor-components/blazor-otp-input) - [React OTP Input](https://www.syncfusion.com/react-components/react-otp-input) - [JavaScript OTP Input](https://www.syncfusion.com/javascript-ui-controls/js-otp-input) - [Vue OTP Input](https://www.syncfusion.com/vue-components/vue-otp-input) ## Supported browsers The Angular OTP Input works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/otp-input/getting-started) ##### Angular MultiColumn ComboBox Component | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-multicolumn-combobox # Angular MultiColumn ComboBox Component - A table-structured dropdown list offering a comprehensive view with detailed information across multiple columns. - Built-in features like grouping, sorting, filtering, virtualization, and more. - Fully customizable pop-up list (using templates) and UI. ## Overview The Angular MultiColumn ComboBox is a dropdown component that displays items in a detailed, table-like format with multiple columns, offering more information than standard dropdown lists. It enhances user interaction with features such as data binding from various sources, item grouping, and advanced filtering for quick searches. Additionally, it supports sorting, virtualization for large datasets, and customizable templates for headers, footers, and list items. - [Angular MultiColumn ComboBox demo](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/otp-input/default) ## Data binding Bind data from various sources, including JavaScript object arrays and remote data sources, using adapters such as OData, OData V4, URL, JSON, and Web APIs. Efficiently manage data and customize data requests, and process with the help of the data manager. ## Grouping Organize items into categories within the MultiColumn ComboBox to enhance data visualization and improve the user experience. Grouping related items together allows users to filter and select items more efficiently. ## Filtering The Angular MultiColumn ComboBox offers built-in filtering support with a comprehensive set of filtering configurations to meet various application needs. The filter search can be customized to be case-sensitive and performed with a minimum number of query string characters. ## Sorting Easily sort items in ascending or descending order. The MultiColumn ComboBox supports single-column and multi-column sorting for better data organization and user experience. ## Virtualization Enhance the performance of the MultiColumn ComboBox by displaying only the items currently in view. Virtualization enables smooth scrolling and efficient handling of large datasets, minimizing load times. ## Drop-down styles with templates Customize the appearance of the drop-down list to create a unique look by modifying the header, footer, and list items using templates. ### Header template Design custom headers for the pop-up list using header templates. ### Item template Customize the appearance of row items in the pop-up list with item templates. ### Footer template Design your own custom static footers for the pop-up list using footer templates. ## Built-in themes The Angular MultiColumn ComboBox supports these built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize these built-in themes or create new themes to achieve their desired look and feel by simply overriding SASS variables or using our Theme Studio application. - [Theme Studio application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Accessibility - Fully supports [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#combobox) accessibility guidelines to work with screen readers and assistive devices. - Follows [WAI-ARIA best practices](https://www.w3.org/WAI/ARIA/apg/#combobox) for implementing keyboard interaction. - Designs the UI visual elements, such as foreground and background color, line spacing, text, and images, based on the [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standard. - Supports right-to-left (RTL) direction for users working with RTL languages like Hebrew, Arabic, or Persian. ## Developer-friendly APIs The Angular MultiColumn ComboBox component offers APIs for customizing its appearance and behavior, as well as templates for changing its look and feel. With these APIs, developers can create a unique and highly customized OTP Input that fits seamlessly into their applications. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular AI AssistView Component | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-ai-assistview # Angular AI AssistView Component - Effortlessly integrate AI services with a user-friendly interface. - Built-in toolbars for efficient management of prompts and responses. - Fully customizable prompts, responses, custom views, and more. - Real-time streaming responses for dynamic interaction. ## Overview The Angular AI AssistView is a versatile and modern UI component that seamlessly integrates generative AI services into the web applications. It enables users to send prompts, execute commands through a feature-rich toolbar, and display AI-generated responses. - [Angular AI AssistView demo](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/ai-assistview/default) ## Built-in toolbars The AI AssistView offers predefined toolbar items, such as copy and edit for prompts and copy, like, and dislike for responses. These toolbars provide quick access to common actions, making interactions more efficient. ## Prompt suggestions The AI AssistView provides options for both initial and on-demand prompt suggestions, helping users start or refine their prompts. Additionally, custom header can be set for suggestions, further enhancing the user experience. ## Header toolbar The Header toolbar enables the addition of custom items to the header area to execute commands such as reload, user settings, and more. It also supports the customization of toolbar items, including icon with text, alignment, and other options. ## Footer toolbar The footer toolbar lets you customize built-in action icons like send, attach, and clear with your own actions to choose between inline or bottom placement for a seamless fit in the layout. ## Custom views Users can create custom views with or without the default assist view. This flexibility enables users to design personalized layouts with templated content to suit specific requirements. ## File attachments Users can now attach files with file upload directly, along with the prompts, making interactions more informative and context-rich. Whether it’s documents, PDFs, or images, these attachments help provide additional background or reference material, enabling more accurate and relevant AI responses. ## Templates Supports templates for customizing the appearance of the banner content, prompts, responses, and more. These templates allows users to create a unique and highly personalized AI AssistView that integrates effortlessly into the applications. ### Banner template Customize the banner content using a banner template to display additional information, such as a welcome note, an introduction to integrated AI services, and more. This banner is positioned at the top of the prompt and response conversation area within the AI AssistView. ### Prompt response item template Using templates for prompt and response items allows you to customize content, such as displaying the date and time of each entry, and adjusting avatar styling, and more. These templates provide more context for each prompt and response. ### Footer template Use the footer template to customize the default footer area and manage prompt request actions with a personalized design. This flexibility allows users to create unique footers that meet their specific needs and enhances the overall experience. ## Built-in themes The Angular AI AssistView supports these built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize these built-in themes or create new themes to achieve their desired look and feel by overriding SASS variables or using our Theme Studio application. - [Theme Studio application](https://ej2.syncfusion.com/themestudio/?theme=material) ## Accessibility - Full support for [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility practices for screen readers and assistive devices. - UI visual elements such as foreground color, background color, line spacing, text, and images are designed based on [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards. - Right-to-left (RTL) text direction can be set for users of RTL languages like Hebrew, Arabic, or Persian. ## Developer-friendly APIs The Angular AI AssistView component offers APIs and templates for customizing its appearance and behavior. With these APIs, developers can create a unique and highly customized AI AssistView that fits seamlessly into their applications. ## Build Document Workflows in Angular Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your Angular app to streamline document workflows and help teams collaborate on files without context switching or external dependencies. [PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) [DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) [Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) [Documentation](https://ej2.syncfusion.com/angular/documentation/) ##### Angular Smart Paste Button Component | Smart Paste | Syncfusion URL: https://www.syncfusion.com/angular-components/angular-smart-paste-button # Angular Smart Paste Button - Pastes clipboard data to reduce manual input. - Populates multiple form fields with one click, speeding up data entry. - AI ensures accurate formatting to match form fields. ## Overview The Angular Smart Paste Button is an AI-powered enhancement of Syncfusion’s Button component, enabling intelligent clipboard pasting with contextual accuracy and proper formatting to boost productivity. ## AI-enhanced clipboard The Smart Paste Button scans clipboard content before pasting to ensure relevance to the current context, eliminating manual formatting. It automatically detects form fields (,