[SSE mobile] Added Chart Settings

apps/common/mobile/resources/less/common.less

@@ -3,6 +3,7 @@
 @black: #000000;
 @gray: #c4c4c4;
 @green: #4cd964;
+@darkGreen: #40865c;
 @red: #f00;
 @background-normal: @white;
 @autoColor: @black;
@@ -455,3 +456,32 @@
         .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="#40865c"><g><circle fill="#fff" cx="11" cy="11" r="11"/><path d="M11,21A10,10,0,1,1,21,11,10,10,0,0,1,11,21h0ZM17.4,7.32L17.06,7a0.48,0.48,0,0,0-.67,0l-7,6.84L6.95,11.24a0.51,0.51,0,0,0-.59.08L6,11.66a0.58,0.58,0,0,0,0,.65l3.19,3.35a0.38,0.38,0,0,0,.39,0L17.4,8a0.48,0.48,0,0,0,0-.67h0Z"/></g></svg>');
     }
 }
+
+.list-block .item-input {
+    width: 100%;
+    margin-top: -8px;
+    margin-bottom: -7px;
+    flex-shrink: 1;
+}
+
+.item-content .item-after input.field.right {
+    text-align: right;
+}
+
+.item-content .item-after input.field {
+    color: @darkGreen;
+}
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+input[type="number"]::placeholder {
+    color: @darkGreen;
+}
+input[type="number"]::-webkit-input-placeholder {color: @darkGreen;}
+input[type="number"]::-moz-placeholder {color: @darkGreen;}
+input[type="number"]:-moz-placeholder {color: @darkGreen;}
+input[type="number"]:-ms-input-placeholder {color: @darkGreen;}

apps/spreadsheeteditor/mobile/locale/en.json

@@ -169,7 +169,38 @@
             "textInnerBottom": "Inner Bottom",
             "textInnerTop": "Inner Top",
             "textOuterTop": "Outer Top", 
