#I396062, #F166897, #I412247 - Provided the provide/inject support for Vue template components.
#FB38812 - Provided the Nuxt 3 framework compatible support for the Vue components.
#F178140 - Provided the pnpm framework compatible support for the Vue components.
#F176652 - Provided the Vitest testing framework compatible support for the Vue components.
#FB38517 - Provided the support to use the Vue components in Vue applications without requiring the vue-class-component package.

Breadcrumb

Bug Fixes

#I437629 - Issue with "Breadcrumb overflow mode menu creates a dark point for multiple click " has been resolved.

Chart

Bug Fixes

#I444557 - Resolved the issue where the legend and the chart were overlapping.
#I431278 - Resolved issue with overlapping chart and data label when rotation is enabled.

New Features

#I320485 - Provided support to place a label at the center of the pie and donut charts.
#I416444 - Provided support for a new chart type called range step area which is used to display the difference between minimum and maximum values over a certain time period.
#I396453, #I314160 - Provided support to customize the height and color of the error bar of each data point.

Checkbox

Bug Fixes

#I427235 - The issue cssClass property not updated properly while string with a white space in the end of the property in checkbox has been fixed.

Chip

New Features

#I422263 - The Chip component now supports htmlAttributes, which enables users to add required attributes such as 'aria-label', 'title', 'class', and more to the Chip item.

Circular Gauge

New Features

#I416334 - The entire circular gauge, including the tooltip and legend, can now be rendered in the right-to-left (RTL) direction, which may be useful in some cultures.

ContextMenu

Bug Fixes

#I425173 - The issue with "Context menu Submenus not opening properly with multiple levels " has been resolved.
#I424794 - The issue with "Script error thrown in context menu when navigate using the keyboard" has been resolved.
#I425402 - Accessibility issue in context menu has been fixed.

DataManager

New Features

#I304073, #I301329, #I441756 - Now, the filtering functionality has been enhanced to include additional filter operators such as notcontains, notstartwith, notendwith, null, notnull, isempty, and isnotempty. Additionally, like and wildcard support have been added.

DateRangePicker

Bug Fixes

#F171486 - Issue with "performance delay in the popup open while entering invalid start or end date value" has been resolved.

Diagram

Bug Fixes

#F180478 - Now, the performance of diagram while enabling virtualization is improved.
#F180478 - Now, Overview is updated properly while enabling virtualization.
#I422299 - Now, swimlane child nodes is selectable after save and load.
#I436649 - Now, connector segment does not get split into multiple segment for top to bottom approach.
#I440967 - Now, Free hand connector segment collection restored after save and load the diagram.
#I441075 - Now, position change event does not get triggered while click on the swimlane header.

New Features

#I412159 - Provided support to trigger event when connector segment is dragged.

Dialog

New Features

State persistence: Provide support to preserve the updated values of the dialog width and height when performing a page reload.

Document Editor

Bug Fixes

#425697 - Resolved the positioning and line spacing issue in shape document

New Features

#I249004, #I250933, #I256703, #I286287, #I290760, #I301513, #I313194, #I314827, #I316496, #I317964, #I320201, #I320872, #I327636, #I331310, #I333899, #I334058, #I334929, #I337202, #I341931, #I341953, #I345929, #I348344, #I349206, #I349683, #I349895, #I354081, #I356432 - Added support for continuous section break in DocumentEditor.
#I422408, #I435125 - Optimized SFDT file to reduce the file size relative to a Docx file.
#I330729, #I256794 - Added support to display bookmark start and end in DocumentEditor.
#I333042, #I349829 - Added support disable the auto focus to DocumentEditor.
#I175038 - Added API to modify the predefine styles in DocumentEditor.

Breaking Changes

Starting from version v21.1.x, the SFDT file generated in Word Processor component is optimized by default to reduce the file size. Hence, the optimized SFDT files can't be directly manipulated as JSON string. Please refer the documentation.
Starting from version v21.1.x, the SFDT file generated in Word Processor component is optimized by default to reduce the file size. Hence, the optimized SFDT files can't be directly manipulated as JSON string. Please refer the documentation.

