diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less
index b153c61c51..6060c5f6ba 100644
--- a/apps/common/mobile/resources/less/common-ios.less
+++ b/apps/common/mobile/resources/less/common-ios.less
@@ -376,7 +376,7 @@
         }
     }
 
-    .dataview, #add-table, #add-shape, #add-slide {
+    .dataview, #add-table, #add-shape, #add-slide, #add-chart {
         &.page-content, .page-content {
             background-color: @white;
         }
diff --git a/apps/spreadsheeteditor/mobile/src/controller/add/AddChart.jsx b/apps/spreadsheeteditor/mobile/src/controller/add/AddChart.jsx
index 5e69d6d853..55d1b8e3af 100644
--- a/apps/spreadsheeteditor/mobile/src/controller/add/AddChart.jsx
+++ b/apps/spreadsheeteditor/mobile/src/controller/add/AddChart.jsx
@@ -7,6 +7,7 @@ import AddChart from '../../view/add/AddChart';
 class AddChartController extends Component {
     constructor (props) {
         super(props);
+        this.onInsertChart = this.onInsertChart.bind(this);
     }
 
     closeModal () {
@@ -17,9 +18,17 @@ class AddChartController extends Component {
         }
     }
 
+    onInsertChart (type) {
+        const api = Common.EditorApi.get();
+        const settings = api.asc_getChartObject();
+        settings.changeType(type);
+        api.asc_addChartDrawingObject(settings);
+        this.closeModal();
+    }
+
     render () {
         return (
-            <AddChart
+            <AddChart onInsertChart={this.onInsertChart}
             />
         )
     }
diff --git a/apps/spreadsheeteditor/mobile/src/less/app.less b/apps/spreadsheeteditor/mobile/src/less/app.less
index 5403bdf9dd..49f02cf9fc 100644
--- a/apps/spreadsheeteditor/mobile/src/less/app.less
+++ b/apps/spreadsheeteditor/mobile/src/less/app.less
@@ -9,6 +9,7 @@
 @import '../../../../common/mobile/resources/less/common.less';
 @import '../../../../common/mobile/resources/less/common-ios.less';
 @import '../../../../common/mobile/resources/less/common-material.less';
+@import '../../../../common/mobile/resources/less/dataview.less';
 @import './app-material.less';
 @import './app-ios.less';
 @import './icons-ios.less';
diff --git a/apps/spreadsheeteditor/mobile/src/store/chartSettings.js b/apps/spreadsheeteditor/mobile/src/store/chartSettings.js
new file mode 100644
index 0000000000..edda7ebe62
--- /dev/null
+++ b/apps/spreadsheeteditor/mobile/src/store/chartSettings.js
@@ -0,0 +1,44 @@
+import {action, observable, computed} from 'mobx';
+
+export class storeChartSettings {
+    @computed get types () {
+        const _types = [
+            { type: Asc.c_oAscChartTypeSettings.barNormal,               thumb: 'bar-normal'},
+            { type: Asc.c_oAscChartTypeSettings.barStacked,              thumb: 'bar-stacked'},
+            { type: Asc.c_oAscChartTypeSettings.barStackedPer,           thumb: 'bar-pstacked'},
+            { type: Asc.c_oAscChartTypeSettings.lineNormal,              thumb: 'line-normal'},
+            { type: Asc.c_oAscChartTypeSettings.lineStacked,             thumb: 'line-stacked'},
+            { type: Asc.c_oAscChartTypeSettings.lineStackedPer,          thumb: 'line-pstacked'},
+            { type: Asc.c_oAscChartTypeSettings.hBarNormal,              thumb: 'hbar-normal'},
+            { type: Asc.c_oAscChartTypeSettings.hBarStacked,             thumb: 'hbar-stacked'},
+            { type: Asc.c_oAscChartTypeSettings.hBarStackedPer,          thumb: 'hbar-pstacked'},
+            { type: Asc.c_oAscChartTypeSettings.areaNormal,              thumb: 'area-normal'},
+            { type: Asc.c_oAscChartTypeSettings.areaStacked,             thumb: 'area-stacked'},
+            { type: Asc.c_oAscChartTypeSettings.areaStackedPer,          thumb: 'area-pstacked'},
+            { type: Asc.c_oAscChartTypeSettings.pie,                     thumb: 'pie'},
+            { type: Asc.c_oAscChartTypeSettings.doughnut,                thumb: 'doughnut'},
+            { type: Asc.c_oAscChartTypeSettings.pie3d,                   thumb: 'pie3d'},
+            { type: Asc.c_oAscChartTypeSettings.scatter,                 thumb: 'scatter'},
+            { type: Asc.c_oAscChartTypeSettings.stock,                   thumb: 'stock'},
+            { type: Asc.c_oAscChartTypeSettings.line3d,                  thumb: 'line3d'},
+            { type: Asc.c_oAscChartTypeSettings.barNormal3d,             thumb: 'bar3dnormal'},
+            { type: Asc.c_oAscChartTypeSettings.barStacked3d,            thumb: 'bar3dstack'},
+            { type: Asc.c_oAscChartTypeSettings.barStackedPer3d,         thumb: 'bar3dpstack'},
+            { type: Asc.c_oAscChartTypeSettings.hBarNormal3d,            thumb: 'hbar3dnormal'},
+            { type: Asc.c_oAscChartTypeSettings.hBarStacked3d,           thumb: 'hbar3dstack'},
+            { type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d,        thumb: 'hbar3dpstack'},
+            { type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective,  thumb: 'bar3dpsnormal'}
+        ];
+        const columns = 3;
+        let row = -1;
+        const groups = [];
+        _types.forEach((type, index) => {
+            if (0 == index % columns) {
+                groups.push([]);
+                row++
+            }
+            groups[row].push(type);
+        });
+        return groups;
+    }
+}
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/store/mainStore.js b/apps/spreadsheeteditor/mobile/src/store/mainStore.js
index 850aea6f8e..b0fea34f6a 100644
--- a/apps/spreadsheeteditor/mobile/src/store/mainStore.js
+++ b/apps/spreadsheeteditor/mobile/src/store/mainStore.js
@@ -8,17 +8,17 @@ import {storeWorksheets} from './sheets';
 // import {storeShapeSettings} from "./shapeSettings";
 // import {storeImageSettings} from "./imageSettings";
 // import {storeTableSettings} from "./tableSettings";
-// import {storeChartSettings} from "./chartSettings";
+import {storeChartSettings} from "./chartSettings";
 
 export const stores = {
     storeFocusObjects: new storeFocusObjects(),
     // storeDocumentSettings: new storeDocumentSettings(),
     users: new storeUsers(),
-    sheets: new storeWorksheets()
+    sheets: new storeWorksheets(),
     // storeTextSettings: new storeTextSettings(),
     // storeParagraphSettings: new storeParagraphSettings(),
     // storeShapeSettings: new storeShapeSettings(),
-    // storeChartSettings: new storeChartSettings(),
+    storeChartSettings: new storeChartSettings(),
     // storeImageSettings: new storeImageSettings(),
     // storeTableSettings: new storeTableSettings()
 };
diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx
index 8eec1a782e..0dcd4efa32 100644
--- a/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx
@@ -2,11 +2,25 @@ import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
 
 const AddChart = props => {
+    const types = props.storeChartSettings.types;
     return (
-        <Fragment>
-
-        </Fragment>
+        <div className={'dataview chart-types'}>
+            {types.map((row, indexRow) => {
+                return (
+                    <ul className="row" key={`row-${indexRow}`}>
+                        {row.map((type, index) => {
+                            return (
+                                <li key={`${indexRow}-${index}`}
+                                    onClick={()=>{props.onInsertChart(type.type)}}>
+                                    <div className={`thumb ${type.thumb}`}></div>
+                                </li>
+                            )
+                        })}
+                    </ul>
+                )
+            })}
+        </div>
     )
 };
 
-export default AddChart;
\ No newline at end of file
+export default inject("storeChartSettings")(observer(AddChart));
\ No newline at end of file