diff --git a/packages/app/i18n/en.pot b/packages/app/i18n/en.pot
index a4aedec998..7e5865aec0 100644
--- a/packages/app/i18n/en.pot
+++ b/packages/app/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2020-07-28T10:55:58.947Z\n"
-"PO-Revision-Date: 2020-07-28T10:55:58.947Z\n"
+"POT-Creation-Date: 2020-08-03T14:19:51.289Z\n"
+"PO-Revision-Date: 2020-08-03T14:19:51.289Z\n"
 
 msgid "Rename successful"
 msgstr ""
@@ -746,15 +746,9 @@ msgstr ""
 msgid "Display"
 msgstr ""
 
-msgid "Lines"
-msgstr ""
-
 msgid "Axes"
 msgstr ""
 
-msgid "Vertical (y) axis"
-msgstr ""
-
 msgid "Horizontal (x) axis"
 msgstr ""
 
@@ -770,6 +764,12 @@ msgstr ""
 msgid "Titles"
 msgstr ""
 
+msgid "Lines"
+msgstr ""
+
+msgid "Vertical (y) axis"
+msgstr ""
+
 msgid "Display totals"
 msgstr ""
 
@@ -791,6 +791,12 @@ msgstr ""
 msgid "Parameters"
 msgstr ""
 
+msgid "Lines are not supported yet when using multiple axes"
+msgstr ""
+
+msgid "Vertical axis options are not supported yet when using multiple axes"
+msgstr ""
+
 msgid "Weeks per year"
 msgstr ""
 