DropDownList

Bug Fixes

#I397894 - The issue "aria-label added on input element instead of wrapper element while adding the aria-label by using Html Attribute property" has been resolved.

Excel Export

Bug Fixes

Modified the "\n" character at end of row as "\r\n" in Grid to CSV export.

File Manager

New Features

Provided the folder (directory) upload support for Physical File Provider.
Provided the folder (directory) upload support for Azure File Provider.
Provided the folder (directory) upload support for NodeJS File System Provider.
Provided the folder (directory) upload support for Amazon S3 File Provider.

Floating Action Button `Preview`

The Floating Action Button (FAB) component performs the primary action that appears in front of all screen contents. It can be positioned in relation to a page or a target container.

Rendering - The FAB component can be rendered as Icon only, Icon with Label, Label only, or in a disabled state.
Positioning - Supports to place various built-in positions on the target element.
Styles - The appearance of the FAB can be customized using predefined styles.
Accessibility - The FAB provides built-in compliance with the WAI-ARIA specifications and it is achieved through attributes.

Gantt Chart

Features

#I419169 - Provided Taskbar drag and drop support and preventing taskbar overlap support by rendering in multiples lines for resource view in Gantt Chart. Please find the demo link here.
#I417330 - Provided support to disable parent predecessor by using allowParentDependency property. Please find the allowParentDependency link here.
#I413261 - Restricted offset value update based on enabling or disabling the UpdateOffsetOnTaskbarEdit. Please find the UpdateOffsetOnTaskbarEdit link here.
#I420482 - Provided option to disable date validation at initial load based on enabling or disabling the autoCalculateDateScheduling By disabling this autoCalculateDateScheduling we can improve load time performance by two time. Please find the autoCalculateDateScheduling link here.
Provided support for store pdf documentation in object as blob data.

Grid

Bug Fixes

#I439725 - The issue where an exception was thrown when attempting to filter 'Blanks' value using URL Adaptor in Excel filter has been resolved.
#F41177 - Resolved the issue exporting the hierarchy grid with different mode.
#I342921, #I407440 - The issue related to Content Security Policy violation that occurred while using grid paging and grouping has been resolved.
#I446747 - Script error occurred on foreignkey sample while trying to auto complete in filter menu issue has been fixed.
#I428772 - Fixed alignment issue with Dialog component header content and close icon on fluent theme. More Information.
#I428772 - Fixed alignment issue with Dialog component header content and close icon on fluent theme. More Information.

New Features

Implemented a feature to limit column expansion over their specified width, preventing them from using more space.
#I225917, #F146138, #F150441 - Provided support to dynamically change both new columns and datasource simultaneously by using inbuilt changeDataSource method of Grid.
#I304073, #I301329, #I441756 - Now, the filtering functionality has been enhanced to include additional filter operators such as notcontains, notstartwith, notendwith, null, notnull, isempty, and isnotempty. Additionally, like and wildcard support have been added.
#I432547 - The security of the Grid component has been improved by the use of sanitization to remove any potentially untrusted strings and scripts. This feature can be enabled by setting the property enableHtmlSanitizer as true.

Breaking Changes

Unnecessary role attributes for Grid row cell and header elements have been removed to enhance accessibility standards.
The td element for e-detailcell in detail element has been only changed from a td element to the th element to enhance accessibility standards.
The td element for e-detailcell in detail element has been only changed from a td element to the th element to enhance accessibility standards.

Heatmap

New Features

#F177543 - enableMultiSelect property is exposed to enable or disable multiple selection of the HeatMap cells.

Image Editor

Bug Fixes

Issue with "Script error thrown while resizing control without toolbar" has been resolved.

Features

Provided the undo/redo support, that records all the actions so that it can be reverted later if necessary.
Provided pinch zoom support to zoom in or out the image while performing pinch on touch enabled devices.
Provided mouse wheel zoom support to zoom in/out the image while scrolling mouse wheel with ctrl key press.
Provided public method 'getImageDimension' to get the current image size with its coordinates.
Provided click event to get the current cursor position on the image.

