diff --git a/components/aggregation/mat/GridChart.js b/components/aggregation/mat/GridChart.js
index e1f2f0e19..b123f35b5 100644
--- a/components/aggregation/mat/GridChart.js
+++ b/components/aggregation/mat/GridChart.js
@@ -10,6 +10,7 @@ import { useMATContext } from './MATContext'
 import { ChartHeader } from './ChartHeader'
 import { getRowLabel } from './labels'
 import { VirtualRows } from './VirtualRows'
+import { XAxis } from './XAxis'
 
 const ROW_HEIGHT = 70
 const GRID_MAX_HEIGHT = 600
@@ -139,28 +140,7 @@ const GridChart = ({ data, rowKeys, rowLabels, isGrouped = true, height = 'auto'
       <Flex flexDirection='column'>
         <ChartHeader options={header} />
         {/* Fake axis on top of list. Possible alternative: dummy chart with axis and valid tickValues */}
-        <Flex>
-          {!noLabels && <Box width={2/16}>
-          </Box>}
-          <Box className='xAxis' sx={{ width: '100%', height: '62px' }}>
-            <ResponsiveBar
-              data={xAxisData}
-              indexBy={query.axis_x}
-              margin={xAxisMargins}
-              padding={0.3}
-              indexScale={{
-                type: 'band',
-                round: false
-              }}
-              layers={['axes']}
-              axisTop={axisTop}
-              axisBottom={null}
-              axisLeft={null}
-              axisRight={null}
-              animate={false}
-            />
-          </Box>
-        </Flex>
+        {!noLabels && <XAxis data={xAxisData} />}
         {/* Use a virtual list only for higher count of rows */}
         {rowsToRender.length < 10 ? (
           <Flex
diff --git a/components/aggregation/mat/RowChart.js b/components/aggregation/mat/RowChart.js
index 0aabf3026..542d2840e 100644
--- a/components/aggregation/mat/RowChart.js
+++ b/components/aggregation/mat/RowChart.js
@@ -8,6 +8,7 @@ import { CustomToolTip, barThemeForTooltip } from './CustomTooltip'
 import { colorMap } from './colorMap'
 import { useDebugContext } from '../DebugContext'
 import { useMATContext } from './MATContext'
+import { getXAxisTicks } from './timeScaleXAxis'
 
 const keys = [
   'anomaly_count',
@@ -21,9 +22,83 @@ const colorFunc = (d) => colorMap[d.id] || '#ccc'
 const barLayers = ['grid', 'axes', 'bars']
 export const chartMargins = { top: 4, right: 50, bottom: 4, left: 0 }
 
-const RowChart = ({ data, indexBy, label, height, rowIndex /* width, first, last */}) => {
-  const [ { tooltipIndex }, updateMATContext ] = useMATContext()
+const chartProps1D = {
+  colors: colorFunc,
+  indexScale: {
+    type: 'band',
+    round: false
+  },
+  margin: {
+    top: 50,
+    right: 30,
+    bottom: 100,
+    left: 80
+  },
+  padding: 0.3,
+  borderColor: { from: 'color', modifiers: [ [ 'darker', 1.6 ] ] },
+  axisTop: null,
+  axisRight: null,
+  axisBottom: {
+    tickSize: 5,
+    tickPadding: 5,
+    tickRotation: 45,
+    legend: 'measurement_start_day',
+    legendPosition: 'middle',
+    legendOffset: 60
+  },
+  axisLeft: {
+    tickSize: 5,
+    tickPadding: 5,
+    tickRotation: 0,
+    legend: 'measurement count',
+    legendPosition: 'middle',
+    legendOffset: -60
+  },
+  labelSkipWidth: 80,
+  labelSkipHeight: 20,
+  labelTextColor: { from: 'color', modifiers: [ [ 'darker', 1.6 ] ] },
+  animate: true,
+  motionStiffness: 90,
+  motionDamping: 15,
+}
+
+const chartProps2D = {
+  // NOTE: These dimensions are linked to accuracy of the custom axes rendered in
+  // <GridChart />
+  margin: chartMargins,
+  padding: 0.3,
+  borderColor: { from: 'color', modifiers: [ [ 'darker', 1.6 ] ] },
+  colors: colorFunc,
+  axisTop: null,
+  axisRight: {
+    enable: true,
+    tickSize: 5,
+    tickPadding: 5,
+    tickValues: 2
+  },
+  axisBottom: null,
+  axisLeft: null,
+  enableGridX: true,
+  enableGridY: true,
+  indexScale: {
+    type: 'band',
+    round: false
+  },
+  labelSkipWidth: 100,
+  labelSkipHeight: 100,
+  labelTextColor: { from: 'color', modifiers: [ [ 'darker', 1.6 ] ] },
+  // We send the `showTooltip` boolean into the barComponent to control visibility of tooltip
+  motionConfig: {
+    duration: 1
+  },
+  animate: false,
+  isInteractive: true,
+  layers: barLayers,
+}
 
+const RowChart = ({ data, indexBy, label, height, rowIndex /* width, first, last */}) => {
+  const [ query, updateMATContext ] = useMATContext()
+  const { tooltipIndex } = query
 
   const handleClick = useCallback(({ column }) => {
     updateMATContext({ tooltipIndex: [rowIndex, column]}, true)
@@ -45,7 +120,13 @@ const RowChart = ({ data, indexBy, label, height, rowIndex /* width, first, last
     }
   }, [data])
 
-  const chartProps = useMemo(() => ({
+  const chartProps = useMemo(() => {
+    const xAxisTicks = getXAxisTicks(query)
+    chartProps1D.axisBottom.tickValues = xAxisTicks
+    return label === undefined ? chartProps1D : chartProps2D
+  }, [label, query])
+
+  const chartPropsNull = useMemo(() => ({
     // NOTE: These dimensions are linked to accuracy of the custom axes rendered in
     // <GridChart />
     margin: chartMargins,
diff --git a/components/aggregation/mat/XAxis.js b/components/aggregation/mat/XAxis.js
new file mode 100644
index 000000000..38516a208
--- /dev/null
+++ b/components/aggregation/mat/XAxis.js
@@ -0,0 +1,44 @@
+import { ResponsiveBar } from '@nivo/bar'
+import { Box, Flex } from 'ooni-components'
+import { useMATContext } from './MATContext'
+
+import { getXAxisTicks } from './timeScaleXAxis'
+
+
+export const XAxis = ({ data }) => {
+  const [ query ] = useMATContext()
+  const xAxisTickValues = getXAxisTicks(query, 30)
+  const xAxisMargins = {right: 50, left: 0, top: 60, bottom: 0}
+  const axisTop = {
+    enable: true,
+    tickSize: 5,
+    tickPadding: 5,
+    tickRotation: -45,
+    tickValues: xAxisTickValues
+  }
+
+  return (
+    <Flex>
+      <Box width={2/16}>
+      </Box>
+      <Box className='xAxis' sx={{ width: '100%', height: '62px' }}>
+        <ResponsiveBar
+          data={data}
+          indexBy={query.axis_x}
+          margin={xAxisMargins}
+          padding={0.3}
+          indexScale={{
+            type: 'band',
+            round: false
+          }}
+          layers={['axes']}
+          axisTop={axisTop}
+          axisBottom={null}
+          axisLeft={null}
+          axisRight={null}
+          animate={false}
+        />
+      </Box>
+    </Flex>
+  )
+}
\ No newline at end of file