diff --git a/packages/app/package.json b/packages/app/package.json
index 6ca93a285e..f18158ead8 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -12,7 +12,7 @@
         "redux-mock-store": "^1.5.4"
     },
     "dependencies": {
-        "@dhis2/analytics": "^8.0.0",
+        "@dhis2/analytics": "^8.1.0",
         "@dhis2/app-runtime": "*",
         "@dhis2/d2-i18n": "*",
         "@dhis2/d2-ui-file-menu": "^7.0.4",
diff --git a/packages/app/src/components/DimensionsPanel/Dialogs/DialogManager.js b/packages/app/src/components/DimensionsPanel/Dialogs/DialogManager.js
index 8ffac2741a..a6c6217d54 100644
--- a/packages/app/src/components/DimensionsPanel/Dialogs/DialogManager.js
+++ b/packages/app/src/components/DimensionsPanel/Dialogs/DialogManager.js
@@ -44,7 +44,7 @@ import {
     sGetUiActiveModalDialog,
     sGetUiParentGraphMap,
     sGetUiType,
-    getAxisIdByDimensionId,
+    sGetAxisIdByDimensionId,
     sGetDimensionIdsFromLayout,
 } from '../../../reducers/ui'
 import { sGetDimensions } from '../../../reducers/dimensions'
@@ -388,7 +388,7 @@ const mapStateToProps = state => ({
     selectedItems: sGetUiItems(state),
     type: sGetUiType(state),
     getAxisIdByDimensionId: dimensionId =>
-        getAxisIdByDimensionId(state, dimensionId),
+        sGetAxisIdByDimensionId(state, dimensionId),
     dimensionIdsInLayout: sGetDimensionIdsFromLayout(state),
 })
 
diff --git a/packages/app/src/components/DimensionsPanel/DimensionsPanel.js b/packages/app/src/components/DimensionsPanel/DimensionsPanel.js
index b14fe5de9f..37b29058b1 100644
--- a/packages/app/src/components/DimensionsPanel/DimensionsPanel.js
+++ b/packages/app/src/components/DimensionsPanel/DimensionsPanel.js
@@ -93,7 +93,7 @@ const mapStateToProps = state => ({
         state
     ),
     getCurrentAxisId: dimensionId =>
-        fromReducers.fromUi.getAxisIdByDimensionId(state, dimensionId),
+        fromReducers.fromUi.sGetAxisIdByDimensionId(state, dimensionId),
 })
 
 const mapDispatchToProps = dispatch => ({
diff --git a/packages/app/src/components/VisualizationOptions/Options/AxisRange.js b/packages/app/src/components/VisualizationOptions/Options/AxisRange.js
index 1dd2a71be1..029732fcd0 100644
--- a/packages/app/src/components/VisualizationOptions/Options/AxisRange.js
+++ b/packages/app/src/components/VisualizationOptions/Options/AxisRange.js
@@ -1,6 +1,6 @@
 import React from 'react'
-
 import i18n from '@dhis2/d2-i18n'
+import PropTypes from 'prop-types'
 import { Label, Help } from '@dhis2/ui'
 
 import RangeAxisMinValue from './RangeAxisMinValue'
@@ -11,18 +11,24 @@ import {
     tabSectionOptionComplexInline,
 } from '../styles/VisualizationOptions.style.js'
 
-const AxisRange = () => (
+const AxisRange = ({ disabled }) => (
     <div className={tabSectionOption.className}>
         <Label>{i18n.t('Axis range')}</Label>
         <div className={tabSectionOptionComplexInline.className}>
-            <RangeAxisMinValue />
+            <RangeAxisMinValue disabled={disabled} />
             {'\u00A0\u2013\u00A0'}
-            <RangeAxisMaxValue />
+            <RangeAxisMaxValue disabled={disabled} />
         </div>
-        <Help>
-            {i18n.t('Values outside of the range will not be displayed')}
-        </Help>
+        {!disabled ? (
+            <Help>
+                {i18n.t('Values outside of the range will not be displayed')}
+            </Help>
+        ) : null}
     </div>
 )
 
+AxisRange.propTypes = {
+    disabled: PropTypes.bool,
+}
+
 export default AxisRange
diff --git a/packages/app/src/components/VisualizationOptions/Options/BaseLine.js b/packages/app/src/components/VisualizationOptions/Options/BaseLine.js
index 73994be18d..c5965a9eda 100644
--- a/packages/app/src/components/VisualizationOptions/Options/BaseLine.js
+++ b/packages/app/src/components/VisualizationOptions/Options/BaseLine.js
@@ -16,16 +16,17 @@ import {
     tabSectionOptionComplexInline,
 } from '../styles/VisualizationOptions.style.js'
 
-export const BaseLine = ({ enabled, onChange }) => (
+export const BaseLine = ({ checked, onChange, disabled }) => (
     <div className={tabSectionOption.className}>
         <Checkbox
-            checked={enabled}
+            checked={checked}
             label={i18n.t('Base line')}
             name="baseLine-toggle"
             onChange={({ checked }) => onChange(checked)}
             dense
+            disabled={disabled}
         />
-        {enabled ? (
+        {checked && !disabled ? (
             <div
                 className={`${tabSectionOptionToggleable.className} ${tabSectionOptionComplexInline.className}`}
             >
@@ -43,16 +44,17 @@ export const BaseLine = ({ enabled, onChange }) => (
 )
 
 BaseLine.propTypes = {
-    enabled: PropTypes.bool.isRequired,
+    checked: PropTypes.bool.isRequired,
     onChange: PropTypes.func.isRequired,
+    disabled: PropTypes.bool,
 }
 
 const mapStateToProps = state => ({
-    enabled: sGetUiOptions(state).baseLine,
+    checked: sGetUiOptions(state).baseLine,
 })
 
 const mapDispatchToProps = dispatch => ({
-    onChange: enabled => dispatch(acSetUiOptions({ baseLine: enabled })),
+    onChange: checked => dispatch(acSetUiOptions({ baseLine: checked })),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(BaseLine)
diff --git a/packages/app/src/components/VisualizationOptions/Options/Legend.js b/packages/app/src/components/VisualizationOptions/Options/Legend.js
index ff732983ce..9e6ad79159 100644
--- a/packages/app/src/components/VisualizationOptions/Options/Legend.js
+++ b/packages/app/src/components/VisualizationOptions/Options/Legend.js
@@ -62,30 +62,34 @@ const Legend = ({
             {legendEnabled ? (
                 <div className={tabSectionOptionToggleable.className}>
                     {!hideStyleOptions ? (
+                        <div className={tabSectionOption.className}>
+                            <FieldSet>
+                                <UiCoreLegend>
+                                    <span
+                                        className={tabSectionTitle.className}
+                                        style={{ marginTop: 8 }}
+                                    >
+                                        {i18n.t('Legend style')}
+                                    </span>
+                                </UiCoreLegend>
+                                <div className={tabSectionOption.className}>
+                                    <LegendDisplayStyle />
+                                </div>
+                            </FieldSet>
+                        </div>
+                    ) : null}
+                    <div>
                         <FieldSet>
                             <UiCoreLegend>
-                                <span
-                                    className={tabSectionTitle.className}
-                                    style={{ marginTop: 8 }}
-                                >
-                                    {i18n.t('Legend style')}
+                                <span className={tabSectionTitle.className}>
+                                    {i18n.t('Legend type')}
                                 </span>
                             </UiCoreLegend>
                             <div className={tabSectionOption.className}>
-                                <LegendDisplayStyle />
+                                <LegendDisplayStrategy />
                             </div>
                         </FieldSet>
-                    ) : null}
-                    <FieldSet>
-                        <UiCoreLegend>
-                            <span className={tabSectionTitle.className}>
-                                {i18n.t('Legend type')}
-                            </span>
-                        </UiCoreLegend>
-                        <div className={tabSectionOption.className}>
-                            <LegendDisplayStrategy />
-                        </div>
-                    </FieldSet>
+                    </div>
                 </div>
             ) : null}
         </div>
diff --git a/packages/app/src/components/VisualizationOptions/Options/RangeAxisDecimals.js b/packages/app/src/components/VisualizationOptions/Options/RangeAxisDecimals.js
index 852d16548a..4b5f49b594 100644
--- a/packages/app/src/components/VisualizationOptions/Options/RangeAxisDecimals.js
+++ b/packages/app/src/components/VisualizationOptions/Options/RangeAxisDecimals.js
@@ -1,14 +1,15 @@
 import React from 'react'
-
 import i18n from '@dhis2/d2-i18n'
+import PropTypes from 'prop-types'
 
 import TextBaseOption from './TextBaseOption'
 
-const RangeAxisDecimals = () => (
+const RangeAxisDecimals = ({ disabled }) => (
     <TextBaseOption
         type="number"
         width="96px"
         label={i18n.t('Decimals')}
+        disabled={disabled}
         placeholder={i18n.t('Auto')}
         option={{
             name: 'rangeAxisDecimals',
@@ -16,4 +17,8 @@ const RangeAxisDecimals = () => (
     />
 )
 
+RangeAxisDecimals.propTypes = {
+    disabled: PropTypes.bool,
+}
+
 export default RangeAxisDecimals
diff --git a/packages/app/src/components/VisualizationOptions/Options/RangeAxisLabel.js b/packages/app/src/components/VisualizationOptions/Options/RangeAxisLabel.js
index a57a1817d2..74f05f23c0 100644
--- a/packages/app/src/components/VisualizationOptions/Options/RangeAxisLabel.js
+++ b/packages/app/src/components/VisualizationOptions/Options/RangeAxisLabel.js
@@ -1,6 +1,6 @@
 import React from 'react'
-
 import i18n from '@dhis2/d2-i18n'
+import PropTypes from 'prop-types'
 
 import TextBaseOption from './TextBaseOption'
 import { options } from '../../../modules/options'
@@ -8,11 +8,12 @@ import { options } from '../../../modules/options'
 const optionName = 'rangeAxisLabel'
 const defaultValue = options[optionName].defaultValue
 
-const RangeAxisLabel = () => (
+const RangeAxisLabel = ({ disabled }) => (
     <TextBaseOption
         type="text"
         width="280px"
         label={i18n.t('Axis title')}
+        disabled={disabled}
         placeholder={i18n.t('Add a title')}
         option={{
             name: optionName,
@@ -22,4 +23,8 @@ const RangeAxisLabel = () => (
     />
 )
 
+RangeAxisLabel.propTypes = {
+    disabled: PropTypes.bool,
+}
+
 export default RangeAxisLabel
diff --git a/packages/app/src/components/VisualizationOptions/Options/RangeAxisMaxValue.js b/packages/app/src/components/VisualizationOptions/Options/RangeAxisMaxValue.js
index 39ae073ed6..08eec0aa81 100644
--- a/packages/app/src/components/VisualizationOptions/Options/RangeAxisMaxValue.js
+++ b/packages/app/src/components/VisualizationOptions/Options/RangeAxisMaxValue.js
@@ -1,14 +1,15 @@
 import React from 'react'
-
 import i18n from '@dhis2/d2-i18n'
+import PropTypes from 'prop-types'
 
 import TextBaseOption from './TextBaseOption'
 
-const RangeAxisMaxValue = () => (
+const RangeAxisMaxValue = ({ disabled }) => (
     <TextBaseOption
         type="number"
         width="100px"
         placeholder={i18n.t('Max')}
+        disabled={disabled}
         option={{
             name: 'rangeAxisMaxValue',
         }}
@@ -16,4 +17,8 @@ const RangeAxisMaxValue = () => (
     />
 )
 
+RangeAxisMaxValue.propTypes = {
+    disabled: PropTypes.bool,
+}
+
 export default RangeAxisMaxValue
diff --git a/packages/app/src/components/VisualizationOptions/Options/RangeAxisMinValue.js b/packages/app/src/components/VisualizationOptions/Options/RangeAxisMinValue.js
index 1d43ad22e8..d2ac196739 100644
--- a/packages/app/src/components/VisualizationOptions/Options/RangeAxisMinValue.js
+++ b/packages/app/src/components/VisualizationOptions/Options/RangeAxisMinValue.js
@@ -1,14 +1,15 @@
 import React from 'react'
-
 import i18n from '@dhis2/d2-i18n'
+import PropTypes from 'prop-types'
 
 import TextBaseOption from './TextBaseOption'
 
-const RangeAxisMinValue = () => (
+const RangeAxisMinValue = ({ disabled }) => (
     <TextBaseOption
         type="number"
         width="100px"
         placeholder={i18n.t('Min')}
+        disabled={disabled}
         option={{
             name: 'rangeAxisMinValue',
         }}
@@ -16,4 +17,8 @@ const RangeAxisMinValue = () => (
     />
 )
 
+RangeAxisMinValue.propTypes = {
+    disabled: PropTypes.bool,
+}
+
 export default RangeAxisMinValue
diff --git a/packages/app/src/components/VisualizationOptions/Options/RangeAxisSteps.js b/packages/app/src/components/VisualizationOptions/Options/RangeAxisSteps.js
index 11f5e670d5..7bd038dcfa 100644
--- a/packages/app/src/components/VisualizationOptions/Options/RangeAxisSteps.js
+++ b/packages/app/src/components/VisualizationOptions/Options/RangeAxisSteps.js
@@ -1,10 +1,10 @@
 import React from 'react'
-
 import i18n from '@dhis2/d2-i18n'
+import PropTypes from 'prop-types'
 
 import TextBaseOption from './TextBaseOption'
 
-export const RangeAxisSteps = () => (
+export const RangeAxisSteps = ({ disabled }) => (
     <TextBaseOption
         type="number"
         width="96px"
@@ -12,6 +12,7 @@ export const RangeAxisSteps = () => (
             'The number of axis steps between the min and max values'
         )}
         label={i18n.t('Steps')}
+        disabled={disabled}
         placeholder={i18n.t('Auto')}
         option={{
             name: 'rangeAxisSteps',
@@ -19,4 +20,8 @@ export const RangeAxisSteps = () => (
     />
 )
 
+RangeAxisSteps.propTypes = {
+    disabled: PropTypes.bool,
+}
+
 export default RangeAxisSteps
diff --git a/packages/app/src/components/VisualizationOptions/Options/RegressionType.js b/packages/app/src/components/VisualizationOptions/Options/RegressionType.js
index bea270a0c0..c9e63aa8e2 100644
--- a/packages/app/src/components/VisualizationOptions/Options/RegressionType.js
+++ b/packages/app/src/components/VisualizationOptions/Options/RegressionType.js
@@ -1,6 +1,6 @@
 import React from 'react'
-
 import i18n from '@dhis2/d2-i18n'
+import PropTypes from 'prop-types'
 
 import SelectBaseOption from './SelectBaseOption'
 import { options } from '../../../modules/options'
@@ -8,10 +8,11 @@ import { options } from '../../../modules/options'
 const optionName = 'regressionType'
 const defaultValue = options[optionName].defaultValue
 
-const RegressionType = () => (
+const RegressionType = ({ disabled }) => (
     <SelectBaseOption
         toggleable={true}
         label={i18n.t('Trend line')}
+        disabled={disabled}
         option={{
             name: optionName,
             defaultValue: defaultValue,
@@ -24,4 +25,8 @@ const RegressionType = () => (
     />
 )
 
+RegressionType.propTypes = {
+    disabled: PropTypes.bool,
+}
+
 export default RegressionType
diff --git a/packages/app/src/components/VisualizationOptions/Options/SelectBaseOption.js b/packages/app/src/components/VisualizationOptions/Options/SelectBaseOption.js
index ed775feb3a..49ff11a49f 100644
--- a/packages/app/src/components/VisualizationOptions/Options/SelectBaseOption.js
+++ b/packages/app/src/components/VisualizationOptions/Options/SelectBaseOption.js
@@ -19,30 +19,30 @@ export const SelectBaseOption = ({
     toggleable,
     value,
     onChange,
+    disabled,
 }) => {
     const defaultValue = option.defaultValue
-    const [enabled, setEnabled] = useState(value !== defaultValue)
+    const [checked, setChecked] = useState(value !== defaultValue)
     const selected = option.items.find(item => item.value === value)?.value
     const onToggle = checked => {
-        setEnabled(checked)
+        setChecked(checked)
 
         onChange(checked ? option.items[0].value : defaultValue)
     }
 
     return (
-        <div
-            className={!toggleable || enabled ? '' : tabSectionOption.className}
-        >
+        <div className={tabSectionOption.className}>
             {toggleable ? (
                 <Checkbox
-                    checked={enabled}
+                    checked={checked}
                     label={label}
                     name={`${option.name}-toggle`}
                     onChange={({ checked }) => onToggle(checked)}
                     dense
+                    disabled={disabled}
                 />
             ) : null}
-            {!toggleable || enabled ? (
+            {(!toggleable || checked) && !disabled ? (
                 <div
                     className={
                         toggleable ? tabSectionOptionToggleable.className : ''
@@ -75,6 +75,7 @@ SelectBaseOption.propTypes = {
     option: PropTypes.object.isRequired,
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
     onChange: PropTypes.func.isRequired,
+    disabled: PropTypes.bool,
     helpText: PropTypes.string,
     label: PropTypes.string,
     toggleable: PropTypes.bool,
diff --git a/packages/app/src/components/VisualizationOptions/Options/TargetLine.js b/packages/app/src/components/VisualizationOptions/Options/TargetLine.js
index 35b3e3330d..112cace2ae 100644
--- a/packages/app/src/components/VisualizationOptions/Options/TargetLine.js
+++ b/packages/app/src/components/VisualizationOptions/Options/TargetLine.js
@@ -16,15 +16,16 @@ import {
     tabSectionOptionComplexInline,
 } from '../styles/VisualizationOptions.style.js'
 
-export const TargetLine = ({ enabled, onChange }) => (
+export const TargetLine = ({ checked, onChange, disabled }) => (
     <div className={tabSectionOption.className}>
         <Checkbox
-            checked={enabled}
+            checked={checked}
             label={i18n.t('Target line')}
             onChange={({ checked }) => onChange(checked)}
             dense
+            disabled={disabled}
         />
-        {enabled ? (
+        {checked && !disabled ? (
             <div
                 className={`${tabSectionOptionToggleable.className} ${tabSectionOptionComplexInline.className}`}
             >
@@ -42,16 +43,17 @@ export const TargetLine = ({ enabled, onChange }) => (
 )
 
 TargetLine.propTypes = {
-    enabled: PropTypes.bool.isRequired,
+    checked: PropTypes.bool.isRequired,
     onChange: PropTypes.func.isRequired,
+    disabled: PropTypes.bool,
 }
 
 const mapStateToProps = state => ({
-    enabled: sGetUiOptions(state).targetLine,
+    checked: sGetUiOptions(state).targetLine,
 })
 
 const mapDispatchToProps = dispatch => ({
-    onChange: enabled => dispatch(acSetUiOptions({ targetLine: enabled })),
+    onChange: checked => dispatch(acSetUiOptions({ targetLine: checked })),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(TargetLine)
diff --git a/packages/app/src/components/VisualizationOptions/Options/TextBaseOption.js b/packages/app/src/components/VisualizationOptions/Options/TextBaseOption.js
index 83134d3e67..ae2cc89023 100644
--- a/packages/app/src/components/VisualizationOptions/Options/TextBaseOption.js
+++ b/packages/app/src/components/VisualizationOptions/Options/TextBaseOption.js
@@ -23,24 +23,22 @@ export const TextBaseOption = ({
     onChange,
     onToggle,
     toggleable,
-    enabled,
+    checked,
     inline,
+    disabled,
 }) => (
-    <div
-        className={
-            !toggleable || enabled || inline ? '' : tabSectionOption.className
-        }
-    >
+    <div className={inline ? '' : tabSectionOption.className}>
         {toggleable ? (
             <Checkbox
-                checked={enabled}
+                checked={checked}
                 label={label}
                 name={`${option.name}-toggle`}
                 onChange={({ checked }) => onToggle(checked)}
                 dense
+                disabled={disabled}
             />
         ) : null}
-        {!toggleable || enabled ? (
+        {!toggleable || checked ? (
             <div
                 className={
                     toggleable ? tabSectionOptionToggleable.className : ''
@@ -55,6 +53,7 @@ export const TextBaseOption = ({
                             value={value}
                             placeholder={placeholder}
                             dense
+                            disabled={disabled}
                         />
                     </Box>
                 ) : (
@@ -64,10 +63,11 @@ export const TextBaseOption = ({
                         onChange={({ value }) => onChange(value)}
                         name={option.name}
                         value={value}
-                        helpText={helpText}
+                        helpText={disabled ? '' : helpText}
                         placeholder={placeholder}
                         inputWidth={width}
                         dense
+                        disabled={disabled}
                     />
                 )}
             </div>
@@ -76,7 +76,8 @@ export const TextBaseOption = ({
 )
 
 TextBaseOption.propTypes = {
-    enabled: PropTypes.bool,
+    checked: PropTypes.bool,
+    disabled: PropTypes.bool,
     helpText: PropTypes.string,
     inline: PropTypes.bool,
     label: PropTypes.string,
@@ -92,7 +93,7 @@ TextBaseOption.propTypes = {
 
 const mapStateToProps = (state, ownProps) => ({
     value: sGetUiOptions(state)[ownProps.option.name] || '',
-    enabled: sGetUiOptions(state)[ownProps.option.name] !== undefined,
+    checked: sGetUiOptions(state)[ownProps.option.name] !== undefined,
 })
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
diff --git a/packages/app/src/components/VisualizationOptions/VisualizationOptions.js b/packages/app/src/components/VisualizationOptions/VisualizationOptions.js
index 81ddbf5163..9a56430ab3 100755
--- a/packages/app/src/components/VisualizationOptions/VisualizationOptions.js
+++ b/packages/app/src/components/VisualizationOptions/VisualizationOptions.js
@@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 
-import { FieldSet, Legend, TabBar, Tab } from '@dhis2/ui'
+import { FieldSet, Legend, TabBar, Tab, Help } from '@dhis2/ui'
 
 import {
     tabSection,
@@ -15,8 +15,17 @@ import {
     tabBar,
 } from './styles/VisualizationOptions.style.js'
 
-import { sGetUiType } from '../../reducers/ui'
+import {
+    sGetUiType,
+    sGetUiOptions,
+    sGetDimensionItemsByAxis,
+} from '../../reducers/ui'
 import { getOptionsByType } from '../../modules/options/config'
+import {
+    isDualAxisType,
+    hasCustomAxes,
+    AXIS_ID_COLUMNS,
+} from '@dhis2/analytics'
 
 export class VisualizationOptions extends Component {
     state = { activeTabKey: undefined }
@@ -26,32 +35,46 @@ export class VisualizationOptions extends Component {
     }
 
     generateTabContent = sections =>
-        sections.map(({ key, getLabel, content }) => (
+        sections.map(({ key, label, content, helpText }) => (
             <div key={key} className={tabSection.className}>
                 <FieldSet>
-                    {getLabel ? (
+                    {label ? (
                         <Legend>
                             <span className={tabSectionTitle.className}>
-                                {getLabel()}
+                                {label}
                             </span>
                         </Legend>
                     ) : null}
                     {content}
+                    {helpText ? (
+                        <Legend>
+                            <Help className={tabSectionOptionText.className}>
+                                {helpText}
+                            </Help>
+                        </Legend>
+                    ) : null}
                 </FieldSet>
             </div>
         ))
 
     generateTabs = tabs =>
-        tabs.map(({ key, getLabel, content }) => ({
+        tabs.map(({ key, label, content }) => ({
             key,
-            label: getLabel(),
+            label,
             content: this.generateTabContent(content),
         }))
 
     render() {
-        const { visualizationType } = this.props
-
-        const optionsConfig = getOptionsByType(visualizationType)
+        const { visualizationType, columnDimensionItems, series } = this.props
+        const filteredSeries = series.filter(seriesItem =>
+            columnDimensionItems.some(
+                layoutItem => layoutItem === seriesItem.dimensionItem
+            )
+        )
+        const optionsConfig = getOptionsByType(
+            visualizationType,
+            isDualAxisType(visualizationType) && hasCustomAxes(filteredSeries)
+        )
 
         const tabs = this.generateTabs(optionsConfig)
 
@@ -94,10 +117,14 @@ export class VisualizationOptions extends Component {
 
 VisualizationOptions.propTypes = {
     visualizationType: PropTypes.string.isRequired,
+    columnDimensionItems: PropTypes.array,
+    series: PropTypes.array,
 }
 
 const mapStateToProps = state => ({
     visualizationType: sGetUiType(state),
+    columnDimensionItems: sGetDimensionItemsByAxis(state, AXIS_ID_COLUMNS),
+    series: sGetUiOptions(state).series,
 })
 
 export default connect(mapStateToProps)(VisualizationOptions)
diff --git a/packages/app/src/components/VisualizationOptions/__tests__/TextBaseOption.spec.js b/packages/app/src/components/VisualizationOptions/__tests__/TextBaseOption.spec.js
index 387ad7cac2..0c8445653c 100644
--- a/packages/app/src/components/VisualizationOptions/__tests__/TextBaseOption.spec.js
+++ b/packages/app/src/components/VisualizationOptions/__tests__/TextBaseOption.spec.js
@@ -134,8 +134,8 @@ describe('DV > Options > TextBaseOption', () => {
             expect(textBaseOption(props).find(InputField)).toHaveLength(0)
         })
 
-        it('does render a <InputField /> when the checkbox is enabled', () => {
-            props.enabled = true
+        it('does render a <InputField /> when the checkbox is checked', () => {
+            props.checked = true
 
             const text = textBaseOption(props)
             expect(text.find(InputField)).toHaveLength(1)
diff --git a/packages/app/src/components/VisualizationOptions/__tests__/VisualizationOptions.spec.js b/packages/app/src/components/VisualizationOptions/__tests__/VisualizationOptions.spec.js
index 2a579ce22d..d685367044 100644
--- a/packages/app/src/components/VisualizationOptions/__tests__/VisualizationOptions.spec.js
+++ b/packages/app/src/components/VisualizationOptions/__tests__/VisualizationOptions.spec.js
@@ -23,6 +23,13 @@ describe('VisualizationOptions', () => {
     beforeEach(() => {
         props = {
             visualizationType: 'COLUMN',
+            columnDimensionItems: ['aaa', 'bbb'],
+            series: [
+                {
+                    dimensionItem: 'aaa',
+                    axis: 0,
+                },
+            ],
         }
 
         shallowVisualizationOptions = undefined
diff --git a/packages/app/src/modules/options/areaConfig.js b/packages/app/src/modules/options/areaConfig.js
index bfdc8edbcb..d163a04ad9 100644
--- a/packages/app/src/modules/options/areaConfig.js
+++ b/packages/app/src/modules/options/areaConfig.js
@@ -6,30 +6,25 @@ import CumulativeValues from '../../components/VisualizationOptions/Options/Cumu
 import PercentStackedValues from '../../components/VisualizationOptions/Options/PercentStackedValues'
 import ShowData from '../../components/VisualizationOptions/Options/ShowData'
 import HideEmptyRowItems from '../../components/VisualizationOptions/Options/HideEmptyRowItems'
-import RegressionType from '../../components/VisualizationOptions/Options/RegressionType'
-import TargetLine from '../../components/VisualizationOptions/Options/TargetLine'
-import BaseLine from '../../components/VisualizationOptions/Options/BaseLine'
 import SortOrder from '../../components/VisualizationOptions/Options/SortOrder'
 import AggregationType from '../../components/VisualizationOptions/Options/AggregationType'
-import AxisRange from '../../components/VisualizationOptions/Options/AxisRange'
-import RangeAxisSteps from '../../components/VisualizationOptions/Options/RangeAxisSteps'
-import RangeAxisDecimals from '../../components/VisualizationOptions/Options/RangeAxisDecimals'
-import RangeAxisLabel from '../../components/VisualizationOptions/Options/RangeAxisLabel'
 import DomainAxisLabel from '../../components/VisualizationOptions/Options/DomainAxisLabel'
 import HideLegend from '../../components/VisualizationOptions/Options/HideLegend'
 import HideTitle from '../../components/VisualizationOptions/Options/HideTitle'
 import HideSubtitle from '../../components/VisualizationOptions/Options/HideSubtitle'
 import CompletedOnly from '../../components/VisualizationOptions/Options/CompletedOnly'
 import SeriesTable from '../../components/VisualizationOptions/Options/SeriesTable'
+import getLinesSection from './sections/lines'
+import getVerticalAxisSection from './sections/verticalAxis'
 
-export default [
+export default hasCustomAxes => [
     {
         key: 'data-tab',
-        getLabel: () => i18n.t('Data'),
+        label: i18n.t('Data'),
         content: [
             {
                 key: 'data-display',
-                getLabel: () => i18n.t('Display'),
+                label: i18n.t('Display'),
                 content: React.Children.toArray([
                     <PercentStackedValues />,
                     <CumulativeValues />,
@@ -37,18 +32,10 @@ export default [
                     <SortOrder />,
                 ]),
             },
-            {
-                key: 'data-lines',
-                getLabel: () => i18n.t('Lines'),
-                content: React.Children.toArray([
-                    <RegressionType />,
-                    <TargetLine />,
-                    <BaseLine />,
-                ]),
-            },
+            getLinesSection(hasCustomAxes),
             {
                 key: 'data-advanced',
-                getLabel: () => i18n.t('Advanced'),
+                label: i18n.t('Advanced'),
                 content: React.Children.toArray([
                     <AggregationType />,
                     <CompletedOnly />,
@@ -58,28 +45,19 @@ export default [
     },
     {
         key: 'axes-tab',
-        getLabel: () => i18n.t('Axes'),
+        label: i18n.t('Axes'),
         content: [
-            {
-                key: 'axes-vertical-axis',
-                getLabel: () => i18n.t('Vertical (y) axis'),
-                content: React.Children.toArray([
-                    <RangeAxisLabel />,
-                    <AxisRange />,
-                    <RangeAxisSteps />,
-                    <RangeAxisDecimals />,
-                ]),
-            },
+            getVerticalAxisSection(hasCustomAxes),
             {
                 key: 'axes-horizontal-axis',
-                getLabel: () => i18n.t('Horizontal (x) axis'),
+                label: i18n.t('Horizontal (x) axis'),
                 content: React.Children.toArray([<DomainAxisLabel />]),
             },
         ],
     },
     {
         key: 'series-tab',
-        getLabel: () => i18n.t('Series'),
+        label: i18n.t('Series'),
         content: [
             {
                 key: 'series-table',
@@ -89,16 +67,16 @@ export default [
     },
     {
         key: 'style-tab',
-        getLabel: () => i18n.t('Style'),
+        label: i18n.t('Style'),
         content: [
             {
                 key: 'style-chart-style',
-                getLabel: () => i18n.t('Chart style'),
+                label: i18n.t('Chart style'),
                 content: React.Children.toArray([<ShowData />, <HideLegend />]),
             },
             {
                 key: 'style-titles',
-                getLabel: () => i18n.t('Titles'),
+                label: i18n.t('Titles'),
                 content: React.Children.toArray([
                     <HideTitle />,
                     <HideSubtitle />,
diff --git a/packages/app/src/modules/options/barConfig.js b/packages/app/src/modules/options/barConfig.js
index 0202264c22..0466c3f543 100644
--- a/packages/app/src/modules/options/barConfig.js
+++ b/packages/app/src/modules/options/barConfig.js
@@ -5,15 +5,8 @@ import i18n from '@dhis2/d2-i18n'
 import CumulativeValues from '../../components/VisualizationOptions/Options/CumulativeValues'
 import ShowData from '../../components/VisualizationOptions/Options/ShowData'
 import HideEmptyRowItems from '../../components/VisualizationOptions/Options/HideEmptyRowItems'
-import RegressionType from '../../components/VisualizationOptions/Options/RegressionType'
-import TargetLine from '../../components/VisualizationOptions/Options/TargetLine'
-import BaseLine from '../../components/VisualizationOptions/Options/BaseLine'
 import SortOrder from '../../components/VisualizationOptions/Options/SortOrder'
 import AggregationType from '../../components/VisualizationOptions/Options/AggregationType'
-import AxisRange from '../../components/VisualizationOptions/Options/AxisRange'
-import RangeAxisSteps from '../../components/VisualizationOptions/Options/RangeAxisSteps'
-import RangeAxisDecimals from '../../components/VisualizationOptions/Options/RangeAxisDecimals'
-import RangeAxisLabel from '../../components/VisualizationOptions/Options/RangeAxisLabel'
 import DomainAxisLabel from '../../components/VisualizationOptions/Options/DomainAxisLabel'
 import NoSpaceBetweenColumns from '../../components/VisualizationOptions/Options/NoSpaceBetweenColumns'
 import HideLegend from '../../components/VisualizationOptions/Options/HideLegend'
@@ -21,33 +14,27 @@ import HideTitle from '../../components/VisualizationOptions/Options/HideTitle'
 import HideSubtitle from '../../components/VisualizationOptions/Options/HideSubtitle'
 import CompletedOnly from '../../components/VisualizationOptions/Options/CompletedOnly'
 import SeriesTable from '../../components/VisualizationOptions/Options/SeriesTable'
+import getLinesSection from './sections/lines'
+import getVerticalAxisSection from './sections/verticalAxis'
 
-export default [
+export default hasCustomAxes => [
     {
         key: 'data-tab',
-        getLabel: () => i18n.t('Data'),
+        label: i18n.t('Data'),
         content: [
             {
                 key: 'data-display',
-                getLabel: () => i18n.t('Display'),
+                label: i18n.t('Display'),
                 content: React.Children.toArray([
                     <CumulativeValues />,
                     <HideEmptyRowItems />,
                     <SortOrder />,
                 ]),
             },
-            {
-                key: 'data-lines',
-                getLabel: () => i18n.t('Lines'),
-                content: React.Children.toArray([
-                    <RegressionType />,
-                    <TargetLine />,
-                    <BaseLine />,
-                ]),
-            },
+            getLinesSection(hasCustomAxes),
             {
                 key: 'data-advanced',
-                getLabel: () => i18n.t('Advanced'),
+                label: i18n.t('Advanced'),
                 content: React.Children.toArray([
                     <AggregationType />,
                     <CompletedOnly />,
@@ -57,28 +44,19 @@ export default [
     },
     {
         key: 'axes-tab',
-        getLabel: () => i18n.t('Axes'),
+        label: i18n.t('Axes'),
         content: [
-            {
-                key: 'axes-vertical-axis',
-                getLabel: () => i18n.t('Vertical (y) axis'),
-                content: React.Children.toArray([
-                    <RangeAxisLabel />,
-                    <AxisRange />,
-                    <RangeAxisSteps />,
-                    <RangeAxisDecimals />,
-                ]),
-            },
+            getVerticalAxisSection(hasCustomAxes),
             {
                 key: 'axes-horizontal-axis',
-                getLabel: () => i18n.t('Horizontal (x) axis'),
+                label: i18n.t('Horizontal (x) axis'),
                 content: React.Children.toArray([<DomainAxisLabel />]),
             },
         ],
     },
     {
         key: 'series-tab',
-        getLabel: () => i18n.t('Series'),
+        label: i18n.t('Series'),
         content: [
             {
                 key: 'series-table',
@@ -90,11 +68,11 @@ export default [
     },
     {
         key: 'style-tab',
-        getLabel: () => i18n.t('Style'),
+        label: i18n.t('Style'),
         content: [
             {
                 key: 'style-chart-style',
-                getLabel: () => i18n.t('Chart style'),
+                label: i18n.t('Chart style'),
                 content: React.Children.toArray([
                     <ShowData />,
                     <NoSpaceBetweenColumns />,
@@ -104,7 +82,7 @@ export default [
             },
             {
                 key: 'style-titles',
-                getLabel: () => i18n.t('Titles'),
+                label: i18n.t('Titles'),
                 content: React.Children.toArray([
                     <HideTitle />,
                     <HideSubtitle />,
diff --git a/packages/app/src/modules/options/columnConfig.js b/packages/app/src/modules/options/columnConfig.js
index adc2c8b92c..bd6b2ce7bb 100644
--- a/packages/app/src/modules/options/columnConfig.js
+++ b/packages/app/src/modules/options/columnConfig.js
@@ -5,15 +5,8 @@ import i18n from '@dhis2/d2-i18n'
 import CumulativeValues from '../../components/VisualizationOptions/Options/CumulativeValues'
 import ShowData from '../../components/VisualizationOptions/Options/ShowData'
 import HideEmptyRowItems from '../../components/VisualizationOptions/Options/HideEmptyRowItems'
-import RegressionType from '../../components/VisualizationOptions/Options/RegressionType'
-import TargetLine from '../../components/VisualizationOptions/Options/TargetLine'
-import BaseLine from '../../components/VisualizationOptions/Options/BaseLine'
 import SortOrder from '../../components/VisualizationOptions/Options/SortOrder'
 import AggregationType from '../../components/VisualizationOptions/Options/AggregationType'
-import AxisRange from '../../components/VisualizationOptions/Options/AxisRange'
-import RangeAxisSteps from '../../components/VisualizationOptions/Options/RangeAxisSteps'
-import RangeAxisDecimals from '../../components/VisualizationOptions/Options/RangeAxisDecimals'
-import RangeAxisLabel from '../../components/VisualizationOptions/Options/RangeAxisLabel'
 import DomainAxisLabel from '../../components/VisualizationOptions/Options/DomainAxisLabel'
 import NoSpaceBetweenColumns from '../../components/VisualizationOptions/Options/NoSpaceBetweenColumns'
 import HideLegend from '../../components/VisualizationOptions/Options/HideLegend'
@@ -21,33 +14,27 @@ import HideTitle from '../../components/VisualizationOptions/Options/HideTitle'
 import HideSubtitle from '../../components/VisualizationOptions/Options/HideSubtitle'
 import CompletedOnly from '../../components/VisualizationOptions/Options/CompletedOnly'
 import SeriesTable from '../../components/VisualizationOptions/Options/SeriesTable'
+import getLinesSection from './sections/lines'
+import getVerticalAxisSection from './sections/verticalAxis'
 
-export default [
+export default hasCustomAxes => [
     {
         key: 'data-tab',
-        getLabel: () => i18n.t('Data'),
+        label: i18n.t('Data'),
         content: [
             {
                 key: 'data-display',
-                getLabel: () => i18n.t('Display'),
+                label: i18n.t('Display'),
                 content: React.Children.toArray([
                     <CumulativeValues />,
                     <HideEmptyRowItems />,
                     <SortOrder />,
                 ]),
             },
-            {
-                key: 'data-lines',
-                getLabel: () => i18n.t('Lines'),
-                content: React.Children.toArray([
-                    <RegressionType />,
-                    <TargetLine />,
-                    <BaseLine />,
-                ]),
-            },
+            getLinesSection(hasCustomAxes),
             {
                 key: 'data-advanced',
-                getLabel: () => i18n.t('Advanced'),
+                label: i18n.t('Advanced'),
                 content: React.Children.toArray([
                     <AggregationType />,
                     <CompletedOnly />,
@@ -57,28 +44,19 @@ export default [
     },
     {
         key: 'axes-tab',
-        getLabel: () => i18n.t('Axes'),
+        label: i18n.t('Axes'),
         content: [
-            {
-                key: 'axes-vertical-axis',
-                getLabel: () => i18n.t('Vertical (y) axis'),
-                content: React.Children.toArray([
-                    <RangeAxisLabel />,
-                    <AxisRange />,
-                    <RangeAxisSteps />,
-                    <RangeAxisDecimals />,
-                ]),
-            },
+            getVerticalAxisSection(hasCustomAxes),
             {
                 key: 'axes-horizontal-axis',
-                getLabel: () => i18n.t('Horizontal (x) axis'),
+                label: i18n.t('Horizontal (x) axis'),
                 content: React.Children.toArray([<DomainAxisLabel />]),
             },
         ],
     },
     {
         key: 'series-tab',
-        getLabel: () => i18n.t('Series'),
+        label: i18n.t('Series'),
         content: [
             {
                 key: 'series-table',
@@ -93,11 +71,11 @@ export default [
     },
     {
         key: 'style-tab',
-        getLabel: () => i18n.t('Style'),
+        label: i18n.t('Style'),
         content: [
             {
                 key: 'style-chart-style',
-                getLabel: () => i18n.t('Chart style'),
+                label: i18n.t('Chart style'),
                 content: React.Children.toArray([
                     <ShowData />,
                     <NoSpaceBetweenColumns />,
@@ -107,7 +85,7 @@ export default [
             },
             {
                 key: 'style-titles',
-                getLabel: () => i18n.t('Titles'),
+                label: i18n.t('Titles'),
                 content: React.Children.toArray([
                     <HideTitle />,
                     <HideSubtitle />,
diff --git a/packages/app/src/modules/options/config.js b/packages/app/src/modules/options/config.js
index e9c66ea105..447071ffae 100644
--- a/packages/app/src/modules/options/config.js
+++ b/packages/app/src/modules/options/config.js
@@ -25,33 +25,33 @@ import singleValueConfig from './singleValueConfig'
 import barConfig from './barConfig'
 import yearOverYearConfig from './yearOverYearConfig'
 
-export const getOptionsByType = type => {
+export const getOptionsByType = (type, hasCustomAxes) => {
     switch (type) {
         case VIS_TYPE_COLUMN:
-            return columnConfig
+            return columnConfig(hasCustomAxes)
         case VIS_TYPE_BAR:
-            return barConfig
+            return barConfig(hasCustomAxes)
         case VIS_TYPE_YEAR_OVER_YEAR_LINE:
         case VIS_TYPE_YEAR_OVER_YEAR_COLUMN:
-            return yearOverYearConfig
+            return yearOverYearConfig(hasCustomAxes)
         case VIS_TYPE_STACKED_COLUMN:
         case VIS_TYPE_STACKED_BAR:
-            return stackedColumnConfig
+            return stackedColumnConfig(hasCustomAxes)
         case VIS_TYPE_LINE:
         case VIS_TYPE_RADAR:
-            return lineConfig
+            return lineConfig(hasCustomAxes)
         case VIS_TYPE_AREA:
-            return areaConfig
+            return areaConfig(hasCustomAxes)
         case VIS_TYPE_GAUGE:
-            return gaugeConfig
+            return gaugeConfig(hasCustomAxes)
         case VIS_TYPE_PIE:
-            return pieConfig
+            return pieConfig(hasCustomAxes)
         case VIS_TYPE_SINGLE_VALUE:
-            return singleValueConfig
+            return singleValueConfig(hasCustomAxes)
         case VIS_TYPE_PIVOT_TABLE:
-            return pivotTableConfig
+            return pivotTableConfig(hasCustomAxes)
         default:
             // return all the options
-            return stackedColumnConfig
+            return stackedColumnConfig(hasCustomAxes)
     }
 }
diff --git a/packages/app/src/modules/options/gaugeConfig.js b/packages/app/src/modules/options/gaugeConfig.js
index 8917356486..6901c45b7b 100644
--- a/packages/app/src/modules/options/gaugeConfig.js
+++ b/packages/app/src/modules/options/gaugeConfig.js
@@ -12,19 +12,19 @@ import Legend from '../../components/VisualizationOptions/Options/Legend'
 import CompletedOnly from '../../components/VisualizationOptions/Options/CompletedOnly'
 import SeriesTable from '../../components/VisualizationOptions/Options/SeriesTable'
 
-export default [
+export default () => [
     {
         key: 'data-tab',
-        getLabel: () => i18n.t('Data'),
+        label: i18n.t('Data'),
         content: [
             {
                 key: 'data-lines',
-                getLabel: () => i18n.t('Lines'),
+                label: i18n.t('Lines'),
                 content: React.Children.toArray([<TargetLine />, <BaseLine />]),
             },
             {
                 key: 'data-advanced',
-                getLabel: () => i18n.t('Advanced'),
+                label: i18n.t('Advanced'),
                 content: React.Children.toArray([
                     <AggregationType />,
                     <CompletedOnly />,
@@ -34,7 +34,7 @@ export default [
     },
     {
         key: 'legend-tab',
-        getLabel: () => i18n.t('Legend'),
+        label: i18n.t('Legend'),
         content: [
             {
                 key: 'legend-section-1',
@@ -44,18 +44,18 @@ export default [
     },
     {
         key: 'axes-tab',
-        getLabel: () => i18n.t('Axes'),
+        label: i18n.t('Axes'),
         content: [
             {
                 key: 'axes-vertical-axis',
-                getLabel: () => i18n.t('Vertical (y) axis'),
+                label: i18n.t('Vertical (y) axis'),
                 content: React.Children.toArray([<AxisRange />]),
             },
         ],
     },
     {
         key: 'series-tab',
-        getLabel: () => i18n.t('Series'),
+        label: i18n.t('Series'),
         content: [
             {
                 key: 'series-table',
@@ -65,11 +65,11 @@ export default [
     },
     {
         key: 'style-tab',
-        getLabel: () => i18n.t('Style'),
+        label: i18n.t('Style'),
         content: [
             {
                 key: 'style-titles',
-                getLabel: () => i18n.t('Titles'),
+                label: i18n.t('Titles'),
                 content: React.Children.toArray([
                     <HideTitle />,
                     <HideSubtitle />,
diff --git a/packages/app/src/modules/options/lineConfig.js b/packages/app/src/modules/options/lineConfig.js
index 2f3cb91850..88782cd76f 100644
--- a/packages/app/src/modules/options/lineConfig.js
+++ b/packages/app/src/modules/options/lineConfig.js
@@ -5,48 +5,35 @@ import i18n from '@dhis2/d2-i18n'
 import CumulativeValues from '../../components/VisualizationOptions/Options/CumulativeValues'
 import ShowData from '../../components/VisualizationOptions/Options/ShowData'
 import HideEmptyRowItems from '../../components/VisualizationOptions/Options/HideEmptyRowItems'
-import RegressionType from '../../components/VisualizationOptions/Options/RegressionType'
-import TargetLine from '../../components/VisualizationOptions/Options/TargetLine'
-import BaseLine from '../../components/VisualizationOptions/Options/BaseLine'
 import SortOrder from '../../components/VisualizationOptions/Options/SortOrder'
 import AggregationType from '../../components/VisualizationOptions/Options/AggregationType'
-import AxisRange from '../../components/VisualizationOptions/Options/AxisRange'
-import RangeAxisSteps from '../../components/VisualizationOptions/Options/RangeAxisSteps'
-import RangeAxisDecimals from '../../components/VisualizationOptions/Options/RangeAxisDecimals'
-import RangeAxisLabel from '../../components/VisualizationOptions/Options/RangeAxisLabel'
 import DomainAxisLabel from '../../components/VisualizationOptions/Options/DomainAxisLabel'
 import HideLegend from '../../components/VisualizationOptions/Options/HideLegend'
 import HideTitle from '../../components/VisualizationOptions/Options/HideTitle'
 import HideSubtitle from '../../components/VisualizationOptions/Options/HideSubtitle'
 import CompletedOnly from '../../components/VisualizationOptions/Options/CompletedOnly'
 import SeriesTable from '../../components/VisualizationOptions/Options/SeriesTable'
+import getLinesSection from './sections/lines'
+import getVerticalAxisSection from './sections/verticalAxis'
 
-export default [
+export default hasCustomAxes => [
     {
         key: 'data-tab',
-        getLabel: () => i18n.t('Data'),
+        label: i18n.t('Data'),
         content: [
             {
                 key: 'data-display',
-                getLabel: () => i18n.t('Display'),
+                label: i18n.t('Display'),
                 content: React.Children.toArray([
                     <CumulativeValues />,
                     <HideEmptyRowItems />,
                     <SortOrder />,
                 ]),
             },
-            {
-                key: 'data-lines',
-                getLabel: () => i18n.t('Lines'),
-                content: React.Children.toArray([
-                    <RegressionType />,
-                    <TargetLine />,
-                    <BaseLine />,
-                ]),
-            },
+            getLinesSection(hasCustomAxes),
             {
                 key: 'data-advanced',
-                getLabel: () => i18n.t('Advanced'),
+                label: i18n.t('Advanced'),
                 content: React.Children.toArray([
                     <AggregationType />,
                     <CompletedOnly />,
@@ -56,28 +43,19 @@ export default [
     },
     {
         key: 'axes-tab',
-        getLabel: () => i18n.t('Axes'),
+        label: i18n.t('Axes'),
         content: [
-            {
-                key: 'axes-vertical-axis',
-                getLabel: () => i18n.t('Vertical (y) axis'),
-                content: React.Children.toArray([
-                    <RangeAxisLabel />,
-                    <AxisRange />,
-                    <RangeAxisSteps />,
-                    <RangeAxisDecimals />,
-                ]),
-            },
+            getVerticalAxisSection(hasCustomAxes),
             {
                 key: 'axes-horizontal-axis',
-                getLabel: () => i18n.t('Horizontal (x) axis'),
+                label: i18n.t('Horizontal (x) axis'),
                 content: React.Children.toArray([<DomainAxisLabel />]),
             },
         ],
     },
     {
         key: 'series-tab',
-        getLabel: () => i18n.t('Series'),
+        label: i18n.t('Series'),
         content: [
             {
                 key: 'series-table',
@@ -92,16 +70,16 @@ export default [
     },
     {
         key: 'style-tab',
-        getLabel: () => i18n.t('Style'),
+        label: i18n.t('Style'),
         content: [
             {
                 key: 'style-chart-style',
-                getLabel: () => i18n.t('Chart style'),
+                label: i18n.t('Chart style'),
                 content: React.Children.toArray([<ShowData />, <HideLegend />]),
             },
             {
                 key: 'style-titles',
-                getLabel: () => i18n.t('Titles'),
+                label: i18n.t('Titles'),
                 content: React.Children.toArray([
                     <HideTitle />,
                     <HideSubtitle />,
diff --git a/packages/app/src/modules/options/pieConfig.js b/packages/app/src/modules/options/pieConfig.js
index dcbf0aa4c3..807c0822cb 100644
--- a/packages/app/src/modules/options/pieConfig.js
+++ b/packages/app/src/modules/options/pieConfig.js
@@ -8,14 +8,14 @@ import HideSubtitle from '../../components/VisualizationOptions/Options/HideSubt
 import CompletedOnly from '../../components/VisualizationOptions/Options/CompletedOnly'
 import SeriesTable from '../../components/VisualizationOptions/Options/SeriesTable'
 
-export default [
+export default () => [
     {
         key: 'data-tab',
-        getLabel: () => i18n.t('Data'),
+        label: i18n.t('Data'),
         content: [
             {
                 key: 'data-advanced',
-                getLabel: () => i18n.t('Advanced'),
+                label: i18n.t('Advanced'),
                 content: React.Children.toArray([
                     <AggregationType />,
                     <CompletedOnly />,
@@ -25,7 +25,7 @@ export default [
     },
     {
         key: 'series-tab',
-        getLabel: () => i18n.t('Series'),
+        label: i18n.t('Series'),
         content: [
             {
                 key: 'series-table',
@@ -35,11 +35,11 @@ export default [
     },
     {
         key: 'style-tab',
-        getLabel: () => i18n.t('Style'),
+        label: i18n.t('Style'),
         content: [
             {
                 key: 'style-titles',
-                getLabel: () => i18n.t('Titles'),
+                label: i18n.t('Titles'),
                 content: React.Children.toArray([
                     <HideTitle />,
                     <HideSubtitle />,
diff --git a/packages/app/src/modules/options/pivotTableConfig.js b/packages/app/src/modules/options/pivotTableConfig.js
index 5e96d7f8d7..b823a14ef3 100644
--- a/packages/app/src/modules/options/pivotTableConfig.js
+++ b/packages/app/src/modules/options/pivotTableConfig.js
@@ -30,10 +30,10 @@ import ShowHierarchy from '../../components/VisualizationOptions/Options/ShowHie
 import CompletedOnly from '../../components/VisualizationOptions/Options/CompletedOnly'
 import SeriesTable from '../../components/VisualizationOptions/Options/SeriesTable'
 
-export default [
+export default () => [
     {
         key: 'data-tab',
-        getLabel: () => i18n.t('Data'),
+        label: i18n.t('Data'),
         content: [
             {
                 key: 'data-section-1',
@@ -44,7 +44,7 @@ export default [
             },
             {
                 key: 'data-display-totals',
-                getLabel: () => i18n.t('Display totals'),
+                label: i18n.t('Display totals'),
                 content: React.Children.toArray([
                     <ColTotals />,
                     <ColSubTotals />,
@@ -54,7 +54,7 @@ export default [
             },
             {
                 key: 'data-display-empty-data',
-                getLabel: () => i18n.t('Display empty data'),
+                label: i18n.t('Display empty data'),
                 content: React.Children.toArray([
                     <HideEmptyColumns />,
                     <HideEmptyRows />,
@@ -62,7 +62,7 @@ export default [
             },
             {
                 key: 'data-advanced',
-                getLabel: () => i18n.t('Advanced'),
+                label: i18n.t('Advanced'),
                 content: React.Children.toArray([
                     <AggregationType />,
                     <NumberType />,
@@ -74,7 +74,7 @@ export default [
     },
     {
         key: 'legend-tab',
-        getLabel: () => i18n.t('Legend'),
+        label: i18n.t('Legend'),
         content: [
             {
                 key: 'legend-section-1',
@@ -84,7 +84,7 @@ export default [
     },
     {
         key: 'series-tab',
-        getLabel: () => i18n.t('Series'),
+        label: i18n.t('Series'),
         content: [
             {
                 key: 'series-table',
@@ -94,7 +94,7 @@ export default [
     },
     {
         key: 'style-tab',
-        getLabel: () => i18n.t('Style'),
+        label: i18n.t('Style'),
         content: [
             {
                 key: 'style-section-1',
@@ -107,31 +107,31 @@ export default [
             },
             {
                 key: 'style-section-2',
-                getLabel: () => i18n.t('Labels'),
+                label: i18n.t('Labels'),
                 content: React.Children.toArray([<ShowHierarchy />]),
             },
         ],
     },
     {
         key: 'limitValues-tab',
-        getLabel: () => i18n.t('Limit values'),
+        label: i18n.t('Limit values'),
         content: [
             /*
             {
                 key: 'limitValues-limit-numbers',
-                getLabel: () => i18n.t('Limit number of values'),
+                label: i18n.t('Limit number of values'),
                 content: [<TopLimit />],
             },*/
             {
                 key: 'limitValues-limit-min-max',
-                getLabel: () => i18n.t('Limit minimum/maximum values'),
+                label: i18n.t('Limit minimum/maximum values'),
                 content: React.Children.toArray([<MeasureCriteria />]),
             },
         ],
     },
     {
         key: 'parameters-tab',
-        getLabel: () => i18n.t('Parameters'),
+        label: i18n.t('Parameters'),
         content: [
             {
                 key: 'parameters-section-1',
diff --git a/packages/app/src/modules/options/sections/lines.js b/packages/app/src/modules/options/sections/lines.js
new file mode 100644
index 0000000000..f79aee97da
--- /dev/null
+++ b/packages/app/src/modules/options/sections/lines.js
@@ -0,0 +1,20 @@
+/* eslint-disable react/jsx-key */
+import React from 'react'
+import i18n from '@dhis2/d2-i18n'
+
+import RegressionType from '../../../components/VisualizationOptions/Options/RegressionType'
+import TargetLine from '../../../components/VisualizationOptions/Options/TargetLine'
+import BaseLine from '../../../components/VisualizationOptions/Options/BaseLine'
+
+export default hasCustomAxes => ({
+    key: 'data-lines',
+    label: i18n.t('Lines'),
+    helpText: hasCustomAxes
+        ? i18n.t('Lines are not supported yet when using multiple axes')
+        : null,
+    content: React.Children.toArray([
+        <RegressionType disabled={hasCustomAxes} />,
+        <TargetLine disabled={hasCustomAxes} />,
+        <BaseLine disabled={hasCustomAxes} />,
+    ]),
+})
diff --git a/packages/app/src/modules/options/sections/verticalAxis.js b/packages/app/src/modules/options/sections/verticalAxis.js
new file mode 100644
index 0000000000..66d0fdccaa
--- /dev/null
+++ b/packages/app/src/modules/options/sections/verticalAxis.js
@@ -0,0 +1,24 @@
+/* eslint-disable react/jsx-key */
+import React from 'react'
+import i18n from '@dhis2/d2-i18n'
+
+import RangeAxisLabel from '../../../components/VisualizationOptions/Options/RangeAxisLabel'
+import AxisRange from '../../../components/VisualizationOptions/Options/AxisRange'
+import RangeAxisSteps from '../../../components/VisualizationOptions/Options/RangeAxisSteps'
+import RangeAxisDecimals from '../../../components/VisualizationOptions/Options/RangeAxisDecimals'
+
+export default hasCustomAxes => ({
+    key: 'axes-vertical-axis',
+    label: i18n.t('Vertical (y) axis'),
+    helpText: hasCustomAxes
+        ? i18n.t(
+              'Vertical axis options are not supported yet when using multiple axes'
+          )
+        : null,
+    content: React.Children.toArray([
+        <RangeAxisLabel disabled={hasCustomAxes} />,
+        <AxisRange disabled={hasCustomAxes} />,
+        <RangeAxisSteps disabled={hasCustomAxes} />,
+        <RangeAxisDecimals disabled={hasCustomAxes} />,
+    ]),
+})
diff --git a/packages/app/src/modules/options/singleValueConfig.js b/packages/app/src/modules/options/singleValueConfig.js
index 466f67dacd..ebde8222b5 100644
--- a/packages/app/src/modules/options/singleValueConfig.js
+++ b/packages/app/src/modules/options/singleValueConfig.js
@@ -9,14 +9,14 @@ import Legend from '../../components/VisualizationOptions/Options/Legend'
 import CompletedOnly from '../../components/VisualizationOptions/Options/CompletedOnly'
 import SeriesTable from '../../components/VisualizationOptions/Options/SeriesTable'
 
-export default [
+export default () => [
     {
         key: 'data-tab',
-        getLabel: () => i18n.t('Data'),
+        label: i18n.t('Data'),
         content: [
             {
                 key: 'data-advanced',
-                getLabel: () => i18n.t('Advanced'),
+                label: i18n.t('Advanced'),
                 content: React.Children.toArray([
                     <AggregationType />,
                     <CompletedOnly />,
@@ -26,7 +26,7 @@ export default [
     },
     {
         key: 'legend-tab',
-        getLabel: () => i18n.t('Legend'),
+        label: i18n.t('Legend'),
         content: [
             {
                 key: 'legend-section-1',
@@ -38,7 +38,7 @@ export default [
     },
     {
         key: 'series-tab',
-        getLabel: () => i18n.t('Series'),
+        label: i18n.t('Series'),
         content: [
             {
                 key: 'series-table',
@@ -48,11 +48,11 @@ export default [
     },
     {
         key: 'style-tab',
-        getLabel: () => i18n.t('Style'),
+        label: i18n.t('Style'),
         content: [
             {
                 key: 'style-titles',
-                getLabel: () => i18n.t('Titles'),
+                label: i18n.t('Titles'),
                 content: React.Children.toArray([
                     <HideTitle />,
                     <HideSubtitle />,
diff --git a/packages/app/src/modules/options/stackedColumnConfig.js b/packages/app/src/modules/options/stackedColumnConfig.js
index 5d9e0b7295..be76e5611e 100644
--- a/packages/app/src/modules/options/stackedColumnConfig.js
+++ b/packages/app/src/modules/options/stackedColumnConfig.js
@@ -6,15 +6,8 @@ import CumulativeValues from '../../components/VisualizationOptions/Options/Cumu
 import PercentStackedValues from '../../components/VisualizationOptions/Options/PercentStackedValues'
 import ShowData from '../../components/VisualizationOptions/Options/ShowData'
 import HideEmptyRowItems from '../../components/VisualizationOptions/Options/HideEmptyRowItems'
-import RegressionType from '../../components/VisualizationOptions/Options/RegressionType'
-import TargetLine from '../../components/VisualizationOptions/Options/TargetLine'
-import BaseLine from '../../components/VisualizationOptions/Options/BaseLine'
 import SortOrder from '../../components/VisualizationOptions/Options/SortOrder'
 import AggregationType from '../../components/VisualizationOptions/Options/AggregationType'
-import AxisRange from '../../components/VisualizationOptions/Options/AxisRange'
-import RangeAxisSteps from '../../components/VisualizationOptions/Options/RangeAxisSteps'
-import RangeAxisDecimals from '../../components/VisualizationOptions/Options/RangeAxisDecimals'
-import RangeAxisLabel from '../../components/VisualizationOptions/Options/RangeAxisLabel'
 import DomainAxisLabel from '../../components/VisualizationOptions/Options/DomainAxisLabel'
 import NoSpaceBetweenColumns from '../../components/VisualizationOptions/Options/NoSpaceBetweenColumns'
 import HideLegend from '../../components/VisualizationOptions/Options/HideLegend'
@@ -22,15 +15,17 @@ import HideTitle from '../../components/VisualizationOptions/Options/HideTitle'
 import HideSubtitle from '../../components/VisualizationOptions/Options/HideSubtitle'
 import CompletedOnly from '../../components/VisualizationOptions/Options/CompletedOnly'
 import SeriesTable from '../../components/VisualizationOptions/Options/SeriesTable'
+import getLinesSection from './sections/lines'
+import getVerticalAxisSection from './sections/verticalAxis'
 
-export default [
+export default hasCustomAxes => [
     {
         key: 'data-tab',
-        getLabel: () => i18n.t('Data'),
+        label: i18n.t('Data'),
         content: [
             {
                 key: 'data-display',
-                getLabel: () => i18n.t('Display'),
+                label: i18n.t('Display'),
                 content: React.Children.toArray([
                     <PercentStackedValues />,
                     <CumulativeValues />,
@@ -38,18 +33,10 @@ export default [
                     <SortOrder />,
                 ]),
             },
-            {
-                key: 'data-lines',
-                getLabel: () => i18n.t('Lines'),
-                content: React.Children.toArray([
-                    <RegressionType />,
-                    <TargetLine />,
-                    <BaseLine />,
-                ]),
-            },
+            getLinesSection(hasCustomAxes),
             {
                 key: 'data-advanced',
-                getLabel: () => i18n.t('Advanced'),
+                label: i18n.t('Advanced'),
                 content: React.Children.toArray([
                     <AggregationType />,
                     <CompletedOnly />,
@@ -59,28 +46,19 @@ export default [
     },
     {
         key: 'axes-tab',
-        getLabel: () => i18n.t('Axes'),
+        label: i18n.t('Axes'),
         content: [
-            {
-                key: 'axes-vertical-axis',
-                getLabel: () => i18n.t('Vertical (y) axis'),
-                content: React.Children.toArray([
-                    <RangeAxisLabel />,
-                    <AxisRange />,
-                    <RangeAxisSteps />,
-                    <RangeAxisDecimals />,
-                ]),
-            },
+            getVerticalAxisSection(hasCustomAxes),
             {
                 key: 'axes-horizontal-axis',
-                getLabel: () => i18n.t('Horizontal (x) axis'),
+                label: i18n.t('Horizontal (x) axis'),
                 content: React.Children.toArray([<DomainAxisLabel />]),
             },
         ],
     },
     {
         key: 'series-tab',
-        getLabel: () => i18n.t('Series'),
+        label: i18n.t('Series'),
         content: [
             {
                 key: 'series-table',
@@ -90,11 +68,11 @@ export default [
     },
     {
         key: 'style-tab',
-        getLabel: () => i18n.t('Style'),
+        label: i18n.t('Style'),
         content: [
             {
                 key: 'style-chart-style',
-                getLabel: () => i18n.t('Chart style'),
+                label: i18n.t('Chart style'),
                 content: React.Children.toArray([
                     <ShowData />,
                     <NoSpaceBetweenColumns />,
@@ -104,7 +82,7 @@ export default [
             },
             {
                 key: 'style-titles',
-                getLabel: () => i18n.t('Titles'),
+                label: i18n.t('Titles'),
                 content: React.Children.toArray([
                     <HideTitle />,
                     <HideSubtitle />,
diff --git a/packages/app/src/modules/options/yearOverYearConfig.js b/packages/app/src/modules/options/yearOverYearConfig.js
index 05f940a423..3d2f1048d4 100644
--- a/packages/app/src/modules/options/yearOverYearConfig.js
+++ b/packages/app/src/modules/options/yearOverYearConfig.js
@@ -5,15 +5,8 @@ import i18n from '@dhis2/d2-i18n'
 import CumulativeValues from '../../components/VisualizationOptions/Options/CumulativeValues'
 import ShowData from '../../components/VisualizationOptions/Options/ShowData'
 import HideEmptyRowItems from '../../components/VisualizationOptions/Options/HideEmptyRowItems'
-import RegressionType from '../../components/VisualizationOptions/Options/RegressionType'
-import TargetLine from '../../components/VisualizationOptions/Options/TargetLine'
-import BaseLine from '../../components/VisualizationOptions/Options/BaseLine'
 import SortOrder from '../../components/VisualizationOptions/Options/SortOrder'
 import AggregationType from '../../components/VisualizationOptions/Options/AggregationType'
-import AxisRange from '../../components/VisualizationOptions/Options/AxisRange'
-import RangeAxisSteps from '../../components/VisualizationOptions/Options/RangeAxisSteps'
-import RangeAxisDecimals from '../../components/VisualizationOptions/Options/RangeAxisDecimals'
-import RangeAxisLabel from '../../components/VisualizationOptions/Options/RangeAxisLabel'
 import DomainAxisLabel from '../../components/VisualizationOptions/Options/DomainAxisLabel'
 import NoSpaceBetweenColumns from '../../components/VisualizationOptions/Options/NoSpaceBetweenColumns'
 import HideLegend from '../../components/VisualizationOptions/Options/HideLegend'
@@ -21,33 +14,27 @@ import HideTitle from '../../components/VisualizationOptions/Options/HideTitle'
 import HideSubtitle from '../../components/VisualizationOptions/Options/HideSubtitle'
 import CompletedOnly from '../../components/VisualizationOptions/Options/CompletedOnly'
 import SeriesTable from '../../components/VisualizationOptions/Options/SeriesTable'
+import getLinesSection from './sections/lines'
+import getVerticalAxisSection from './sections/verticalAxis'
 
-export default [
+export default hasCustomAxes => [
     {
         key: 'data-tab',
-        getLabel: () => i18n.t('Data'),
+        label: i18n.t('Data'),
         content: [
             {
                 key: 'data-display',
-                getLabel: () => i18n.t('Display'),
+                label: i18n.t('Display'),
                 content: React.Children.toArray([
                     <CumulativeValues />,
                     <HideEmptyRowItems />,
                     <SortOrder />,
                 ]),
             },
-            {
-                key: 'data-lines',
-                getLabel: () => i18n.t('Lines'),
-                content: React.Children.toArray([
-                    <RegressionType />,
-                    <TargetLine />,
-                    <BaseLine />,
-                ]),
-            },
+            getLinesSection(hasCustomAxes),
             {
                 key: 'data-advanced',
-                getLabel: () => i18n.t('Advanced'),
+                label: i18n.t('Advanced'),
                 content: React.Children.toArray([
                     <AggregationType />,
                     <CompletedOnly />,
@@ -57,28 +44,19 @@ export default [
     },
     {
         key: 'axes-tab',
-        getLabel: () => i18n.t('Axes'),
+        label: i18n.t('Axes'),
         content: [
-            {
-                key: 'axes-vertical-axis',
-                getLabel: () => i18n.t('Vertical (y) axis'),
-                content: React.Children.toArray([
-                    <RangeAxisLabel />,
-                    <AxisRange />,
-                    <RangeAxisSteps />,
-                    <RangeAxisDecimals />,
-                ]),
-            },
+            getVerticalAxisSection(hasCustomAxes),
             {
                 key: 'axes-horizontal-axis',
-                getLabel: () => i18n.t('Horizontal (x) axis'),
+                label: i18n.t('Horizontal (x) axis'),
                 content: React.Children.toArray([<DomainAxisLabel />]),
             },
         ],
     },
     {
         key: 'series-tab',
-        getLabel: () => i18n.t('Series'),
+        label: i18n.t('Series'),
         content: [
             {
                 key: 'series-table',
@@ -88,11 +66,11 @@ export default [
     },
     {
         key: 'style-tab',
-        getLabel: () => i18n.t('Style'),
+        label: i18n.t('Style'),
         content: [
             {
                 key: 'style-chart-style',
-                getLabel: () => i18n.t('Chart style'),
+                label: i18n.t('Chart style'),
                 content: React.Children.toArray([
                     <ShowData />,
                     <NoSpaceBetweenColumns />,
@@ -102,7 +80,7 @@ export default [
             },
             {
                 key: 'style-titles',
-                getLabel: () => i18n.t('Titles'),
+                label: i18n.t('Titles'),
                 content: React.Children.toArray([
                     <HideTitle />,
                     <HideSubtitle />,
diff --git a/packages/app/src/reducers/ui.js b/packages/app/src/reducers/ui.js
index 34d80f6e62..dd9ad2823c 100644
--- a/packages/app/src/reducers/ui.js
+++ b/packages/app/src/reducers/ui.js
@@ -299,12 +299,15 @@ export const sGetAxes = state => sGetUi(state).axes
 
 // Selectors level 2
 
-export const getAxisIdByDimensionId = (state, dimensionId) =>
+export const sGetAxisIdByDimensionId = (state, dimensionId) =>
     (getInverseLayout(sGetUiLayout(state)) || {})[dimensionId]
 
 export const sGetUiItemsByDimension = (state, dimension) =>
     sGetUiItems(state)[dimension] || DEFAULT_UI.itemsByDimension[dimension]
 
+export const sGetDimensionItemsByAxis = (state, axisId) =>
+    sGetUiItemsByDimension(state, (sGetUiLayout(state) || {})[axisId]) || []
+
 export const sGetDimensionIdsFromLayout = state =>
     Object.values(sGetUiLayout(state)).reduce(
         (ids, axisDimensionIds) => ids.concat(axisDimensionIds),
diff --git a/packages/plugin/package.json b/packages/plugin/package.json
index e43774deec..5a220e286b 100644
--- a/packages/plugin/package.json
+++ b/packages/plugin/package.json
@@ -10,7 +10,7 @@
         "access": "public"
     },
     "dependencies": {
-        "@dhis2/analytics": "^8.0.0",
+        "@dhis2/analytics": "^8.1.0",
         "@dhis2/ui": "^5.3.0",
         "lodash-es": "^4.17.11"
     },
diff --git a/yarn.lock b/yarn.lock
index 8dad59241c..26c2537fc8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1524,10 +1524,10 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
-"@dhis2/analytics@^8.0.0":
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-8.0.0.tgz#146f1d4c36c4117de5d4d05cd35205c5012eb983"
-  integrity sha512-o3ryWHiMUp24SY88M7mdg9R8egnGbZ6StgZTmmkAN7/iGhFD75alVaUHXFQvt/06Pt5dz+fK7Ys0pZqB+Ywz2A==
+"@dhis2/analytics@^8.1.0":
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-8.1.0.tgz#fea90bb51930efbcc97bb9d14297e767613e65fa"
+  integrity sha512-8h4mN1HNFclGRm8JH0H9lvLCULvUxd5+O4VC0SPDa8uAGqs424Jj2g8/5x1ytwAKew30xkxyESSYyGysh8SEVg==
   dependencies:
     "@dhis2/d2-ui-org-unit-dialog" "^7.0.4"
     "@dhis2/ui" "^5.3.0"