Breaking Changes

| Previous Enum Name | Modified Enum Name | |---|---| | ImageFinetuneOptions | ImageFinetuneOption | | ImageFilterOptions | ImageFilterOption | | ImageEditorCommands | ImageEditorCommand |

In-place Editor

Bug Fixes

#I440965 - Now, the validation works properly when using two way binding for the value property.
#I443357 - Now, when you click the cancel button in the In-place Editor, the Rich Text Editor will no longer be focused.

Kanban

Bug Fixes

#I432638 - Now, when using the kanban sortSettings the cards are dropped and sorted properly.

ListBox

Bug Fixes

#I409839 - Issue with "Script error thrown while drag and drop after removed the item from listbox using removeItem method" has been resolved.

ListView

Bug Fixes

#F168185 - The issue with "Sorting is not applied properly when entering different values in the text field of the ListView component" has been resolved.

Maps

New Features

#I275734, #I293775 - The appearance of the buttons and tooltips in the zoom toolbar can now be customized using properties in the buttonSettings and tooltipSettings in the toolbarSettings property of zoomSettings.
#I425592 - The marker rendered in the Maps can now be dragged and dropped in the desired location based on the requirement. Events are also supported to notify the drag start and end.

Mention

Bug Fixes

#I440814 - The issue "Script error is thrown when we dynamically call the showPopup method and select the value" has been resolved.

Message

Bug Fixes

The issue with the "React state change value is now reflected in the React Message component content template" has been resolved.

Office Chart

Bug Fixes

#I399919 - Resolved the bar chart rendering issue.

PDF Viewer

Bug Fixes

#I437765 - Now, the script error does not occur when the update form field value API is used when a signature already has signature content.
#F180666 - Now, the exception does not occur while downloading the document after adding the type and uploading the handwritten signature and initial annotation.
#I428493 - Now, the signature image in the signature field is visible while printing in the other viewers changes made on the server side.
#I441773 - Now, the annotation positions are moving properly.
Now, the PDFium package has been updated.
#I438960 - Now, the different culture date time is working properly while exporting annotations.
#I444307 - Now, the check box is not added to the left-most corner of the page.
#I444707 - Now, the signature dialog box footer button alignment is proper in the fluent theme.
#I440251 - Now, the typed handwritten signature is not broken into a new line after downloading and viewing in other viewers.
#I429508 - Now, the form fields appear properly in mobile mode.
#I433831 - The A4 document size is now properly set during printing.
#F180764 - Now, if you move the arrow or line annotations programmatically, their position won't be changed during export.
#I429549 - Now, the checkbox displays properly during the print preview.
#I436286 - Now that the enable shape annotation is false, the script error no longer occurs.
#I429775 - Now, the problem with some specific document's slow rendering has been resolved.
#I437396 - Now, when the page's zoom level is higher, the resizer will not enable inside the annotation.
#I435370 - Now, the border color is preserved properly for the transparent textbox field.
#I438421 - Now, the script error does not occur while loading an annotation restricted document when the enableAnnotation API is set to false.
#F180082 - Now, while adding the text markup annotation programmatically, the text markup content is added properly.
#I434198 - Now, the custom stamp is added properly on the form fields.
#I180081 - Now, when attempting to delete a post in the comment panel, the annotations are not deleted from the comment panel.
#I431466 - Now, the toolbar behavior is stable in mobile mode.
#I432820, #I432145, #F179720 - Now, the formFields with the same name in non-rendered pages are downloaded successfully.
#I429549 - Now, the checkboxes are no longer offset to the right in the print preview.
#I429288 - Now, the delete option for a draw signature type will be visible in the context menu.
#I431758 - Now, the checkboxes with the same name are correctly selected.
#I429416 - The checkbox layer is now rendered properly when loading the provided PDF document.
#I431679 - Now, the handwritten signature does not become empty when a random signature is added.
#I431466 - Now, the toolbar icon is properly visible in mobile mode.
#I431286 - Now, the radio button selector size is proper in the given document.
#I408530, #I428623 - Now, the free text annotations do not shift towards the left side in edit mode.