-            "textFit": "Fit Width"
+            "textFit": "Fit Width",
+            "textMinimumValue": "Minimum Value",
+            "textMaximumValue": "Maximum Value",
+            "textAxisCrosses": "Axis Crosses",
+            "textDisplayUnits": "Display Units",
+            "textValuesInReverseOrder": "Values in Reverse Order",
+            "textTickOptions": "Tick Options",
+            "textMajorType": "Major Type",
+            "textMinorType": "Minor Type",
+            "textLabelOptions": "Label Options",
+            "textLabelPosition": "Label Position",
+            "textAxisOptions": "Axis Options",
+            "textValue": "Value",
+            "textHundreds": "Hundreds",
+            "textThousands": "Thousands",
+            "textMillions": "Millions",
+            "textBillions": "Billions",
+            "textTrillions": "Trillions",
+            "textTenThousands": "10 000",
+            "textHundredThousands": "100 000",
+            "textTenMillions": "10 000 000",
+            "textHundredMil": "100 000 000",
+            "textCross": "Cross",
+            "textIn": "In",
+            "textOut": "Out",
+            "textLow": "Low", 
+            "textHigh": "High",
+            "textNextToAxis": "Next to Axis",
+            "textCrossesValue": "Crosses Value",
+            "textOnTickMarks": "On Tick Marks",
+            "textBetweenTickMarks": "Between Tick Marks",
+            "textAxisPosition": "Axis Position"
         }
     },
     "Common": {

apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx

@@ -13,6 +13,22 @@ class EditChartController extends Component {
         this.onStyle = this.onStyle.bind(this);
         this.onBorderColor = this.onBorderColor.bind(this);
         this.onBorderSize = this.onBorderSize.bind(this);
+        this.onVerAxisMinValue = this.onVerAxisMinValue.bind(this);
+        this.onVerAxisMaxValue = this.onVerAxisMaxValue.bind(this);
+        this.onVerAxisCrossType = this.onVerAxisCrossType.bind(this);
+        this.onVerAxisCrossValue = this.onVerAxisCrossValue.bind(this);
+        this.onVerAxisDisplayUnits = this.onVerAxisDisplayUnits.bind(this);
+        this.onVerAxisReverse = this.onVerAxisReverse.bind(this);
+        this.onVerAxisTickMajor = this.onVerAxisTickMajor.bind(this);
+        this.onVerAxisTickMinor = this.onVerAxisTickMinor.bind(this);
+        this.onVerAxisLabelPos = this.onVerAxisLabelPos.bind(this);
+        this.onHorAxisCrossType = this.onHorAxisCrossType.bind(this);
+        this.onHorAxisCrossValue = this.onHorAxisCrossValue.bind(this);
+        this.onHorAxisPos = this.onHorAxisPos.bind(this);
+        this.onHorAxisReverse = this.onHorAxisReverse.bind(this);
+        this.onHorAxisTickMajor = this.onHorAxisTickMajor.bind(this);
+        this.onHorAxisTickMinor = this.onHorAxisTickMinor.bind(this);
+        this.onHorAxisLabelPos = this.onHorAxisLabelPos.bind(this);
     }
 
     closeModal() {
@@ -160,7 +176,206 @@ class EditChartController extends Component {
 
             api.asc_editChartDrawingObject(chartObject);
         }
+    }
 
+    initVertAxis() {
+        const api = Common.EditorApi.get();
+        const chartProperty = api.asc_getChartObject();
+
+        let verAxisProps = chartProperty.getVertAxisProps();
+        let axisVertProps = (verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? verAxisProps : chartProperty.getHorAxisProps();
+
+        return axisVertProps;
+    } 
+
+    getVerticalAxisProp() {
+        const api = Common.EditorApi.get();
+        let chartObject = api.asc_getChartObject(),
+            verAxisProps = chartObject.getVertAxisProps();
+
+        return (verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? verAxisProps : chartObject.getHorAxisProps();
+    }
+
+    setVerticalAxisProp(axisProps) {
+        const api = Common.EditorApi.get();
+        let chartObject = api.asc_getChartObject(),
+            verAxisProps = chartObject.getVertAxisProps();
+
+        if (chartObject) {
+            chartObject[(verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? 'putVertAxisProps' : 'putHorAxisProps'](axisProps);
+            api.asc_editChartDrawingObject(chartObject);
+        }
+    }
+
+    onVerAxisMinValue(value) {
+        let axisProps = this.getVerticalAxisProp(),
+            axisRule = !value ? Asc.c_oAscValAxisRule.auto : Asc.c_oAscValAxisRule.fixed;
+
+        axisProps.putMinValRule(axisRule);
+
+        if (axisRule == Asc.c_oAscValAxisRule.fixed) {
+            axisProps.putMinVal(+value);
+        }
+
+        this.setVerticalAxisProp(axisProps);
+    }
+
+    onVerAxisMaxValue(value) {
+        let axisProps = this.getVerticalAxisProp(),
+            axisRule = !value ? Asc.c_oAscValAxisRule.auto : Asc.c_oAscValAxisRule.fixed;
+
+        axisProps.putMaxValRule(axisRule);
+
+        if (axisRule == Asc.c_oAscValAxisRule.fixed) {
+            axisProps.putMaxVal(+value);
+        }
+
+        this.setVerticalAxisProp(axisProps);
+    }
+
+    onVerAxisCrossType(value) {
+        let axisProps = this.getVerticalAxisProp();
+
+        axisProps.putCrossesRule(+value);
+
+        this.setVerticalAxisProp(axisProps);
+    }
+
+    onVerAxisCrossValue(value) {
+        let axisProps = this.getVerticalAxisProp();
+
+        axisProps.putCrossesRule(Asc.c_oAscCrossesRule.value);
+        axisProps.putCrosses(+value);
+
+        this.setVerticalAxisProp(axisProps);
+    }
+
+    onVerAxisDisplayUnits(value) {
+        let axisProps = this.getVerticalAxisProp();
+
+        axisProps.putDispUnitsRule(+value);
+
+        this.setVerticalAxisProp(axisProps);
+    }
+
+    onVerAxisReverse(value) {
+        let axisProps = this.getVerticalAxisProp();
+
+        axisProps.putInvertValOrder(value);
+
+        this.setVerticalAxisProp(axisProps);
+    }
+
+    onVerAxisTickMajor(value) {
+        let axisProps = this.getVerticalAxisProp();
+
+        axisProps.putMajorTickMark(+value);
+
+        this.setVerticalAxisProp(axisProps);
+    }
+
+    onVerAxisTickMinor(value) {
+        let axisProps = this.getVerticalAxisProp();
+
+        axisProps.putMinorTickMark(+value);
+
+        this.setVerticalAxisProp(axisProps);
+    }
+
+    onVerAxisLabelPos(value) {
+        let axisProps = this.getVerticalAxisProp();
+
+        axisProps.putTickLabelsPos(+value);
+
+        this.setVerticalAxisProp(axisProps);
+    }
+
+    // Horizontal
+
+    initHorAxis() {
+        const api = Common.EditorApi.get();
+        const chartProperty = api.asc_getChartObject();
+
+        let horAxisProps = chartProperty.getHorAxisProps();
+        let axisHorProps = (horAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? chartProperty.getVertAxisProps() : horAxisProps;
+
+        return axisHorProps;
+    }
+
+    getHorizontalAxisProp() {
+        const api = Common.EditorApi.get();
+        let chartObject = api.asc_getChartObject(),
+            verHorProps = chartObject.getHorAxisProps();
+
+        return (verHorProps.getAxisType() == Asc.c_oAscAxisType.val) ? chartObject.getVertAxisProps() : verHorProps;
+    }
+
+    setHorizontalAxisProp(axisProps) {
+        const api = Common.EditorApi.get();
+        let chartObject = api.asc_getChartObject(),
+            verAxisProps = chartObject.getHorAxisProps();
+
+        if (chartObject) {
+            chartObject[(verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? 'putVertAxisProps' : 'putHorAxisProps'](axisProps);
+            api.asc_editChartDrawingObject(chartObject);
+        }
+    }
+
+    onHorAxisCrossType(value) {
+        let axisProps = this.getHorizontalAxisProp();
+
+        axisProps.putCrossesRule(+value);
+
+        this.setHorizontalAxisProp(axisProps);
+    }
+
+    onHorAxisCrossValue(value) {
+        let axisProps = this.getHorizontalAxisProp();
+
+        axisProps.putCrossesRule(Asc.c_oAscCrossesRule.value);
+        axisProps.putCrosses(+value);
+
+        this.setHorizontalAxisProp(axisProps);
+    }
+
+    onHorAxisPos(value) {
+        let axisProps = this.getHorizontalAxisProp();
+
+        axisProps.putLabelsPosition(+value);
+
+        this.setHorizontalAxisProp(axisProps);
+    }
+
+    onHorAxisReverse(value) {
+        let axisProps = this.getHorizontalAxisProp();
+
+        axisProps.putInvertCatOrder(value);
+
+        this.setHorizontalAxisProp(axisProps);
+    }
+
+    onHorAxisTickMajor(value) {
+        let axisProps = this.getHorizontalAxisProp();
+
+        axisProps.putMajorTickMark(+value);
+
+        this.setHorizontalAxisProp(axisProps);
+    }
+
+    onHorAxisTickMinor(value) {
+        let axisProps = this.getHorizontalAxisProp();
+
+        axisProps.putMinorTickMark(+value);
+
+        this.setHorizontalAxisProp(axisProps);
+    }
+
+    onHorAxisLabelPos(value) {
+        let axisProps = this.getHorizontalAxisProp();
+
+        axisProps.putTickLabelsPos(+value);
+
+        this.setHorizontalAxisProp(axisProps);
     }
 
     render () {
@@ -174,6 +389,26 @@ class EditChartController extends Component {
                 onStyle={this.onStyle}
                 onRemoveChart={this.onRemoveChart}
                 setLayoutProperty={this.setLayoutProperty}
+                initVertAxis={this.initVertAxis}
+                onVerAxisMinValue={this.onVerAxisMinValue}
+                onVerAxisMaxValue={this.onVerAxisMaxValue}
+                onVerAxisCrossType={this.onVerAxisCrossType}
+                onVerAxisCrossValue={this.onVerAxisCrossValue}
+                onVerAxisDisplayUnits={this.onVerAxisDisplayUnits}
+                onVerAxisReverse={this.onVerAxisReverse}
+                onVerAxisTickMajor={this.onVerAxisTickMajor}
+                onVerAxisTickMinor={this.onVerAxisTickMinor}
+                onVerAxisLabelPos={this.onVerAxisLabelPos}
+                initHorAxis={this.initHorAxis}
+                getHorizontalAxisProp={this.getHorizontalAxisProp}
+                setHorizontalAxisProp={this.setHorizontalAxisProp}
+                onHorAxisCrossType={this.onHorAxisCrossType}
+                onHorAxisCrossValue={this.onHorAxisCrossValue}
+                onHorAxisPos={this.onHorAxisPos}
+                onHorAxisReverse={this.onHorAxisReverse}
+                onHorAxisTickMajor={this.onHorAxisTickMajor}
+                onHorAxisTickMinor={this.onHorAxisTickMinor}
+                onHorAxisLabelPos={this.onHorAxisLabelPos}
             />
         )
     }

apps/spreadsheeteditor/mobile/src/store/chartSettings.js

@@ -75,6 +75,72 @@ export class storeChartSettings {
         this.chartDataLabel = value;
     }
 
+    @observable axisVertCrosses = undefined;
+    @observable axisHorCrosses = undefined;
+    @observable displayUnits = undefined;
+    @observable valuesVertReverseOrder = undefined;
+    @observable valuesHorReverseOrder = undefined;
+    @observable vertMajorType = undefined;
+    @observable vertMinorType = undefined;
+    @observable vertLabelPosition = undefined;
+    @observable horMajorType = undefined;
+    @observable horMinorType = undefined;
+    @observable horLabelPosition = undefined;
+    @observable axisPosition = undefined;
+
+    // Vertical
+
+    @action changeVertAxisCrosses(value) {
+        this.axisVertCrosses = value;
+    }
+
+    @action changeDisplayUnits(value) {
+        this.displayUnits = value;
+    }
+
+    @action toggleVertValuesReverseOrder(value) {
+        this.valuesVertReverseOrder = value;
+    }
+
+    @action changeVertMajorType(value)
+    {
+        this.vertMajorType = value;
+    }
+
+    @action changeVertMinorType(value) {
+        this.vertMinorType = value;
+    }
+
+    @action changeVertLabelPosition(value) {
+        this.vertLabelPosition = value;
+    }
+
+    // Horizontal
+
+    @action changeHorAxisCrosses(value) {
+        this.axisHorCrosses = value;
+    }
+
+    @action toggleHorValuesReverseOrder(value) {
+        this.valuesHorReverseOrder = value;
+    }
+
+    @action changeHorMajorType(value){
+        this.horMajorType = value;
+    }
+
+    @action changeHorMinorType(value) {
+        this.horMinorType = value;
+    }
+
+    @action changeHorLabelPosition(value) {
+        this.horLabelPosition = value;
+    }
+
+    @action changeAxisPosition(value) {
+        this.axisPosition = value;
+    }
+
     @observable chartStyles = null;
 
     @action clearChartStyles () {

apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx

@@ -15,7 +15,7 @@ import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorder
 import { PageImageReplace, PageImageReorder, PageLinkSettings } from './EditImage';
 import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell, FontsCell, TextFormatCell, TextOrientationCell, BorderStyleCell, BorderColorCell, CustomBorderColorCell, BorderSizeCell, PageFormatCell, PageAccountingFormatCell, PageCurrencyFormatCell, PageDateFormatCell, PageTimeFormatCell } from './EditCell';
 import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor } from './EditText';
-import { PageChartStyle, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartLayout, PageChartLegend, PageChartTitle, PageChartHorizontalAxisTitle, PageChartVerticalAxisTitle, PageChartHorizontalGridlines, PageChartVerticalGridlines, PageChartDataLabels } from './EditChart';
+import { PageChartStyle, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartLayout, PageChartLegend, PageChartTitle, PageChartHorizontalAxisTitle, PageChartVerticalAxisTitle, PageChartHorizontalGridlines, PageChartVerticalGridlines, PageChartDataLabels, PageChartVerticalAxis, PageChartVertAxisCrosses, PageChartDisplayUnits, PageChartVertMajorType, PageChartVertMinorType, PageChartVertLabelPosition, PageChartHorizontalAxis, PageChartHorAxisCrosses, PageChartHorAxisPosition, PageChartHorMajorType, PageChartHorMinorType, PageChartHorLabelPosition } from './EditChart';
 
 const routes = [
 
@@ -200,8 +200,63 @@ const routes = [
     {
         path: '/edit-data-labels/',
         component: PageChartDataLabels
+    },
+
+    // Vertical Axis
+
+    {
+        path: '/edit-chart-vertical-axis/',
+        component: PageChartVerticalAxis
+    },
+    {
+        path: '/edit-vert-axis-crosses/',
+        component: PageChartVertAxisCrosses
+    },
+    {
+        path: '/edit-display-units/',
+        component: PageChartDisplayUnits
+    },
+    {
+        path: '/edit-vert-major-type/',
+        component: PageChartVertMajorType
+    },
+    {
+        path: '/edit-vert-minor-type/',
+        component: PageChartVertMinorType
+    },
+    {
+        path: '/edit-vert-label-position/',
+        component: PageChartVertLabelPosition
+    },
+
+    // Horizontal Axis
+
+    {
+        path: '/edit-chart-horizontal-axis/',
+        component: PageChartHorizontalAxis
+    },
+    {
+        path: '/edit-hor-axis-crosses/',
+        component: PageChartHorAxisCrosses
+    },
+    {
+        path: '/edit-hor-axis-position/',
+        component: PageChartHorAxisPosition
+    },
+    {
+        path: '/edit-hor-major-type/',
+        component: PageChartHorMajorType
+    },
+    {
+        path: '/edit-hor-minor-type/',
+        component: PageChartHorMinorType
+    },
+    {
+        path: '/edit-hor-label-position/',
+        component: PageChartHorLabelPosition
     }
 
+
 ];
 
 const EmptyEditLayout = () => {

apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx

@@ -1,6 +1,6 @@
-import React, {Fragment, useState} from 'react';
+import React, {Fragment, useState, useEffect} from 'react';
 import {observer, inject} from "mobx-react";
-import {List, ListItem, ListButton, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavTitle, NavRight} from 'framework7-react';
+import {List, ListItem, ListButton, ListInput, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavTitle, NavRight} 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";
@@ -329,8 +329,8 @@ const PageLayout = props => {
         2: `${_t.textTop}`,
         3: `${_t.textRight}`,
         4: `${_t.textBottom}`,
-        // 5: `${_t.textLeftOverlay}`,
+        5: `${_t.textLeftOverlay}`,
-        // 6: `${_t.textRightOverlay}`
+        6: `${_t.textRightOverlay}`
     }
 
     const chartLayoutAxisTitleHorizontal = {
@@ -372,9 +372,6 @@ const PageLayout = props => {
         7: `${_t.textOuterTop}`
     }
 
-    console.log(chartProperties.getVertGridLines());
-
-
     return (
         <Page>
             <Navbar title={_t.textLayout} backLink={_t.textBack} />
@@ -602,6 +599,593 @@ const PageDataLabels = props => {
     )
 }
 
+const PageVerticalAxis = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const storeChartSettings = props.storeChartSettings;
+    const axisProps = props.initVertAxis();
+    const crossValue = axisProps.getCrossesRule();
+
+    const axisCrosses = [
+        {display: `${_t.textAuto}`, value: Asc.c_oAscCrossesRule.auto},
+        {display: `${_t.textValue}`, value: Asc.c_oAscCrossesRule.value},
+        {display: `${_t.textMinimumValue}`, value: Asc.c_oAscCrossesRule.minValue},
+        {display: `${_t.textMaximumValue}`, value: Asc.c_oAscCrossesRule.maxValue}
+    ];
+
+    const vertAxisDisplayUnits = [
+        {display: `${_t.textNone}`, value: Asc.c_oAscValAxUnits.none},
+        {display: `${_t.textHundreds}`, value: Asc.c_oAscValAxUnits.HUNDREDS},
+        {display: `${_t.textThousands}`, value: Asc.c_oAscValAxUnits.THOUSANDS},
+        {display: `${_t.textTenThousands}`, value: Asc.c_oAscValAxUnits.TEN_THOUSANDS},
+        {display: `${_t.textHundredThousands}`, value: Asc.c_oAscValAxUnits.HUNDRED_THOUSANDS},
+        {display: `${_t.textMillions}`, value: Asc.c_oAscValAxUnits.MILLIONS},
+        {display: `${_t.textTenMillions}`, value: Asc.c_oAscValAxUnits.TEN_MILLIONS},
+        {display: `${_t.textHundredMil}`, value: Asc.c_oAscValAxUnits.HUNDRED_MILLIONS},
+        {display: `${_t.textBillions}`, value: Asc.c_oAscValAxUnits.BILLIONS},
+        {display: `${_t.textTrillions}`, value: Asc.c_oAscValAxUnits.TRILLIONS}
+    ];
+
+    const tickOptions = [
+        {display: `${_t.textNone}`, value: Asc.c_oAscTickMark.TICK_MARK_NONE},
+        {display: `${_t.textCross}`, value: Asc.c_oAscTickMark.TICK_MARK_CROSS},
+        {display: `${_t.textIn}`, value: Asc.c_oAscTickMark.TICK_MARK_IN},
+        {display: `${_t.textOut}`, value: Asc.c_oAscTickMark.TICK_MARK_OUT}
+    ];
+
+    const verticalAxisLabelsPosition = [
+        {display: `${_t.textNone}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_NONE},
+        {display: `${_t.textLow}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_LOW},
+        {display: `${_t.textHigh}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_HIGH},
+        {display: `${_t.textNextToAxis}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_NEXT_TO}
+    ];
+
+    const defineCurrentAxisCrosses = () => axisCrosses.find(elem => elem.value === crossValue);
+    const currentAxisCrosses = defineCurrentAxisCrosses();
+
+    if(!storeChartSettings.axisVertCrosses) {
+        storeChartSettings.changeVertAxisCrosses(currentAxisCrosses);
+    }
+
+    // console.log(storeChartSettings.axisCrosses);
+
+    const defineCurrentDisplayUnits = () => vertAxisDisplayUnits.find(elem => elem.value ===  axisProps.getDispUnitsRule());
+    const currentDisplayUnits = defineCurrentDisplayUnits();
+
+    if(!storeChartSettings.displayUnits) {
+        storeChartSettings.changeDisplayUnits(currentDisplayUnits);
+    }
+
+    // console.log(storeChartSettings.displayUnits);
+
+    if(storeChartSettings.valuesVertReverseOrder == undefined) {
+        storeChartSettings.toggleVertValuesReverseOrder(axisProps.getInvertValOrder());
+    }
+
+    const valueMajorType = axisProps.getMajorTickMark();
+    const valueMinorType = axisProps.getMinorTickMark();
+    const defineCurrentTickOption = (elemType) => tickOptions.find(elem => elem.value === elemType);
+    const currentMajorType = defineCurrentTickOption(valueMajorType);
+
+    if(!storeChartSettings.vertMajorType) {
+        storeChartSettings.changeVertMajorType(currentMajorType);
+    }
+
+    const currentMinorType = defineCurrentTickOption(valueMinorType);
+
+    if(!storeChartSettings.vertMinorType) {
+        storeChartSettings.changeVertMinorType(currentMinorType);
+    }
+
+    // console.log(storeChartSettings.vertMajorType);
+    // console.log(storeChartSettings.vertMinorType);
+
+    const defineLabelsPosition = () => verticalAxisLabelsPosition.find(elem => elem.value === axisProps.getTickLabelsPos());
+    const currentLabelsPosition = defineLabelsPosition();
+
+    if(!storeChartSettings.vertLabelPosition) {
+        storeChartSettings.changeVertLabelPosition(currentLabelsPosition);
+    }
+
+    // console.log(storeChartSettings.vertLabelPosition);
+
+    const [minValue, setMinValue] = useState(axisProps.getMinValRule() == Asc.c_oAscValAxisRule.auto ? '' : axisProps.getMinVal());
+    const [maxValue, setMaxValue] = useState(axisProps.getMaxValRule() == Asc.c_oAscValAxisRule.auto ? '' : axisProps.getMaxVal());
+
+    const currentCrossesValue = axisProps.getCrosses();
+    const [crossesValue, setCrossesValue] = useState(!currentCrossesValue ? '' : currentCrossesValue);
+
+    return (
+        <Page>
+            <Navbar title={_t.textAxisOptions} backLink={_t.textBack} />
+            <List>
+                <ListItem title={_t.textMinimumValue}>
+                    <div slot="after">
+                        <div className="item-input">
+                            <input type="number" className="field right placeholder-color" value={minValue} 
+                                onChange={e => props.onVerAxisMinValue(e.target.value)}
+                                onInput={e => setMinValue(e.target.value)} placeholder="Auto" />
+                        </div>
+                    </div>
+                </ListItem>
+                <ListItem title={_t.textMaximumValue}>
+                    <div slot="after">
+                        <div className="item-input">
+                            <input type="number" className="field right placeholder-color" value={maxValue} 
+                                onChange={e => props.onVerAxisMaxValue(e.target.value)} 
+                                onInput={e => setMaxValue(e.target.value)} placeholder="Auto" />
+                        </div>
+                    </div>
+                </ListItem>
+            </List>
+            <List>
+                <ListItem title={_t.textAxisCrosses} link="/edit-vert-axis-crosses/" after={storeChartSettings.axisVertCrosses.display} routeProps={{
+                    axisCrosses,
+                    onVerAxisCrossType: props.onVerAxisCrossType
+                }}></ListItem>
+                {storeChartSettings.axisVertCrosses.value == Asc.c_oAscCrossesRule.value ? (
+                    <ListItem title={_t.textCrossesValue}>
+                        <div slot="after">
+                            <div className="item-input">
+                                <input type="number" className="field right placeholder-color" value={crossesValue} 
+                                    onChange={e => props.onVerAxisCrossValue(e.target.value)} 
+                                    onInput={e => setCrossesValue(e.target.value)} placeholder="0" />
+                            </div>
+                        </div>
+                    </ListItem>
+                ) : null}
+            </List>
+            <List>
+                <ListItem title={_t.textDisplayUnits} link="/edit-display-units/" after={storeChartSettings.displayUnits.display} routeProps={{
+                    vertAxisDisplayUnits,
+                    onVerAxisDisplayUnits: props.onVerAxisDisplayUnits
+                }}></ListItem>
+                <ListItem title={_t.textValuesInReverseOrder}>
+                    <div slot="after">
+                        <Toggle checked={storeChartSettings.valuesVertReverseOrder} 
+                            onToggleChange={() => {
+                                storeChartSettings.toggleVertValuesReverseOrder(!storeChartSettings.valuesVertReverseOrder);
+                                props.onVerAxisReverse(!storeChartSettings.valuesVertReverseOrder);
+                            }} />
+                    </div>
+                </ListItem>
+            </List>
+            <BlockTitle>{_t.textTickOptions}</BlockTitle>
+            <List>
+                <ListItem title={_t.textMajorType} after={storeChartSettings.vertMajorType.display} link="/edit-vert-major-type/" routeProps={{
+                    tickOptions,
+                    onVerAxisTickMajor: props.onVerAxisTickMajor
+                }}></ListItem>
+                <ListItem title={_t.textMinorType} after={storeChartSettings.vertMinorType.display} link="/edit-vert-minor-type/" routeProps={{
+                    tickOptions,
+                    onVerAxisTickMinor: props.onVerAxisTickMinor
+                }}></ListItem>
+            </List>
+            <BlockTitle>{_t.textLabelOptions}</BlockTitle>
+            <List>
+                <ListItem title={_t.textLabelPosition} after={storeChartSettings.vertLabelPosition.display} link="/edit-vert-label-position/" routeProps={{
+                    verticalAxisLabelsPosition,
+                    onVerAxisLabelPos: props.onVerAxisLabelPos
+                }}></ListItem>
+            </List>
+        </Page>
+    )
+}
+
+const PageVertAxisCrosses = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const storeChartSettings = props.storeChartSettings;
+    const currentAxisCrosses = storeChartSettings.axisVertCrosses;
+    const axisCrosses = props.axisCrosses;
+
+    return (    
+        <Page>
+            <Navbar title={_t.textAxisCrosses} backLink={_t.textBack} />
+            <List>
+                {axisCrosses.map((elem, index) => {
+                    return (
+                        <ListItem title={elem.display} key={index} radio
+                            checked={currentAxisCrosses.value === elem.value} 
+                            onChange={() => { 
+                                storeChartSettings.changeVertAxisCrosses(elem);
+                                props.onVerAxisCrossType(elem.value);
+                            }}>
+                        </ListItem>
+                    )
+                })}
+            </List>
+        </Page>
+    )
+}
+
+const PageDisplayUnits = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const storeChartSettings = props.storeChartSettings;
+    const displayUnits = storeChartSettings.displayUnits;
+    const vertAxisDisplayUnits = props.vertAxisDisplayUnits;
+    
+    return (
+        <Page>
+            <Navbar title={_t.textDisplayUnits} backLink={_t.textBack} />
+            <List>
+                {vertAxisDisplayUnits.map((elem, index) => {
+                    return (
+                        <ListItem title={elem.display} key={index} radio
+                            checked={displayUnits.value === elem.value}
+                            onChange={() => {
+                                storeChartSettings.changeDisplayUnits(elem);
+                                props.onVerAxisDisplayUnits(elem.value);
+                            }}>
+                        </ListItem>
+                    )
+                })}
+            </List>
+        </Page>
+    )
+}
+
+const PageVertMajorType = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const storeChartSettings = props.storeChartSettings;
+    const vertMajorType = storeChartSettings.vertMajorType;
+    const tickOptions = props.tickOptions;
+
+    return (
+        <Page>
+            <Navbar title={_t.textMajorType} backLink={_t.textBack} />
+            <List>
+                {tickOptions.map((elem, index) => {
+                    return (
+                        <ListItem title={elem.display} key={index} radio
+                            checked={vertMajorType.value === elem.value}
+                            onChange={() => {
+                                storeChartSettings.changeVertMajorType(elem);
+                                props.onVerAxisTickMajor(elem.value);
+                            }}>
+                        </ListItem>
+                    )
+                })}
+            </List>
+        </Page>
+    )
+}
+
+const PageVertMinorType = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const storeChartSettings = props.storeChartSettings;
+    const vertMinorType = storeChartSettings.vertMinorType;
+    const tickOptions = props.tickOptions;
+
+    return (
+        <Page>
+            <Navbar title={_t.textMinorType} backLink={_t.textBack} />
+            <List>
+                {tickOptions.map((elem, index) => {
+                    return (
+                        <ListItem title={elem.display} key={index} radio
+                            checked={vertMinorType.value === elem.value}
+                            onChange={() => {
+                                storeChartSettings.changeVertMinorType(elem);
+                                props.onVerAxisTickMinor(elem.value);
+                            }}>
+                        </ListItem>
+                    )
+                })}
+            </List>
+        </Page>
+    )
+}
+
+const PageVertLabelPosition = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const storeChartSettings = props.storeChartSettings;
+    const vertLabelPosition = storeChartSettings.vertLabelPosition;
+    const verticalAxisLabelsPosition = props.verticalAxisLabelsPosition;
+
+    return (
+        <Page>
+            <Navbar title={_t.textLabelPosition} backLink={_t.textBack} />
+            <List>
+                {verticalAxisLabelsPosition.map((elem, index) => {
+                    return (
+                        <ListItem title={elem.display} key={index} radio
+                            checked={vertLabelPosition.value === elem.value}
+                            onChange={() => {
+                                storeChartSettings.changeVertLabelPosition(elem);
+                                props.onVerAxisLabelPos(elem.value);
+                            }}>
+                        </ListItem>
+                    )
+                })}
+            </List>
+        </Page>
+    )
+}
+
+const PageHorizontalAxis = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const storeChartSettings = props.storeChartSettings;
+    const axisProps = props.initHorAxis();
+    const crossValue = axisProps.getCrossesRule();
+
+    const axisCrosses = [
+        {display: `${_t.textAuto}`, value: Asc.c_oAscCrossesRule.auto},
+        {display: `${_t.textValue}`, value: Asc.c_oAscCrossesRule.value},
+        {display: `${_t.textMinimumValue}`, value: Asc.c_oAscCrossesRule.minValue},
+        {display: `${_t.textMaximumValue}`, value: Asc.c_oAscCrossesRule.maxValue}
+    ];
+
+    const tickOptions = [
+        {display: `${_t.textNone}`, value: Asc.c_oAscTickMark.TICK_MARK_NONE},
+        {display: `${_t.textCross}`, value: Asc.c_oAscTickMark.TICK_MARK_CROSS},
+        {display: `${_t.textIn}`, value: Asc.c_oAscTickMark.TICK_MARK_IN},
+        {display: `${_t.textOut}`, value: Asc.c_oAscTickMark.TICK_MARK_OUT}
+    ];
+
+    const horAxisLabelsPosition = [
+        {display: `${_t.textNone}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_NONE},
+        {display: `${_t.textLow}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_LOW},
+        {display: `${_t.textHigh}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_HIGH},
+        {display: `${_t.textNextToAxis}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_NEXT_TO}
+    ];
+
+    const horAxisPosition = [
+        {display: `${_t.textOnTickMarks}`, value: Asc.c_oAscLabelsPosition.byDivisions},
+        {display: `${_t.textBetweenTickMarks}`, value: Asc.c_oAscLabelsPosition.betweenDivisions}
+    ];
+
+    const defineCurrentAxisCrosses = () => axisCrosses.find(elem => elem.value === crossValue);
+    const currentAxisCrosses = defineCurrentAxisCrosses();
+
+    if(!storeChartSettings.axisHorCrosses) {
+        storeChartSettings.changeHorAxisCrosses(currentAxisCrosses);
+    }
+
+    console.log(storeChartSettings.axisHorCrosses);
+
+    const defineAxisPosition = () => horAxisPosition.find(elem => elem.value === axisProps.getLabelsPosition());
+    const axisPosition = defineAxisPosition();
+
+    if(!storeChartSettings.axisPosition) {
+        storeChartSettings.changeAxisPosition(axisPosition);
+    }
+
+    console.log(storeChartSettings.axisPosition)
+
+    if(storeChartSettings.valuesHorReverseOrder == undefined) {
+        storeChartSettings.toggleHorValuesReverseOrder(axisProps.getInvertCatOrder());
+    }
+
+    console.log(storeChartSettings.valuesHorReverseOrder);
+
+    const valueMajorType = axisProps.getMajorTickMark();
+    const valueMinorType = axisProps.getMinorTickMark();
+    const defineCurrentTickOption = (elemType) => tickOptions.find(elem => elem.value === elemType);
+    const currentMajorType = defineCurrentTickOption(valueMajorType);
+
+    if(!storeChartSettings.horMajorType) {
+        storeChartSettings.changeHorMajorType(currentMajorType);
+    }
+
+    const currentMinorType = defineCurrentTickOption(valueMinorType);
+
+    if(!storeChartSettings.horMinorType) {
+        storeChartSettings.changeHorMinorType(currentMinorType);
+    }
+
+    console.log(storeChartSettings.horMajorType);
+    console.log(storeChartSettings.horMinorType);
+
+    const defineLabelsPosition = () => horAxisLabelsPosition.find(elem => elem.value === axisProps.getTickLabelsPos());
+    const currentLabelsPosition = defineLabelsPosition();
+
+    if(!storeChartSettings.horLabelPosition) {
+        storeChartSettings.changeHorLabelPosition(currentLabelsPosition);
+    }
+
+    console.log(storeChartSettings.horLabelPosition);
+
+    const currentCrossesValue = axisProps.getCrosses();
+    const [crossesValue, setCrossesValue] = useState(!currentCrossesValue ? '' : currentCrossesValue);
+
+    return (
+        <Page>
+            <Navbar title={_t.textAxisOptions} backLink={_t.textBack} />
+            <List>
+                <ListItem title={_t.textAxisCrosses} link="/edit-hor-axis-crosses/" after={storeChartSettings.axisHorCrosses.display} routeProps={{
+                    axisCrosses,
+                    onHorAxisCrossType: props.onHorAxisCrossType
+                }}></ListItem>
+                {storeChartSettings.axisHorCrosses.value == Asc.c_oAscCrossesRule.value ? (
+                    <ListItem title={_t.textCrossesValue}>
+                        <div slot="after">
+                            <div className="item-input">
+                                <input type="number" className="field right placeholder-color" value={crossesValue} 
+                                    onChange={e => props.onHorAxisCrossValue(e.target.value)} 
+                                    onInput={e => setCrossesValue(e.target.value)} placeholder="0" />
+                            </div>
+                        </div>
+                    </ListItem>
+                ) : null}
+            </List>
+            <List>
+                <ListItem title={_t.textAxisPosition} link="/edit-hor-axis-position/" after={storeChartSettings.axisPosition.display} routeProps={{
+                    horAxisPosition,
+                    onHorAxisPos: props.onHorAxisPos
+                }}></ListItem>
+                <ListItem title={_t.textValuesInReverseOrder}>
+                    <div slot="after">
+                        <Toggle checked={storeChartSettings.valuesHorReverseOrder} 
+                            onToggleChange={() => {
+                                storeChartSettings.toggleHorValuesReverseOrder(!storeChartSettings.valuesHorReverseOrder);
+                                props.onHorAxisReverse(!storeChartSettings.valuesHorReverseOrder);
+                            }} />
+                    </div>
+                </ListItem>
+            </List>
+            <BlockTitle>{_t.textTickOptions}</BlockTitle>
+            <List>
+                <ListItem title={_t.textMajorType} after={storeChartSettings.horMajorType.display} link="/edit-hor-major-type/" routeProps={{
+                    tickOptions,
+                    onHorAxisTickMajor: props.onHorAxisTickMajor
+                }}></ListItem>
+                <ListItem title={_t.textMinorType} after={storeChartSettings.horMinorType.display} link="/edit-hor-minor-type/" routeProps={{
+                    tickOptions,
+                    onHorAxisTickMinor: props.onHorAxisTickMinor
+                }}></ListItem>
+            </List>
+            <BlockTitle>{_t.textLabelOptions}</BlockTitle>
+            <List>
+                <ListItem title={_t.textLabelPosition} after={storeChartSettings.horLabelPosition.display} link="/edit-hor-label-position/" routeProps={{
+                    horAxisLabelsPosition,
+                    onHorAxisLabelPos: props.onHorAxisLabelPos
+                }}></ListItem>
+            </List>
+        </Page>
+    )
+}
+
+const PageHorAxisCrosses = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const storeChartSettings = props.storeChartSettings;
+    const currentAxisCrosses = storeChartSettings.axisHorCrosses;
+    const axisCrosses = props.axisCrosses;
+
+    return (    
+        <Page>
+            <Navbar title={_t.textAxisCrosses} backLink={_t.textBack} />
+            <List>
+                {axisCrosses.map((elem, index) => {
+                    return (
+                        <ListItem title={elem.display} key={index} radio
+                            checked={currentAxisCrosses.value === elem.value} 
+                            onChange={() => { 
+                                storeChartSettings.changeHorAxisCrosses(elem);
+                                props.onHorAxisCrossType(elem.value);
+                            }}>
+                        </ListItem>
+                    )
+                })}
+            </List>
+        </Page>
+    )
+}
+
+const PageHorAxisPosition = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const storeChartSettings = props.storeChartSettings;
+    const axisPosition = storeChartSettings.axisPosition;
+    const horAxisPosition = props.horAxisPosition;
+
+    return (    
+        <Page>
+            <Navbar title={_t.textAxisPosition} backLink={_t.textBack} />
+            <List>
+                {horAxisPosition.map((elem, index) => {
+                    return (
+                        <ListItem title={elem.display} key={index} radio
+                            checked={axisPosition.value === elem.value} 
+                            onChange={() => { 
+                                storeChartSettings.changeAxisPosition(elem);
+                                props.onHorAxisPos(elem.value);
+                            }}>
+                        </ListItem>
+                    )
+                })}
+            </List>
+        </Page>
+    )
+}
+
+const PageHorMajorType = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const storeChartSettings = props.storeChartSettings;
+    const horMajorType = storeChartSettings.horMajorType;
+    const tickOptions = props.tickOptions;
+
+    return (
+        <Page>
+            <Navbar title={_t.textMajorType} backLink={_t.textBack} />
+            <List>
+                {tickOptions.map((elem, index) => {
+                    return (
+                        <ListItem title={elem.display} key={index} radio
+                            checked={horMajorType.value === elem.value}
+                            onChange={() => {
+                                storeChartSettings.changeHorMajorType(elem);
+                                props.onHorAxisTickMajor(elem.value);
+                            }}>
+                        </ListItem>
+                    )
+                })}
+            </List>
+        </Page>
+    )
+}
+
+const PageHorMinorType = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const storeChartSettings = props.storeChartSettings;
+    const horMinorType = storeChartSettings.horMinorType;
+    const tickOptions = props.tickOptions;
+
+    return (
+        <Page>
+            <Navbar title={_t.textMinorType} backLink={_t.textBack} />
+            <List>
+                {tickOptions.map((elem, index) => {
+                    return (
+                        <ListItem title={elem.display} key={index} radio
+                            checked={horMinorType.value === elem.value}
+                            onChange={() => {
+                                storeChartSettings.changeHorMinorType(elem);
+                                props.onHorAxisTickMinor(elem.value);
+                            }}>
+                        </ListItem>
+                    )
+                })}
+            </List>
+        </Page>
+    )
+}
+
+const PageHorLabelPosition = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const storeChartSettings = props.storeChartSettings;
+    const horLabelPosition = storeChartSettings.horLabelPosition;
+    const horAxisLabelsPosition = props.horAxisLabelsPosition;
+
+    return (
+        <Page>
+            <Navbar title={_t.textLabelPosition} backLink={_t.textBack} />
+            <List>
+                {horAxisLabelsPosition.map((elem, index) => {
+                    return (
+                        <ListItem title={elem.display} key={index} radio
+                            checked={horLabelPosition.value === elem.value}
+                            onChange={() => {
+                                storeChartSettings.changeHorLabelPosition(elem);
+                                props.onHorAxisLabelPos(elem.value);
+                            }}>
+                        </ListItem>
+                    )
+                })}
+            </List>
+        </Page>
+    )
+}
+
 const EditChart = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
