diff --git a/apps/common/main/resources/less/advanced-settings-window.less b/apps/common/main/resources/less/advanced-settings-window.less
index 771458aa04..aa9d68f79a 100644
--- a/apps/common/main/resources/less/advanced-settings-window.less
+++ b/apps/common/main/resources/less/advanced-settings-window.less
@@ -142,3 +142,23 @@
     height: @input-height-base;
 }
 
+.dataview {
+    &.focus-inner {
+        > .item {
+            &:hover,
+            &.selected {
+                .box-shadow(0 0 0 1px @border-preview-select-ie);
+                .box-shadow(0 0 0 @scaled-one-px-value @border-preview-select);
+            }
+        }
+        &:focus:not(.disabled) {
+            > .item {
+                &:hover,
+                &.selected {
+                    .box-shadow(0 0 0 2px @border-preview-select-ie);
+                    .box-shadow(0 0 0 @scaled-two-px-value @border-preview-select);
+                }
+            }
+        }
+    }
+}
diff --git a/apps/spreadsheeteditor/main/app/controller/Toolbar.js b/apps/spreadsheeteditor/main/app/controller/Toolbar.js
index 7f5726ef88..0df4218694 100644
--- a/apps/spreadsheeteditor/main/app/controller/Toolbar.js
+++ b/apps/spreadsheeteditor/main/app/controller/Toolbar.js
@@ -64,7 +64,7 @@ define([
     'spreadsheeteditor/main/app/view/SlicerAddDialog',
     'spreadsheeteditor/main/app/view/AdvancedSeparatorDialog',
     'spreadsheeteditor/main/app/view/CreateSparklineDialog',
-    'spreadsheeteditor/main/app/view/ChartRecommendedDialog'
+    'spreadsheeteditor/main/app/view/ChartWizardDialog'
 ], function () { 'use strict';
 
     SSE.Controllers.Toolbar = Backbone.Controller.extend(_.extend({
@@ -5155,55 +5155,24 @@ define([
 
         onChartRecommendedClick: function() {
             var me = this,
-                info = me.api.asc_getCellInfo(),
-                seltype = info.asc_getSelectionType(),
-                ischartedit = ( seltype == Asc.c_oAscSelectionType.RangeChart || seltype == Asc.c_oAscSelectionType.RangeChartText),
-                props = me.api.asc_getChartObject(true); // don't lock chart object
-            (new SSE.Views.ChartRecommendedDialog({
+                recommended = me.api.asc_getRecommendedChartData();
+            if (!recommended) {
+                Common.UI.warning({
+                    msg: me.warnNoRecommended,
+                    maxwidth: 600,
+                    callback: function(btn) {
+                        Common.NotificationCenter.trigger('edit:complete', me.toolbar);
+                    }
+                });
+                return;
+            }
+
+            (new SSE.Views.ChartWizardDialog({
                 api: me.api,
-                props: props,
-                charts: [Asc.c_oAscChartTypeSettings.barStackedPer3d, Asc.c_oAscChartTypeSettings.pie3d, Asc.c_oAscChartTypeSettings.barNormal],
+                props: {recommended: recommended, all: []},
                 handler: function(result, value) {
                     if (result == 'ok') {
-                        if (me.api) {
-                            var type = value.type;
-                            if (type!==null) {
-                                if (ischartedit)
-                                    props.changeType(type);
-                                else {
-                                    props.putType(type);
-                                    var range = props.getRange(),
-                                        isvalid = (!_.isEmpty(range)) ? me.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, range, true, props.getInRows(), props.getType()) : Asc.c_oAscError.ID.No;
-                                    if (isvalid == Asc.c_oAscError.ID.No) {
-                                        me.api.asc_addChartDrawingObject(props);
-                                    } else {
-                                        var msg = me.txtInvalidRange;
-                                        switch (isvalid) {
-                                            case Asc.c_oAscError.ID.StockChartError:
-                                                msg = me.errorStockChart;
-                                                break;
-                                            case Asc.c_oAscError.ID.MaxDataSeriesError:
-                                                msg = me.errorMaxRows;
-                                                break;
-                                            case Asc.c_oAscError.ID.ComboSeriesError:
-                                                msg = me.errorComboSeries;
-                                                break;
-                                            case Asc.c_oAscError.ID.MaxDataPointsError:
-                                                msg = me.errorMaxPoints;
-                                                break;
-                                        }
-                                        Common.UI.warning({
-                                            msg: msg,
-                                            callback: function () {
-                                                _.defer(function (btn) {
-                                                    Common.NotificationCenter.trigger('edit:complete', me.toolbar);
-                                                })
-                                            }
-                                        });
-                                    }
-                                }
-                            }
-                        }
+                        me.api && me.api.asc_addChartSpace(value);
                     }
                     Common.NotificationCenter.trigger('edit:complete', me.toolbar);
                 }
@@ -5590,7 +5559,8 @@ define([
         textRating: 'Ratings',
         txtLockSort: 'Data is found next to your selection, but you do not have sufficient permissions to change those cells.<br>Do you wish to continue with the current selection?',
         textRecentlyUsed: 'Recently Used',
-        errorMaxPoints: 'The maximum number of points in series per chart is 4096.'
+        errorMaxPoints: 'The maximum number of points in series per chart is 4096.',
+        warnNoRecommended: 'To create a chart, select the cells that contain the data you\'d like to use.<br>If you have names for the rows and columns and you\'d like use them as labels, include them in your selection.'
 
     }, SSE.Controllers.Toolbar || {}));
 });
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/main/app/view/ChartRecommendedDialog.js b/apps/spreadsheeteditor/main/app/view/ChartWizardDialog.js
similarity index 65%
rename from apps/spreadsheeteditor/main/app/view/ChartRecommendedDialog.js
rename to apps/spreadsheeteditor/main/app/view/ChartWizardDialog.js
index f3e8f89898..acceaf855e 100644
--- a/apps/spreadsheeteditor/main/app/view/ChartRecommendedDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/ChartWizardDialog.js
@@ -30,7 +30,7 @@
  *
  */
 /**
- *  ChartRecommendedDialog.js
+ *  ChartWizardDialog.js
  *
  *  Created by Julia Radzhabova on 02/11/23
  *  Copyright (c) 2023 Ascensio System SIA. All rights reserved.
@@ -42,10 +42,10 @@ define(['common/main/lib/view/AdvancedSettingsWindow',
 ], function () {
     'use strict';
 
-    SSE.Views.ChartRecommendedDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
+    SSE.Views.ChartWizardDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
-            contentWidth: 350,
-            contentHeight: 330,
+            contentWidth: 458,
+            contentHeight: 400,
             toggleGroup: 'chart-recommend-group',
             storageName: 'sse-chart-recommend-category'
         },
@@ -55,14 +55,17 @@ define(['common/main/lib/view/AdvancedSettingsWindow',
                 charts = [],
                 groups = [],
                 chartData = Common.define.chartData.getChartData();
-            (options.charts || []).forEach(function(chart) {
-                for (var i=0; i<chartData.length; i++) {
-                    if (chart===chartData[i].type) {
-                        charts.push(chartData[i]);
-                        break;
+            if (options.props.recommended) {
+                for (var type in options.props.recommended) {
+                    if (isNaN(parseInt(type))) continue;
+                    for (var i=0; i<chartData.length; i++) {
+                        if (parseInt(type)===chartData[i].type) {
+                            charts.push(chartData[i]);
+                            break;
+                        }
                     }
                 }
-            });
+            }
             (charts.length>0) && groups.push({panelId: 'id-chart-recommended-rec', panelCaption: me.textRecommended, groupId: 'rec', charts: charts});
             Common.define.chartData.getChartGroupData().forEach(function(group) {
                 var charts = [];
@@ -83,21 +86,21 @@ define(['common/main/lib/view/AdvancedSettingsWindow',
                         '</div>',
                     '</div>',
                     '<div class="separator horizontal padding-small"></div>',
-                    '<div class="inner-content">',
+                    '<div class="inner-content padding-left-10">',
                         '<table cols="1" style="width: 100%;">',
                             '<tr>',
-                                '<td class="padding-small">',
+                                '<td class="padding-very-small">',
                                     '<label class="header" id="id-<%= group.groupId %>-lbl"></label>',
                                 '</td>',
                             '</tr>',
                             '<tr class="preview-list hidden">',
                                 '<td class="padding-small">',
-                                '<div id="id-<%= group.groupId %>-list-preview" class="preview-canvas-container" style="width:100%; height: 176px;"></div>',
+                                '<div id="id-<%= group.groupId %>-list-preview" class="" style="width:100%; height: 258px;"></div>',
                                 '</td>',
                             '</tr>',
                             '<tr class="preview-one">',
                                 '<td class="padding-small">',
-                                '<div id="id-<%= group.groupId %>-preview" class="preview-canvas-container" style="width:100%; height: 176px;"></div>',
+                                '<div id="id-<%= group.groupId %>-preview" class="preview-canvas-container" style="width:100%; height: 258px;background-size: cover; background-repeat: no-repeat;"></div>',
                                 '</td>',
                             '</tr>',
                         '</table>',
@@ -115,9 +118,10 @@ define(['common/main/lib/view/AdvancedSettingsWindow',
             }, options);
             Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options);
 
-            this._originalProps = this.options.props;
-            this._charts = this.options.charts;
             this._currentChartType = null;
+            this._currentChartSpace = null;
+            this._currentPreviews = [];
+            this._currentTabSettings = null;
         },
 
         render: function() {
@@ -143,11 +147,31 @@ define(['common/main/lib/view/AdvancedSettingsWindow',
                         if (pressed) {
                             $window.find('#id-' + item.groupId + '-lbl').text(chart.tip);
                             me._currentChartType = chart.type;
+                            me.updatePreview();
                         }
                     });
                     item.chartButtons.push(btn);
                     me.chartButtons.push(btn);
                 });
+                item.listViewEl = $window.find('#' + item.panelId + ' .preview-list');
+                item.divPreviewEl = $window.find('#' + item.panelId + ' .preview-one');
+                item.divPreview = $window.find('#id-' + item.groupId + '-preview');
+                item.listPreview = new Common.UI.DataView({
+                    el: $window.find('#id-' + item.groupId + '-list-preview'),
+                    cls: 'focus-inner',
+                    store: new Common.UI.DataViewStore(),
+                    itemTemplate : _.template([
+                        '<div class="style" id="<%= id %>">',
+                        '<img src="<%= imageUrl %>" width="210" height="120" <% if(typeof imageUrl === "undefined" || imageUrl===null || imageUrl==="") { %> style="visibility: hidden;" <% } %>/>',
+                        '</div>'
+                    ].join('')),
+                    tabindex: 1
+                });
+                item.listPreview.on('item:select', function(dataView, itemView, record) {
+                    if (record) {
+                        me._currentChartSpace = record.get('data');
+                    }
+                });
             });
 
             this.afterRender();
@@ -162,6 +186,8 @@ define(['common/main/lib/view/AdvancedSettingsWindow',
 
             Common.Views.AdvancedSettingsWindow.prototype.onCategoryClick.call(this, btn, index);
 
+            this.fillPreviews(index);
+
             var buttons = this.options.items[index].chartButtons;
             if (buttons.length>0)  {
                 buttons[0].toggle(true);
@@ -171,23 +197,51 @@ define(['common/main/lib/view/AdvancedSettingsWindow',
             }
         },
 
+        fillPreviews: function(index) {
+            if (index===0)
+                this._currentPreviews = this.options.props.recommended;
+            else
+                this._currentPreviews = this.options.props.all;
+            this._currentTabSettings = this.options.items[index];
+        },
+
+        updatePreview: function() {
+            if (this._currentPreviews[this._currentChartType]) {
+                var charts = this._currentPreviews[this._currentChartType];
+                this._currentTabSettings.listViewEl.toggleClass('hidden', charts.length===1);
+                this._currentTabSettings.divPreviewEl.toggleClass('hidden', charts.length>1);
+                if (charts.length===1) {
+                    this._currentChartSpace = charts[0];
+                    this._currentTabSettings.divPreview.css('background-image', 'url(' + this._currentChartSpace.asc_getPreview() + ')');
+                } else if (charts.length>1) {
+                    var store = this._currentTabSettings.listPreview.store,
+                        arr = [];
+                    for (var i = 0; i < charts.length; i++) {
+                        arr.push(new Common.UI.DataViewModel({
+                            imageUrl: charts[i].asc_getPreview(),
+                            data: charts[i]
+                        }));
+                    }
+                    store.reset(arr);
+                    this._currentTabSettings.listPreview.selectByIndex(0);
+                }
+            }
+        },
+
         afterRender: function() {
-            this._setDefaults(this._originalProps);
+            this._setDefaults(this.options.props);
             this.setActiveCategory(0);
         },
 
         _setDefaults: function(props) {
-            if (props){
-
-            }
         },
 
         getSettings: function() {
-            return { type: this._currentChartType} ;
+            return this._currentChartSpace;
         },
 
         textTitle: 'Insert Chart',
         textRecommended: 'Recommended'
 
-    }, SSE.Views.ChartRecommendedDialog || {}));
+    }, SSE.Views.ChartWizardDialog || {}));
 });
\ No newline at end of file