New Features

#I344527 - Now, the support provided is navigated to the next and previous signature field in the form designer.
#I443775 - Now, support is provided for the saving type and image signatures in the form fields.
Now, the JSON structure has been modified based on the PDF library.
#I411856 - Now, support is provided to render the accessibility tags in the PDF Viewer.
#I426307 - Improvements to page rendering for zoom levels under 25% by using thumbnail images.
Now, support is provided for the tab navigation in the form fields and form designer.

Pivot Table

Bug Fixes

#I437267 - During initial rendering, the spinner will now be properly displayed in the pivot table.

New Features

#F165214 - Provided paging support in server side engine that allows to break and display large amounts of data page by page.
Provided the role option that allows access to restricted cube information such as measures, dimensions, hierarchy, and more when a SSAS OLAP cube is bound to the pivot table.

Breaking Changes

The property type of pivotValues has been changed from IPivotValues to IAxisSet[][].
The property type of toolbar has been changed from (ToolbarItems | ItemModel)[] to ToolbarItems[] | ItemModel[].
In the server side controller, the imported namespace name has been changed from Syncfusion.Blazor.PivotView to Syncfusion.EJ2.Pivot.

ProgressBar

New Features

#I386691 - Provided support to display tooltips during initial load of progress bars and mouse hover with numeric or text values of the progress.
Provided support to customize the width and color of the secondary progress bar.

QueryBuilder

Bug Fixes

#I375472 Issue with Rule template default rendered while add condition/group in query builder, if first column as rule template has been fixed.
#I388333 Issue with Value template not destroy properly when we use complex data source in query builder has been fixed.

RadioButton

Bug Fixes

#F40707 - Value change event triggered twice in Radio Button component has been fixed.

Ribbon

Key features

Built-in items - Several built-in support items, such as buttons, checkboxes, drop-down buttons, split buttons, combo boxes, and color pickers that can be customized and used to execute specific actions.
Modes - Offers the classic mode that organizes items and groups in a traditional form, and simplified mode that organizes items and groups into a single row for improved usability and reduced clutter.
Tooltip - Provide additional information when a user hovers over a ribbon item, improving user experience and increasing the usability of the application.
File menu - A built-in menu that to add file related actions easily.
Templates - Customize ribbon items and the help pane content using templates.

The Ribbon provides a structured and easy-to-use user interface for users to access different features and functions through series of tabs, improving user experience and efficiency.

The Ribbon is a structured layout to manage tools with tabs and groups. The Ribbon control supports buttons, split buttons, toggle buttons, file menu and multiple layouts.

RichTextEditor

Bug Fixes

#I442919 - Now, when focusing out of the Rich Text Editor, the embed YouTube video will not be removed.

New Features

Tooltip Integration: The Rich Text Editor tooltip has been redesigned to more clearly display the keyboard shortcut information, making it easier for users to understand the functions of each toolbar item.

Schedule

Bug fixes

#I442920 - An issue with appointments misaligned in timeline year view with ignoreWhiteSpace property has been fixed.

New Features

#I324269, #I347160 - Provided support to display multi month event as single event in vertical orientation of timeline year view.
#I419677 - Provided the support to sanitize the appointment inputs, improving the security of the Scheduler component.
#I425713 - Provided in-built filter support to the Scheduler component, allowing users to easily filter events when requesting data from the server.
#FB40709 - Provided generateEventOccurrences public method to retrieve all the occurrences from the series.

Signature

Bug Fixes

#I433821 - Correcting the signature scaling issue while resizing the web browser has been resolved.

Speed Dial `Preview`

The Speed Dial component is an extension of the floating action button that displays a list of action buttons when clicked. It is useful when there is more than one primary action for the page.

