diff --git a/apps/documenteditor/mobile/src/view/edit/EditChart.jsx b/apps/documenteditor/mobile/src/view/edit/EditChart.jsx
index 4b37577af..f905a9eb3 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditChart.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditChart.jsx
@@ -1,6 +1,6 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {List, ListItem, ListButton, Icon, Row, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link, Tabs, Tab} from 'framework7-react';
+import {List, ListItem, ListButton, Icon, Row, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link, Tabs, Tab, Swiper, SwiperSlide} from 'framework7-react';
 import {f7} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
@@ -143,6 +143,8 @@ const PageChartType = props => {
     const { t } = useTranslation();
     const storeChartSettings = props.storeChartSettings;
     const types = storeChartSettings.types;
+    const countSlides = Math.floor(types.length / 3);
+    const arraySlides = Array(countSlides).fill(countSlides);
     const storeFocusObjects = props.storeFocusObjects;
     const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties();
     const curType = chartProperties && chartProperties.getType();
@@ -153,23 +155,35 @@ const PageChartType = props => {
 
             <div id={"edit-chart-type"} className="page-content no-padding-top dataview">
                 <div className="chart-types">
-                    {types.map((row, rowIndex) => {
-                        return (
-                            <ul className="row" key={`row-${rowIndex}`}>
-                                {row.map((type, index)=>{
-                                    return(
-                                        <li key={`${rowIndex}-${index}`}
-                                            className={curType === type.type ? ' active' : ''}
-                                            onClick={() => {props.onType(type.type)}}>
-                                            <div className={'thumb'}
-                                                style={{backgroundImage: `url('resources/img/charts/${type.thumb}')`}}>
-                                            </div>
-                                        </li>
-                                    )
-                                })}
-                            </ul>
-                        )
-                    })}
+                    {types && types.length ? (
+                        <Swiper>
+                            {arraySlides.map((_, indexSlide) => {
+                                let typesSlide = types.slice(indexSlide * 3, (indexSlide * 3) + 3);
+
+                                return (
+                                    <SwiperSlide key={indexSlide}>
+                                        {typesSlide.map((row, rowIndex) => {
+                                            return (
+                                                <ul className="row" key={`row-${rowIndex}`}>
+                                                    {row.map((type, index) => {
+                                                        return (
+                                                            <li key={`${rowIndex}-${index}`}
+                                                                className={curType === type.type ? ' active' : ''}
+                                                                onClick={() => {props.onType(type.type)}}>
+                                                                <div className={'thumb'}
+                                                                    style={{backgroundImage: `url('resources/img/charts/${type.thumb}')`}}>
+                                                                </div>
+                                                            </li>
+                                                        )
+                                                    })}
+                                                </ul>
+                                            )
+                                        })}
+                                    </SwiperSlide>
+                                )
+                            })}
+                        </Swiper>
+                    ) : null}
                 </div>
             </div>
         </Page>
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx b/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx
index 4a5cded23..1857e4292 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx
@@ -1,6 +1,6 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {List, ListItem, ListButton, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavRight} from 'framework7-react';
+import {List, ListItem, ListButton, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavRight, Swiper, SwiperSlide} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
@@ -153,6 +153,8 @@ const PageChartType = props => {
     const { t } = useTranslation();
     const storeChartSettings = props.storeChartSettings;
     const types = storeChartSettings.types;
+    const countSlides = Math.floor(types.length / 3);
+    const arraySlides = Array(countSlides).fill(countSlides);
     const storeFocusObjects = props.storeFocusObjects;
     const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties();
     const curType = chartProperties && chartProperties.getType();
@@ -163,23 +165,35 @@ const PageChartType = props => {
 
             <div id={"edit-chart-type"} className="page-content no-padding-top dataview">
                 <div className="chart-types">
-                    {types.map((row, rowIndex) => {
-                        return (
-                            <ul className="row" key={`row-${rowIndex}`}>
-                                {row.map((type, index)=>{
-                                    return(
-                                        <li key={`${rowIndex}-${index}`}
-                                            className={curType === type.type ? ' active' : ''}
-                                            onClick={() => {props.onType(type.type)}}>
-                                            <div className={'thumb'}
-                                                style={{backgroundImage: `url('resources/img/charts/${type.thumb}')`}}>
-                                            </div>
-                                        </li>
-                                    )
-                                })}
-                            </ul>
-                        )
-                    })}
+                    {types && types.length ? (
+                        <Swiper>
+                            {arraySlides.map((_, indexSlide) => {
+                                let typesSlide = types.slice(indexSlide * 3, (indexSlide * 3) + 3);
+
+                                return (
+                                    <SwiperSlide key={indexSlide}>
+                                        {typesSlide.map((row, rowIndex) => {
+                                            return (
+                                                <ul className="row" key={`row-${rowIndex}`}>
+                                                    {row.map((type, index) => {
+                                                        return (
+                                                            <li key={`${rowIndex}-${index}`}
+                                                                className={curType === type.type ? ' active' : ''}
+                                                                onClick={() => {props.onType(type.type)}}>
+                                                                <div className={'thumb'}
+                                                                    style={{backgroundImage: `url('resources/img/charts/${type.thumb}')`}}>
+                                                                </div>
+                                                            </li>
+                                                        )
+                                                    })}
+                                                </ul>
+                                            )
+                                        })}
+                                    </SwiperSlide>
+                                )
+                            })}
+                        </Swiper>
+                    ) : null}
                 </div>
             </div>
         </Page>
diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx
index 0dcd4efa3..fb94e6c34 100644
--- a/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx
@@ -1,24 +1,40 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
+import {Swiper, SwiperSlide} from 'framework7-react';
 
 const AddChart = props => {
     const types = props.storeChartSettings.types;
+    const countSlides = Math.floor(types.length / 3);
+    const arraySlides = Array(countSlides).fill(countSlides);
+    
     return (
         <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>
-                )
-            })}
+            {types && types.length ? (
+                <Swiper pagination={true}>
+                    {arraySlides.map((_, indexSlide) => {
+                        let typesSlide = types.slice(indexSlide * 3, (indexSlide * 3) + 3);
+
+                        return (
+                            <SwiperSlide key={indexSlide}>
+                                {typesSlide.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>
+                                    )
+                                })}
+                            </SwiperSlide>
+                        )
+                    })}
+                </Swiper>
+            ) : null}
         </div>
     )
 };
diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
index 6c6906937..a73d88801 100644
--- a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
@@ -109,8 +109,8 @@ const EditCell = props => {
                         </ListItem>
                     </List>
                     <BlockTitle>{_t.textCellStyles}</BlockTitle>
-                    {cellStyles.length ? (
-                        <Swiper pagination>
+                    {cellStyles && cellStyles.length ? (
+                        <Swiper pagination={true}>
                             {arraySlides.map((_, indexSlide) => {
                                 let stylesSlide = cellStyles.slice(indexSlide * 9, (indexSlide * 9) + 9);
                                 
diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx
index ef9423458..ca2bb33ca 100644
--- a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx
@@ -1,6 +1,6 @@
 import React, {Fragment, useState, useEffect} from 'react';
 import {observer, inject} from "mobx-react";
-import {f7, List, ListItem, ListButton, ListInput, Icon, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link, Tabs, Tab} from 'framework7-react';
+import {f7, List, ListItem, ListButton, ListInput, Icon, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link, Tabs, Tab, Swiper, SwiperSlide} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
@@ -148,6 +148,8 @@ const PageChartType = props => {
     const { t } = useTranslation();
     const storeChartSettings = props.storeChartSettings;
     const types = storeChartSettings.types;
+    const countSlides = Math.floor(types.length / 3);
+    const arraySlides = Array(countSlides).fill(countSlides);
     const storeFocusObjects = props.storeFocusObjects;
     const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties();
     const curType = chartProperties && chartProperties.getType();
@@ -155,24 +157,35 @@ const PageChartType = props => {
     return (
         <Page>
             <Navbar backLink={t('View.Edit.textBack')} title={t('View.Edit.textType')} />
-
             <div id={"edit-chart-type"} className="page-content no-padding-top dataview">
                 <div className="chart-types">
-                    {types.map((row, rowIndex) => {
-                        return (
-                            <ul className="row" key={`row-${rowIndex}`}>
-                                {row.map((type, index)=>{
-                                    return(
-                                        <li key={`${rowIndex}-${index}`}
-                                            className={curType === type.type ? ' active' : ''}
-                                            onClick={() => {props.onType(type.type)}}>
-                                            <div className={'thumb' + ` ${type.thumb}`}></div>
-                                        </li>
-                                    )
-                                })}
-                            </ul>
-                        )
-                    })}
+                    {types && types.length ? (
+                        <Swiper pagination={true}>
+                            {arraySlides.map((_, indexSlide) => {
+                                let typesSlide = types.slice(indexSlide * 3, (indexSlide * 3) + 3);
+
+                                return (
+                                    <SwiperSlide key={indexSlide}>
+                                        {typesSlide.map((row, rowIndex) => {
+                                            return (
+                                                <ul className="row" key={`row-${rowIndex}`}>
+                                                    {row.map((type, index) => {
+                                                        return (
+                                                            <li key={`${rowIndex}-${index}`}
+                                                                className={curType === type.type ? ' active' : ''}
+                                                                onClick={() => {props.onType(type.type)}}>
+                                                                <div className={'thumb' + ` ${type.thumb}`}></div>
+                                                            </li>
+                                                        )
+                                                    })}
+                                                </ul>
+                                            )
+                                        })}
+                                    </SwiperSlide>
+                                )
+                            })}
+                        </Swiper>
+                    ) : null}
                 </div>
             </div>
         </Page>