@@ -629,8 +1213,28 @@ const EditChart = props => {
                     disableSetting, 
                     setLayoutProperty: props.setLayoutProperty
                 }}></ListItem>
-                <ListItem title={_t.textVerticalAxis} link='/edit-chart-vertical-axis/' disabled={disableSetting}></ListItem>
+                <ListItem title={_t.textVerticalAxis} link='/edit-chart-vertical-axis/' disabled={disableSetting} routeProps={{
-                <ListItem title={_t.textHorizontalAxis} link='/edit-chart-horizontal-axis/' disabled={disableSetting}></ListItem>
+                    initVertAxis: props.initVertAxis,
+                    onVerAxisMinValue: props.onVerAxisMinValue,
+                    onVerAxisMaxValue: props.onVerAxisMaxValue,
+                    onVerAxisCrossType: props.onVerAxisCrossType,
+                    onVerAxisCrossValue: props.onVerAxisCrossValue,
+                    onVerAxisDisplayUnits: props.onVerAxisDisplayUnits,
+                    onVerAxisReverse: props.onVerAxisReverse,
+                    onVerAxisTickMajor: props.onVerAxisTickMajor,
+                    onVerAxisTickMinor: props.onVerAxisTickMinor,
+                    onVerAxisLabelPos: props.onVerAxisLabelPos
+                }}></ListItem>
+                <ListItem title={_t.textHorizontalAxis} link='/edit-chart-horizontal-axis/' disabled={disableSetting} routeProps={{
+                    initHorAxis: props.initHorAxis,
+                    onHorAxisCrossType: props.onHorAxisCrossType,
+                    onHorAxisCrossValue: props.onHorAxisCrossValue,
+                    onHorAxisPos: props.onHorAxisPos,
+                    onHorAxisReverse: props.onHorAxisReverse,
+                    onHorAxisTickMajor: props.onHorAxisTickMajor,
+                    onHorAxisTickMinor: props.onHorAxisTickMinor,
+                    onHorAxisLabelPos: props.onHorAxisLabelPos
+                }}></ListItem>
                 <ListItem title={_t.textReorder} link='/edit-chart-reorder/' routeProps={{
                     onReorder: props.onReorder
                 }}></ListItem>