Rendering - The Speed Dial component can be rendered in two display modes: Linear and Radial.
Positioning - Supports to place various built-in positions on the target element.
Styles - The appearance of the Speed Dial can be customized using predefined styles.
Template Support - The Speed Dial component action items and popup container can also be rendered with custom templates.
Modal Support - Supports showing a modal overlay behind the Speed Dial.
Accessibility - The Speed Dial provides built-in compliance with the WAI-ARIA specifications and it is achieved through attributes.

Spreadsheet

Bug Fixes

#I442925 - Issue with "spreadsheet hangs while navigating the cells in the protected sheet with the arrow keys" has been resolved.

Svg Base

Bug Fixes

#I439673 - Resolved an issue where tooltip text was getting cut off when the text was longer.
#I440991 - Fixed an issue where the Donut chart tooltip was being cropped when displayed outside of the area bounds.

Switch

Bug Fixes

#I427994 - Provided the htmlAttributes support to the switch component.

Tab

Bug Fixes

#I441253 - An issue with the aria-disabled role accessibility has been fixed.

Toolbar

Breaking Changes

We improved the Toolbar alignments with a flex design, which may cause slight changes to the alignment of Toolbar items.

Tooltip

New Features

#I434633 - Provided the htmlAttributes support for the Tooltip component which allows to add attributes for the root element of Tooltip popup.

Breaking Changes

The tooltip target's tabindex and aria-describedby attributes, which were handled by the built-in source, were removed. Now, you can add these attributes directly to a target element.

Tree Grid

Breaking Changes

Unnecessary role attributes for Tree Grid row cell and header elements have been removed to enhance accessibility standards.
The td element for e-detailcell in detail element has been only changed from a td element to the th element to enhance accessibility standards.

TreeView

Bug Fixes

#I415237 - The TreeView performance issue in Vue3 framework has been resolved.

Uploader

Bug Fixes

#F178267 - Fixed issue unable to upload the same file again after using the remove method.

Readme

Source

Vue TreeMap Component

The Vue TreeMap component provides a simple and effective way to visualize flat or hierarchical data as clustered rectangles with a specific, weighted attribute determining the size of each rectangle.

Getting started . Online demos . Learn more

Vue TreeMap Component

Trusted by the world's leading companies

Setup

Create a Vue Application

You can use Vue CLI to setup your Vue 2 applications. To install Vue CLI, use the following commands.

npm install -g @vue/cli
vue create quickstart
cd quickstart
npm run serve

Initiating a new project prompts us to choose the type of project to be used for the current application. Select the option Default ([Vue 2] babel, eslint) from the menu.

Add Syncfusion TreeMap package

All Syncfusion Vue packages are published in npmjs.com registry. To install Vue TreeMap package, use the following command.

npm install @syncfusion/ej2-vue-treemap --save

Register TreeMap Component

You can register the TreeMap component in your application by using the Vue.use(). Refer to the code example given below.

import { TreeMapPlugin } from '@syncfusion/ej2-vue-treemap';

Vue.use(TreeMapPlugin);

Registering TreeMapPlugin in Vue, will register the TreeMap component along with its required child directives globally.

Add TreeMap Component

Add the Vue TreeMap by using ejs-treemap selector in template section of the App.vue file.

<template>
    <div id="app">
        <ejs-treemap :dataSource='data' weightValuePath='Count'
     :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { TreeMapPlugin } from '@syncfusion/ej2-vue-treemap';

    Vue.use(TreeMapPlugin);
    export default Vue.extend ({
	    data: function() {
		    return {
			    dataSource: [
					{ State: 'Brazil', Count: 25 },
					{ State: 'Colombia', Count: 12 },
					{ State: 'Argentina', Count: 9 },
					{ State: 'Ecuador', Count: 7 },
					{ State: 'Chile', Count: 6 },
					{ State: 'Peru', Count: 3 },
					{ State: 'Venezuela', Count: 3 },
					{ State: 'Bolivia', Count: 2 },
					{ State: 'Paraguay', Count: 2 },
					{ State: 'Uruguay', Count: 2 },
					{ State: 'Falkland Islands',Count: 1 },
					{ State: 'French Guiana', Count:1 },
					{ State: 'Guyana', Count: 1 },
					{ State: 'Suriname', Count: 1 },
				],
				leafItemSettings: { labelPath: 'State' }
			}
		}
	});
