What’s New in Essential JS 2: 2023 Volume 4
Tags: javascript, whatsnew, ui, web
Published: 2024-01-19 13:10:07

---
title: What’s New in Essential JS 2: 2023 Volume 4
published: true
date: 2023-12-29 13:31:19 UTC
tags: javascript, whatsnew, ui, web
canonical_url: https://www.syncfusion.com/blogs/post/essential-js-2-2023-volume-4.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/naafgait99r39jb6lyru.png
---
In our Essential Studio [2023 Volume 4](https://www.syncfusion.com/forums/185916/essential-studio-2023-volume-4-main-release-v24-1-41-is-available-for-download "Essential Studio 2023 Volume 4") release, we’ve rolled out many new features and components for our [Essential JS 2](https://www.syncfusion.com/javascript-ui-controls "Essential JS 2") platforms. Our commitment to providing cutting-edge tools remains unwavering, and we believe these updates will empower you to create even more robust and visually appealing web applications.

Let’s look at the key additions!

## New controls: Stepper and 3D Chart

We’ve introduced the following new components in this 2023 Volume 4 release:

- [Stepper](#Stepper)
- [3D Chart](#3D)

### <a name="Stepper">Stepper (preview)</a>

The new [Stepper component](https://www.syncfusion.com/javascript-ui-controls/js-stepper "Essential JS 2 Stepper component") facilitates navigation through step-based processes in web apps. You can customize the step types, orientation, linear flow, label positioning, tooltips, and templates for a seamless user experience.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Essential-JS-2-Stepper-control.png" alt="Essential JS 2 Stepper control" style="width:100%">

  <figcaption>Essential JS 2 Stepper control</figcaption>

</figure>

**Note:** For more details, refer to the [Stepper component demo](https://ej2.syncfusion.com/demos/#/material3/stepper/default.html "Essential JS 2 Stepper component demo").

### <a name="3D">3D Chart (preview)</a>

The new [3D Chart](https://ej2.syncfusion.com/demos/#/material3/three-dimension-chart/column.html "JavaScript 3D Chart demo") control offers a visually engaging representation of data in three dimensions.

Its key features include:

- Six chart types: column, bar, stacked column, stacked bar, 100% stacked column, and 100% stacked bar.
- Data binding with JSON objects or a data manager.
- Data labels, axis types, legends, and user interaction options.
- Export capabilities in JPEG and PNG formats.
- Right-to-left (RTL) rendering mode.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Essential-JS-2-3D-Chart.gif" alt="Essential JS 2 3D Chart" style="width:100%">

  <figcaption>Essential JS 2 3D Chart</figcaption>

</figure>

## What’s new in our existing components?

Let’s look at the new features added to our existing Essential JS 2 components!

### Dropdowns

The dropdown components, namely the [AutoComplete](https://www.syncfusion.com/javascript-ui-controls/js-autocomplete "JavaScript AutoComplete TextBox"), [ComboBox](https://www.syncfusion.com/javascript-ui-controls/js-combobox "JavaScript ComboBox Control"), and [Dropdown List](https://www.syncfusion.com/javascript-ui-controls/js-dropdown-list "JavaScript Dropdown List"), now support virtual scrolling in combination with grouped data, allowing efficient navigation through large lists without loading all items at once.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Virtual-scrolling-with-grouping-in-the-AutoComplete-component.gif" alt="Virtual scrolling with grouping in the AutoComplete component" style="width:100%">

  <figcaption>Virtual scrolling with grouping in the AutoComplete component</figcaption>

</figure>

**Note:** For more details, refer to the [virtualization with grouping in AutoComplete demo.](https://ej2.syncfusion.com/demos/#/material3/auto-complete/virtual-scroll.html "virtualization with grouping in AutoComplete demo.")

### Bullet Chart

Users can now apply different colors to value and target bars in the [Bullet Chart](https://www.syncfusion.com/javascript-ui-controls/js-bullet-chart "JavaScript Bullet Charts") control, thus enhancing the visual representation of data.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Customizing-value-bar-colors-in-Bullet-Chart.png" alt="Customizing value bar colors in Bullet Chart" style="width:100%">

  <figcaption>Customizing value bar colors in Bullet Chart</figcaption>

</figure>

### Charts

The [Charts control](https://www.syncfusion.com/javascript-ui-controls/js-charts "JavaScript Charts") has the following enhancements:

- **Step position** : Step positions for lines allow users to apply steps from the left, center, and right sides of each data point in a step series.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Custom-step-positions-in-Charts.png" alt="Custom step positions in Charts" style="width:100%">

  <figcaption>Custom step positions in Charts</figcaption>

</figure>

- **Axis title alignment** : Align the axis title to the left, right, and center of the chart area.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Axis-title-alignment-customization-in-Charts.png" alt="Axis title alignment customization in Charts" style="width:100%">

  <figcaption>Axis title alignment customization in Charts</figcaption>

</figure>

- **Fixed tooltip** : Position the tooltip at a fixed location within a chart for enhanced data presentation.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Fixed-tooltip-feature-in-Charts.gif" alt="Fixed tooltip feature in Charts" style="width:100%">

  <figcaption>Fixed tooltip feature in Charts</figcaption>

</figure>

### Circular Gauge

[Circular Gauge](https://www.syncfusion.com/javascript-ui-controls/js-circular-gauge "JavaScript Circular Gauge")’s axis line, range, pointer, and annotation elements can be animated one by one to create a smooth appearance when rendered initially.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Animation-feature-in-Circular-Gauge.gif" alt="Animation feature in Circular Gauge" style="width:100%">

  <figcaption>Animation feature in Circular Gauge</figcaption>

</figure>

### Diagram

Users can now add UML class shapes to the symbol palette in the [Diagram](https://www.syncfusion.com/javascript-ui-controls/js-diagram "JavaScript Diagram Library") component. 

**Note:** For more details, refer to the [UML class diagram demo](https://ej2.syncfusion.com/demos/#/material3/diagram/uml-class-diagram.html "JavaScript UML class diagram demo").

### Word Processor

The [Word Processor](https://www.syncfusion.com/javascript-ui-controls/js-word-processor "JavaScript Word Processor") comes with the following enhancements:

- **Ruler** : A ruler for both horizontal and vertical orientations provides enhanced layout and formatting control for documents.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Ruler-in-Word-Processor.png" alt="Ruler in Word Processor" style="width:100%">

  <figcaption>Ruler in Word Processor</figcaption>

</figure>

- **Tab stop:** Tab stops offer precise text alignment at specific points regardless of the content length for a clean and organized document layout. Set multiple tab stops with different alignments and positions for complex layouts.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Tab-stops-feature-in-Word-Processor.png" alt="Tab stops feature in Word Processor" style="width:100%">

  <figcaption>Tab stops feature in Word Processor</figcaption>

</figure>

- [Collaborative editing](https://ej2.syncfusion.com/javascript/documentation/document-editor/collaborative-editing "Collaborative Editing in Blazor Word Processor") (preview): Multiple users can collaborate on the same document in real-time, improving efficiency and teamwork.

### Gantt Chart

The new features added to the [Gantt Chart](https://www.syncfusion.com/javascript-ui-controls/js-gantt-chart "JavaScript Gantt Chart") are:

- [Timeline virtualization](https://ej2.syncfusion.com/demos/#/material3/gantt/virtual-scroll.html "Timeline virtualization in JavaScript Gantt Chart demo"): Load project tasks with longer timelines efficiently, rendering only the visible timeline cells.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Timeline-virtualization-in-Gantt-Chart.gif" alt="Timeline virtualization in Gantt Chart" style="width:100%">

  <figcaption>Timeline virtualization in Gantt Chart</figcaption>

</figure>

- [Drag and drop taskbars](https://ej2.syncfusion.com/demos/#/material3/gantt/drag-and-drop.html "Drag and drop taskbars in JavaScript Gantt Chartdemo"): Reorder tasks by dragging and dropping taskbars within Gantt Chart rows.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Dragging-and-dropping-taskbars-between-tasks-in-Gantt-Chart.gif" alt="Dragging and dropping taskbars between tasks in Gantt Chart" style="width:100%">

  <figcaption>Dragging and dropping taskbars between tasks in Gantt Chart</figcaption>

</figure>

- **Validation rules in editing**: Column validation ensures data validity, displaying error messages for invalid fields before saving.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Validation-rules-feature-in-Gantt-Chart.gif" alt="Validation rules feature in Gantt Chart" style="width:100%">

  <figcaption>Validation rules feature in Gantt Chart</figcaption>

</figure>

- [Enhancements in PDF exporting](https://ej2.syncfusion.com/demos/#/material3/gantt/exporting.html "Enhancements in PDF exporting demo"): The following compatibility features were added for PDF exporting, enhancing comprehensive reporting, customization options, and data integrity:
  - Unscheduled tasks.
  - Manually scheduled tasks.
  - Split tasks.
  - Event markers, holidays, and indicators.
  - Custom fonts in exportedPDF
  - Exported Gantt Chart template columns.
  - Custom data source for PDF exporting.
  - Custom header and footer.

### DataGrid

The [DataGrid control](https://www.syncfusion.com/javascript-ui-controls/js-data-grid "JavaScript DataGrid") has the following enhancements:

- **Load checkbox list data on demand:** For improved performance with large datasets.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Loading-checkbox-data-on-demand-in-DataGrid.gif" alt="Loading checkbox data on demand in DataGrid" style="width:100%">

  <figcaption>Loading checkbox data on demand in DataGrid</figcaption>

</figure>

- **Adaptive view layout**: Menus, pop-ups, and page-size dropdown elements now adjust layouts based on mobile device screen sizes.
- **Exporting the grid**: You can now save grid data as a blob, memory stream, or file stream during export.
- **Template customization for empty records**: Customize the content displayed when there are no records to show in the grid. Users can add their own content or incorporate HTML elements using the template option. This empty record content is presented when binding empty data to the grid or when an action within the grid results in no records to display.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Template-customization-for-empty-records-in-DataGrid.gif" alt="Template customization for empty records in DataGrid" style="width:100%">

  <figcaption>Template customization for empty records in DataGrid</figcaption>

</figure>

### Image Editor

#### Straightening

The [Image Editor](https://www.syncfusion.com/javascript-ui-controls/js-image-editor "JavaScript Image Editor Control") now lets users align and correct the orientation of images, refining their overall presentation. This feature ensures a polished and visually appealing output, enhancing the quality and impact of the final composition.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Straightening-feature-in-Image-Editor.gif" alt="Straightening feature in Image Editor" style="width:100%">

  <figcaption>Straightening feature in Image Editor</figcaption>

</figure>

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

### ListView

#### On-demand data loading or lazy loading

The [ListView](https://www.syncfusion.com/javascript-ui-controls/js-listview "JavaScript ListView") supports on-demand data loading or lazy loading by retrieving data for just the current viewport.

**Note:** For more details, refer to the [lazy loading in ListView demo.](https://ej2.syncfusion.com/demos/#/material3/listview/scrolling.html "lazy loading in JavaScript ListView demo")

### Maps

#### Polygon shape rendering

Draw and display polygon shapes over the main layer of the [Maps](https://www.syncfusion.com/javascript-ui-controls/js-Maps "JavaScript Maps Library") control.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Polygon-shape-rendering-in-Maps.png" alt="Polygon shape rendering in Maps" style="width:100%">

  <figcaption>Polygon shape rendering in Maps</figcaption>

</figure>

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

### PDF Viewer

We have delivered the following new, user-friendly features for the[PDF Viewer](https://www.syncfusion.com/javascript-ui-controls/js-pdf-viewer "JavaScript PDF Viewer") control:

- **Keyboard accessibility**: Navigate through the PDF Viewer using keyboard shortcuts for an enhanced user experience.
- **Default toolbar customization**: Customize the primary toolbar layout, arrangement, and visibility.

**Note:** For more details, refer to the [PDF Viewer demo.](https://ej2.syncfusion.com/demos/#/material3/pdfviewer/custom-toolbar.html "JavaScript PDF Viewer demo")

### Scheduler

The [Scheduler](https://www.syncfusion.com/javascript-ui-controls/js-scheduler "JavaScript Scheduler") control supports the following new features in this 2023 Volume 4 release:

- **Toolbar**  **c**** ustomization**: Customize the icons, text, and tooltips of the Scheduler toolbar items for a personalized experience.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Customizing-the-toolbar-in-Scheduler.png" alt="Customizing the toolbar in Scheduler" style="width:100%">

  <figcaption>Customizing the toolbar in Scheduler</figcaption>

</figure>

- **Maximum events per row** : You can set the maximum number of concurrent events to be displayed in the Scheduler for improved visualization.

### Spreadsheet

The [Spreadsheet](https://www.syncfusion.com/javascript-ui-controls/js-spreadsheet "JavaScript Spreadsheet") control receives the following enhancements:

- Display confirmation dialogs before opening Excel files with external workbook references.
- New formulas, including LOOKUP, VLOOKUP, HLOOKUP, SQRT, RSQ, ROUNDDOWN, EOMONTH, and NOT, have been added.

### TreeGrid

#### Aggregate in exporting

You can now export [TreeGrid](https://www.syncfusion.com/javascript-ui-controls/js-tree-grid "JavaScript Tree Grid") to PDF and Excel files with aggregate cell values included in the footer.

**Note:** For more details, refer to the [TreeGrid demo](https://ej2.syncfusion.com/javascript/demos/#/material3/tree-grid/aggregate.default.html "JavaScript TreeGrid demo").

## Conclusion

Thanks for reading! This new update brings a multitude of features for our controls, ensuring that [Essential JS 2](https://www.syncfusion.com/javascript-ui-controls "Essential JS 2 components") remains at the forefront of web development tools. Explore these new capabilities and let us know how they enhance your development process!

You can check out all the other updates in this release on our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v23.1.36 "Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Essential Studio What’s New") pages.

For questions, you can reach us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Syncfusion Essential Studio 2023 Volume 4 Is Here!](https://www.syncfusion.com/blogs/post/essential-studio-2023-volume-4.aspx "Blog: Syncfusion Essential Studio 2023 Volume 4 Is Here!")
- [Advancing PDF Handling with Standalone Essential JS 2 PDF Viewer](https://www.syncfusion.com/blogs/post/standalone-ej2-pdf-viewer.aspx "Blog: Advancing PDF Handling with Standalone Essential JS 2 PDF Viewer")
- [How to Build Synchronized Charts in React for Trade Analysis [Webinar Show Notes]](https://www.syncfusion.com/blogs/post/synchronized-charts-react.aspx "Blog: How to Build Synchronized Charts in React for Trade Analysis [Webinar Show Notes]")
- [Build Multi-Parent Hierarchical Trees with Angular Diagram Library](https://www.syncfusion.com/blogs/post/angular-multi-parent-hierarchical-tree-diagram.aspx "Blog: Build Multi-Parent Hierarchical Trees with Angular Diagram Library")