@@ -651,10 +1255,22 @@ const PageChartLayout = inject("storeChartSettings", "storeFocusObjects")(observ
 const PageChartLegend = inject("storeChartSettings")(observer(PageLegend));
 const ChartTitle = inject("storeChartSettings")(observer(PageChartTitle));
 const PageChartHorizontalAxisTitle = inject("storeChartSettings")(observer(PageHorizontalAxisTitle));
-const PageChartVerticalAxisTitle = inject("storeChartSettings")(observer(PageVerticalAxisTitle));
+const PageChartVerticalAxisTitle = inject("storeChartSettings", "storeFocusObjects")(observer(PageVerticalAxisTitle));
 const PageChartHorizontalGridlines = inject("storeChartSettings")(observer(PageHorizontalGridlines));
 const PageChartVerticalGridlines = inject("storeChartSettings")(observer(PageVerticalGridlines));
 const PageChartDataLabels = inject("storeChartSettings")(observer(PageDataLabels));
+const PageChartVerticalAxis = inject("storeChartSettings")(observer(PageVerticalAxis));
+const PageChartVertAxisCrosses = inject("storeChartSettings")(observer(PageVertAxisCrosses));
+const PageChartDisplayUnits = inject("storeChartSettings")(observer(PageDisplayUnits));
+const PageChartVertMajorType = inject("storeChartSettings")(observer(PageVertMajorType));
+const PageChartVertMinorType = inject("storeChartSettings")(observer(PageVertMinorType));
+const PageChartVertLabelPosition = inject("storeChartSettings")(observer(PageVertLabelPosition));
+const PageChartHorizontalAxis = inject("storeChartSettings")(observer(PageHorizontalAxis));
+const PageChartHorAxisCrosses = inject("storeChartSettings")(observer(PageHorAxisCrosses));
+const PageChartHorAxisPosition = inject("storeChartSettings")(observer(PageHorAxisPosition));
+const PageChartHorMajorType = inject("storeChartSettings")(observer(PageHorMajorType));
+const PageChartHorMinorType = inject("storeChartSettings")(observer(PageHorMinorType));
+const PageChartHorLabelPosition = inject("storeChartSettings")(observer(PageHorLabelPosition));
 
 export {
     PageEditChart as EditChart,
@@ -670,5 +1286,17 @@ export {
     PageChartVerticalAxisTitle,
     PageChartHorizontalGridlines,
     PageChartVerticalGridlines,
-    PageChartDataLabels
+    PageChartDataLabels,
+    PageChartVerticalAxis,
+    PageChartVertAxisCrosses,
+    PageChartDisplayUnits,
+    PageChartVertMajorType,
+    PageChartVertMinorType,
+    PageChartVertLabelPosition, 
+    PageChartHorizontalAxis,
+    PageChartHorAxisCrosses,
+    PageChartHorAxisPosition, 
+    PageChartHorMajorType,
+    PageChartHorMinorType,
+    PageChartHorLabelPosition
 }