</script>

Refer the Getting Started with Vue3 topic for using Syncfusion Vue components in Vue 3 applications.

Supported frameworks

TreeMap component is also offered in the following list of frameworks.

JavaScript	Angular	React	ASP.NET Core	ASP.NET MVC

Showcase samples

Olympic medal categories - Live Demo
Countries population - Live Demo

Key features

Data sources: Binds the treemap component with an array of JSON objects or DataManager. Both hierarchical and flat collection data sources are supported.
Levels: Renders with any number of levels and items.
Layout: Supports four types of layouts: square, horizontal, vertical, and auto.
Drill-down: Provides drill-down option to have a closer look at the lower level of a hierarchy.
Data label: Provides additional information about the nodes.
Header template: Uses any custom HTML element to customize the header of each item.
Label template: Uses any custom HTML element to customize the data label for each node.
Color mapping: Applies colors to the nodes based on various conditions. Treemap supports three types of color mapping: range, equal, and desaturation.
Legend: Provide useful information for conveying what the treemap showcases.
Selection and highlight: Support selecting or highlighting the nodes to bring center of attraction.
Tooltip: Provides additional information about the node on hover.
Print and Export: Prints or exports the rendered treemap to a desired format. Exporting supports four formats: PDF, PNG, JPEG and SVG.
Globalization: Personalize the component with different languages, as well as culture-specific number, date and time formatting.
Accessibility: Provides with built-in accessibility support which helps to access all the treemap component features through the keyboard, screen readers, or other assistive technology devices.

Support

Product support is available through the following mediums.

Support ticket - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
Community forum
GitHub issues
Request feature or report bug
Live chat

Changelog

Check the changelog here. Get minor improvements and bug fixes every week to stay up to date with frequent updates.

License and copyright

This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA. To acquire a license for 80+ Vue UI components, you can purchase or start a free 30-day trial.

A free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

See LICENSE FILE for more info.

Keywords

FAQs

What is @syncfusion/ej2-vue-treemap?

Is @syncfusion/ej2-vue-treemap popular?

Is @syncfusion/ej2-vue-treemap well maintained?

Last updated on 23 Mar 2023

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket

@syncfusion/ej2-vue-treemap

.css-1z04cui{margin-bottom:var(--chakra-space-4);font-size:var(--chakra-fontSizes-md);}v21.1.35

Common

New Features

Breadcrumb

Bug Fixes

Chart

Bug Fixes

New Features

Checkbox

Bug Fixes

Chip

New Features

Circular Gauge

New Features

ContextMenu

Bug Fixes

DataManager

New Features

DateRangePicker

Bug Fixes

Diagram

Bug Fixes

New Features

Dialog

New Features

Document Editor

Bug Fixes

New Features

Breaking Changes

DropDownList

Bug Fixes

Excel Export

Bug Fixes

File Manager

New Features

Floating Action Button Preview

Gantt Chart

Features

Grid

Bug Fixes

New Features

Breaking Changes

Heatmap

New Features

Image Editor

Bug Fixes

Features

Breaking Changes

In-place Editor

Bug Fixes

Kanban

Bug Fixes

ListBox

Bug Fixes

ListView

Bug Fixes

Maps

New Features

Mention

Bug Fixes

Message

Bug Fixes

Office Chart

Bug Fixes

PDF Viewer

Bug Fixes

New Features

Pivot Table

Bug Fixes

New Features

Breaking Changes

ProgressBar

New Features

QueryBuilder

Bug Fixes

RadioButton

Bug Fixes

Ribbon

Key features

v21.1.35

Floating Action Button `Preview`

Speed Dial `Preview`