diff --git a/components/charts/composed-chart/axis-label.jsx b/components/charts/composed-chart/axis-label.jsx
index 8bf4b9aac4..40a828e3fa 100644
--- a/components/charts/composed-chart/axis-label.jsx
+++ b/components/charts/composed-chart/axis-label.jsx
@@ -1,7 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
+import cx from 'classnames';
-const AxisLabel = ({ label, direction }) => (
+const AxisLabel = ({ label, direction, isSimple = false }) => (
<>
(
className={`${direction}-label-container`}
>
- {label}
+
+ {label}
+
>
@@ -18,6 +25,7 @@ const AxisLabel = ({ label, direction }) => (
AxisLabel.propTypes = {
label: PropTypes.string,
direction: PropTypes.string,
+ isSimple: PropTypes.bool,
};
export default AxisLabel;
diff --git a/components/charts/composed-chart/component.jsx b/components/charts/composed-chart/component.jsx
index d726c5a6c2..c95d23bfae 100644
--- a/components/charts/composed-chart/component.jsx
+++ b/components/charts/composed-chart/component.jsx
@@ -177,6 +177,7 @@ class CustomComposedChart extends PureComponent {
,
+ label: (
+
+ ),
})}
/>
{(!simple || simpleNeedsAxis) && (
diff --git a/components/charts/composed-chart/styles.scss b/components/charts/composed-chart/styles.scss
index edd0eee7f2..c9b3aac083 100644
--- a/components/charts/composed-chart/styles.scss
+++ b/components/charts/composed-chart/styles.scss
@@ -49,6 +49,10 @@ $layout-breakpoint-3xl: 1536px;
overflow-x: visible !important;
}
+.no-padding {
+ padding: 0 !important;
+}
+
.x-label-container,
.y-label-container {
position: relative;
@@ -58,6 +62,10 @@ $layout-breakpoint-3xl: 1536px;
span {
font-size: 0.8125rem;
+
+ &.simple-mode-label {
+ font-size: 0.625rem !important;
+ }
}
}
diff --git a/components/widget/components/widget-footer/styles.scss b/components/widget/components/widget-footer/styles.scss
index 2993c87966..9accdc6d5c 100644
--- a/components/widget/components/widget-footer/styles.scss
+++ b/components/widget/components/widget-footer/styles.scss
@@ -23,6 +23,7 @@
}
&.simple {
+ margin-top: 1.25rem;
font-size: rem(10px);
p {
diff --git a/components/widgets/land-cover/tree-cover-density/index.js b/components/widgets/land-cover/tree-cover-density/index.js
index e1dcff3881..d8e37bc1c5 100644
--- a/components/widgets/land-cover/tree-cover-density/index.js
+++ b/components/widgets/land-cover/tree-cover-density/index.js
@@ -19,7 +19,7 @@ export default {
types: ['country', 'wdpa', 'aoi'],
admins: ['adm0', 'adm1', 'adm2'],
large: true,
- visible: ['dashboard'],
+ visible: ['dashboard', 'analysis'],
chartType: 'composedChart',
colors: 'density',
settingsConfig: [