What’s New in Essential JS 2: 2023 Volume 1
Tags: javascript, angular, react, webdev
Published: 2023-04-04 13:09:40

---
title: What’s New in Essential JS 2: 2023 Volume 1
published: true
date: 2023-04-04 12:58:13 UTC
tags: javascript, angular, react, webdev
canonical_url: https://www.syncfusion.com/blogs/post/essential-js-2-2023-volume-1.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wg12alogdxtj0b50v3zw.png
---

We at [Syncfusion](https://www.syncfusion.com/ "Syncfusion Official Site") are thrilled to share the latest updates to the [Essential JS 2](https://ej2.syncfusion.com/home/ "JavaScript UI Controls Demos") platform for the [2023 Volume 1](https://www.syncfusion.com/forums/181344/essential-studio-2023-volume-1-main-release-v21-1-35-is-available-for-download "Essential Studio 2023 Volume 1") release. Our team has worked tirelessly to bring you an even better user experience and application efficiency. With our latest release, we have introduced a plethora of new features and enhancements across various components that will blow your mind!

Let’s see what’s new!

## New Ribbon control

The new [Ribbon control](https://www.syncfusion.com/javascript-ui-controls/js-ribbon "JavaScript Ribbon Control") provides a structured and easy-to-use interface for users to access different features and functions through series of tabs. This powerful feature improves the overall user experience and efficiency.

![JavaScript Ribbon Control](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/JavaScript-Ribbon-Control.gif)
<figcaption>JavaScript Ribbon Control</figcaption>

### Key features

The key features of the new Ribbon control are as follows:

- **Built-in items** : Many built-in items, such as buttons, checkboxes, dropdown buttons, split buttons, combo boxes, and color pickers, can be customized and used to perform specific actions.
- **Modes** : The Ribbon control offers a **classic** mode to organize items and groups in a traditional form and a **simplified** mode to organize items and groups in a single row for improved usability and reduced clutter.
- **Tooltip** : You can show additional information using tooltips when a user hovers over a ribbon item. This will improve the user experience and the app’s usability.
- **File menu** : A built-in menu allows you to add file-related actions easily.
- **Templates** : Customize ribbon items and help pane content using templates.

**Note:** For more details, refer to the [JavaScript Ribbon control demos](https://ej2.syncfusion.com/demos/#/bootstrap5/ribbon/default.html "JavaScript Ribbon Control Demos") and [documentation](https://help.syncfusion.com/js/ribbon/overview "Getting Started with JavaScript (Essential JS 1)").

## Rating control is now marked as production-ready

In 2023 Volume 1, our [Rating control](https://www.syncfusion.com/javascript-ui-controls/js-rating "JavaScript Rating Component") has been updated to meet industry standards and is now marked as a production-ready control.

**Note:** For more details, refer to the [JavaScript Rating control demos](https://ej2.syncfusion.com/demos/#/bootstrap5/rating/default.html "JavaScript Rating control Demos") and [documentation.](https://ej2.syncfusion.com/documentation/rating/getting-started/ "Getting started with JavaScript Rating control")

## Syncfusion Vue components

- [Syncfusion Vue components](https://www.syncfusion.com/vue-components "Vue UI Components Library") now allow utilizing the **provide** and **inject** variables in templates.
- These components are compatible with [Nuxt 3](https://nuxt.com/ "Nuxt 3 Site"), [pnpm](https://pnpm.io/ "PNPm Site"), and the [Vitest](https://vitest.dev/ "Vitest Site") testing frameworks.
- Furthermore, the **vue-class-component** package dependency has been removed. This allows us to use Syncfusion Vue 3 components in Vue apps without the dependency package.

**Note:** For more details, refer to the [Vue component demos](https://ej2.syncfusion.com/home/vue.html#platform "Vue Component Demos").

## Charts

The new features added in the [Charts](https://www.syncfusion.com/javascript-ui-controls/js-charts "JavaScript Charts Component") component are as follows:

### Center label

It is now possible to place a label at the center of the [pie](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/pie-chart "Getting Started with JavaScript Pie Chart") and [doughnut](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/donut-chart "Getting Started with JavaScript Doughnut Chart") charts. Also, when the mouse pointer hovers over a pie slice, the relevant data will be displayed at the center of the pie chart.

![Labeling JavaScript Doughnut Chart at the Center](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Labeling-JavaScript-Doughnut-Chart-at-the-Center.png)
<figcaption>Labeling JavaScript Doughnut Chart at the Center</figcaption>

### Range step area chart (new)

A new chart type called [**range step area chart**](https://ej2.syncfusion.com/demos/#/bootstrap5/chart/range-step-area.html "Range Step Area Live Demo") has been added in the 2023 Volume 1 release. It is used to display the difference between the minimum and maximum values over a certain period.

![JavaScript Range Step Area Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/JavaScript-Range-Step-Area-Chart.png)
<figcaption>JavaScript Range Step Area Chart</figcaption>

### Customize error bars

Now, you can customize the height and color of [error bars](https://help.syncfusion.com/js/chart/chart-types#error-bar-chart "Error Bars") on each data point.

![Customizing the JavaScript Error Bar Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Customizing-the-JavaScript-Error-Bar-Chart.png)
<figcaption>Customizing the JavaScript Error Bar Chart</figcaption>

**Note:** For more details, refer to the [JavaScript Charts demos](https://ej2.syncfusion.com/demos/#/bootstrap5/chart/overview.html "JavaScript Charts Demos").

## Circular Gauge

### RTL support

The entire [Circular Gauge](https://www.syncfusion.com/javascript-ui-controls/js-circular-gauge "JavaScript Circular Gauge"), including the tooltips and legends, can now be rendered in RTL (right-to-left), which is used in some languages and cultures.

![Right-to-Left Rendering Support for JavaScript Circular Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Right-to-Left-Rendering-Support-for-JavaScript-Circular-Gauge.png)
<figcaption>Right-to-Left Rendering Support for JavaScript Circular Gauge</figcaption>

**Note:** For more details, refer to the [JavaScript Circular Gauge demos](https://ej2.syncfusion.com/demos/#/bootstrap5/circular-gauge/range.html "JavaScript Circular Gauge Demo").

## Word Processor

The JavaScript [Word Processor](https://www.syncfusion.com/javascript-ui-controls/js-word-processor "JavaScript Word Processor") has been rolled out with the following new updates:

### Continuous section break

This feature allows users to create a new section while staying on the same page in the JavaScript Word Processor. This is particularly useful when users want to adjust the number of columns for specific content without initiating a new page.

![Continuous Section Break Feature in JavaScript Word Processor](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Continuous-Section-Break-Feature-in-JavaScript-Word-Processor.png)
<figcaption>Continuous Section Break Feature in JavaScript Word Processor</figcaption>

### Show or hide bookmarks

You can show or hide the start and end of bookmarks using the Word Processor component.

![Showing Bookmarks in JavaScript Word Processor](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Showing-Bookmarks-in-JavaScript-Word-Processor.png)
<figcaption>Showing Bookmarks in JavaScript Word Processor</figcaption>

### Drag and drop selected content

Users can now drag and drop selected content within a Word document.

![Dragging and Dropping the Selected Content in the JavaScript Word Processor](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Dragging-and-Dropping-the-Selected-Content-in-the-JavaScript-Word-Processor.png)
<figcaption>Dragging and Dropping the Selected Content in the JavaScript Word Processor</figcaption>

### Optimized SFDT file size

SFDT files generated by the Word Processor are now optimized to reduce their size. All static keys are minified and the final JSON string is compressed. This helps us reduce the file size of SFDT relative to a DOCX file, providing the following benefits:

- Quick file transfer between client and server through faster internet services.
- The new optimized SFDT files require less storage space than the old SFDT files.

**Note:** For more details, refer to the [JavaScript Word Processor demos](https://ej2.syncfusion.com/demos/#/bootstrap5/document-editor/multiple-columns.html "JavaScript Word Processor Demo").

## File Manager

### Virtual scrolling

This feature provides UI virtualization support for both the detailed and large-icon views in the [JavaScript File Manager](https://www.syncfusion.com/javascript-ui-controls/js-file-manager "JavaScript File Manager") control.

![Virtual Scrolling in JavaScript File Manager](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Virtual-Scrolling-in-JavaScript-File-Manager.gif)
<figcaption>Virtual Scrolling in JavaScript File Manager</figcaption>

**Note:** For more details, refer to the [JavaScript File Manager demos](https://ej2.syncfusion.com/demos/#/bootstrap5/file-manager/virtualization.html "JavaScript File Manager Demo").

## Gantt Chart

### Drag and drop tasks between resources

The [Gantt Chart](https://www.syncfusion.com/javascript-ui-controls/js-gantt-chart "JavaScript Gantt Chart") now allows users to drag and drop tasks between different resources in the resource view.

![Dragging and Dropping Tasks between Resources in JavaScript Gantt Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Dragging-and-Dropping-Tasks-between-Resources-in-JavaScript-Gantt-Chart.gif)
<figcaption>Dragging and Dropping Tasks between Resources in JavaScript Gantt Chart</figcaption>

**Note:** For more details, refer to the [JavaScript Gantt Chart demos](https://ej2.syncfusion.com/demos/#/bootstrap5/gantt/resource-multi-taskbar.html "JavaScript Gantt Chart Demo").

## DataGrid

From the 2023 Volume 1 release onward, you can enjoy the following new updates in the [DataGrid](https://www.syncfusion.com/javascript-ui-controls/js-data-grid "JavaScript DataGrid"):

### Search and filter with new operators

The following new operators have been added to the search and filter features, providing greater flexibility and control over how users search and filter data in JavaScript DataGrid:

- **does not contain** : Search for items that do not include certain keywords or phrases.
- **is null** and **is not null** : Search for items that are null or not null.
- **is like** and **is not like** : Search for items that match or do not match a specific pattern using wildcards.
- **Does not start with** and **does not end with** : Search for items that do not begin or end with a specific string of characters.

![New Search and Filter Operators in JavaScript DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/New-Search-and-Filter-Operators-in-JavaScript-DataGrid.gif)
<figcaption>New Search and Filter Operators in JavaScript DataGrid</figcaption>

### Autofit columns with empty space

This feature renders columns in a grid based on the specified width defined in the columns declaration. It means white space will be displayed in the grid instead of columns auto adjusting to fill the entire grid width if the total columns’ width is less than the grid’s width.

![Auto Fitting Columns in DataGrid’s Empty Space](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Auto-Fitting-Columns-in-DataGrids-Empty-Space.gif)
<figcaption>Auto Fitting Columns in DataGrid’s Empty Space</figcaption>

**Note:** For more details, refer to the [JavaScript DataGrid demos](https://ej2.syncfusion.com/demos/#/bootstrap5/grid/filter.html "JavaScript DataGrid Demo").

## Image Editor

The JavaScript [Image Editor](https://www.syncfusion.com/javascript-ui-controls/js-image-editor "JavaScript Image Editor Control") control delivers the following user-friendly features:

### Undo and redo support

This feature provides undo and redo support by storing every action as an object that contains rotations, flips, annotations, and freehand drawings in an array. The undo and redo actions are performed based on that array.

### Pinch zoom

You can zoom in or out of the image on touchscreen devices, such as phones or tablets, using two fingers to pinch or expand the screen.

### Mouse wheel zoom

This feature allows zooming in or out of the image using the mouse wheel and the **Ctrl** key.

**Note:** For more details, refer to the [JavaScript Image Editor demos](https://ej2.syncfusion.com/demos/#/bootstrap5/image-editor/default.html "JavaScript Image Editor Demo").

## Maps

The new features included in JavaScript [Maps](https://www.syncfusion.com/javascript-ui-controls/js-maps-library "JavaScript Maps Library") are as follows:

### Customization of the zoom toolbar

Now you can customize the appearance of the buttons and tooltips in the zoom toolbar using built-in APIs.

![Customizing the Zoom Toolbar in JavaScript Maps](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Customizing-the-Zoom-Toolbar-in-JavaScript-Maps.png)
<figcaption>Customizing the Zoom Toolbar in JavaScript Maps</figcaption>

### Drag-and-drop support for markers

Markers inside Maps can now be dragged and dropped anywhere.

![Dragging and Dropping Markers in JavaScript Maps](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Dragging-and-Dropping-Markers-in-JavaScript-Maps.png)
<figcaption>Dragging and Dropping Markers in JavaScript Maps</figcaption>

**Note:** For more details, refer to the [JavaScript Maps demos](https://ej2.syncfusion.com/demos/#/bootstrap5/maps/default.html "JavaScript Maps Demo").

## Pivot Table

### Role option in OLAP cube

The [Pivot Table](https://www.syncfusion.com/javascript-ui-controls/js-pivot-table "JavaScript Pivot Table") can now be bound to an SSAS OLAP cube, giving end users access to restricted cube information such as measures, dimensions, hierarchy, and more based on their assigned role.

**Note:** For more details, refer to the [JavaScript Pivot Table demos](https://ej2.syncfusion.com/demos/#/bootstrap5/pivot-table/olap.html "JavaScript Pivot Table Demo").

## Progress Bar

### Secondary progress customization

Now you can easily customize the width and color of the secondary [Progress Bar](https://www.syncfusion.com/javascript-ui-controls/js-progressbar "JavaScript ProgressBar"). This added flexibility provides greater visual appeal and distinction.

![Customizing the Secondary Progress Bar](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Customizing-the-Secondary-Progress-Bar.png)
<figcaption>Customizing the Secondary Progress Bar</figcaption>

### Tooltips

It is now possible to display tooltips with numeric or text values of the progress during initial loading of the progress bars and mouse hover. This gives users more context and understanding of the current progress.

![Tooltips in JavaScript Progress Bar](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Tooltips-in-JavaScript-Progress-Bar.png)
<figcaption>Tooltips in JavaScript Progress Bar</figcaption>

**Note:** For more details, refer to the [JavaScript Progress Bar demos](https://ej2.syncfusion.com/demos/#/bootstrap5/progress-bar/tooltip.html "JavaScript Progress Bar Demo").

## Rich Text Editor

We have enhanced the appearance of the [Rich Text Editor](https://www.syncfusion.com/javascript-ui-controls/js-wysiwyg-rich-text-editor "JavaScript Rich Text Editor") toolbar’s tooltips. These tooltips are redesigned to clearly display the keyboard shortcut information, making it easier for users to understand and access the functions of each toolbar item.

![JavaScript Rich Text Editor Toolbar Tooltip Displaying Keyboard Shortcuts](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/JavaScript-Rich-Text-Editor-Toolbar-Tooltip-Displaying-Keyboard-Shortcuts.gif)
<figcaption>JavaScript Rich Text Editor Toolbar Tooltip Displaying Keyboard Shortcuts</figcaption>

**Note:** For more details, refer to the [JavaScript Rich Text Editor demos](https://ej2.syncfusion.com/demos/#/bootstrap5/rich-text-editor/tools.html "JavaScript Rich Text Editor Demo").

## Scheduler

The [Scheduler](https://www.syncfusion.com/javascript-ui-controls/js-scheduler "JavaScript Scheduler") component has also received some significant updates.

### XSS security option

With the added XSS security option, appointment inputs are now sanitized to improve the overall security of the Scheduler component.

### Filter query

The built-in filter support makes it easy to filter events when requesting data from the server.

### Timeline views without horizontal scroller

This feature allows users to see an overview of the schedule timeline without a horizontal scroller. This improves the usability and accessibility of the Scheduler component.

![Timeline View Without Horizontal Scroller in the JavaScript Scheduler](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Timeline-View-Without-Horizontal-Scroller-in-the-JavaScript-Scheduler.png)
<figcaption>Timeline View Without Horizontal Scroller in the JavaScript Scheduler</figcaption>

### Spanned events in timeline year view 

Spanned events in the timeline year view are now rendered as a single event instead of separate events, making it easier for users to understand the timeline.

![Spanned Events in JavaScript Scheduler](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Spanned-Events-in-JavaScript-Scheduler.png)
<figcaption>Spanned Events in JavaScript Scheduler</figcaption>

**Note:** For more details, refer to the [JavaScript Scheduler demos](https://ej2.syncfusion.com/demos/#/bootstrap5/schedule/overview.html "JavaScript Scheduler Demo").

## Conclusion

Thanks for reading! In this blog, we have seen the new features and components added in the [Syncfusion Essential JS 2](https://ej2.syncfusion.com/home/ "Syncfusion Essential JS 2") platform for the [2023 Volume 1](https://www.syncfusion.com/forums/181344/essential-studio-2023-volume-1-main-release-v21-1-35-is-available-for-download "Essential Studio 2023 Volume 1") release. We encourage you to test these user-friendly updates and share your feedback in the comments section below.

To explore other available features in this release, please visit our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v20.4.0.38 "Syncfusion Essential Studio Release Notes") and [What’s New pages](https://www.syncfusion.com/products/whatsnew "Syncfusion Essential Studio What’s New pages"). Existing customers can access the new version from the [License and Downloads page](https://www.syncfusion.com/account/downloads "Syncfusion Essential Studio License and Downloads page"), while non-customers can take advantage of our 30-day [free trial](https://www.syncfusion.com/downloads "Get Free Evalutaion of the Essential Studio Products") to try out the available features.

You can also contact us through our [support forum](https://www.syncfusion.com/forums/ "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Protal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Protal"). We are always happy to assist you!

## Related blogs

- [Top 8 JavaScript Notification Libraries](https://www.syncfusion.com/blogs/post/top-8-javascript-notification-libraries.aspx "Blog: Top 8 JavaScript Notification Libraries")
- [10 Tips and Tricks to Handle JavaScript Objects](https://www.syncfusion.com/blogs/post/10-tips-and-tricks-to-handle-javascript-objects.aspx "Blog: 10 Tips and Tricks to Handle JavaScript Objects")
- [5 Best Practices in Handling HTTP Errors in JavaScript](https://www.syncfusion.com/blogs/post/handling-http-errors-javascript.aspx "Blog: 5 Best Practices in Handling HTTP Errors in JavaScript")
- [Integrating JavaScript Scheduler with PHP and MySQL for Dynamic CRUD Operations](https://www.syncfusion.com/blogs/post/javascript-scheduler-with-php-and-mysql-for-dynamic-crud-operations.aspx "Blog: Integrating JavaScript Scheduler with PHP and MySQL for Dynamic CRUD Operations")