diff --git a/packages/page-explorer/src/Api/index.tsx b/packages/page-explorer/src/Api/index.tsx
index 94ed576913..1090e830f4 100644
--- a/packages/page-explorer/src/Api/index.tsx
+++ b/packages/page-explorer/src/Api/index.tsx
@@ -133,14 +133,14 @@ function Api ({ className }: Props): React.ReactElement<Props> {
         colors={COLORS_REQUESTS}
         legends={requestsLegend}
         options={OPTIONS}
-        title={t<string>('requests')}
+        title={t<string>('requests made')}
         value={requestsChart}
       />
       <Chart
         colors={COLORS_BYTES}
         legends={bytesLegend}
         options={OPTIONS}
-        title={t<string>('transfer')}
+        title={t<string>('bytes transferred')}
         value={bytesChart}
       />
     </StyledDiv>
diff --git a/packages/page-explorer/src/Latency/Chart.tsx b/packages/page-explorer/src/Latency/Chart.tsx
index a3b099dd69..e8454db352 100644
--- a/packages/page-explorer/src/Latency/Chart.tsx
+++ b/packages/page-explorer/src/Latency/Chart.tsx
@@ -26,12 +26,12 @@ const OPTIONS: ChartOptions = {
 function ChartDisplay ({ className, colors, legends, options, title, value: { labels, values } }: Props): React.ReactElement<Props> {
   return (
     <StyledDiv className={className}>
-      <h1>{title}</h1>
       <Chart.Line
         colors={colors}
         labels={labels}
         legends={legends}
         options={options || OPTIONS}
+        title={title}
         values={values}
       />
     </StyledDiv>
diff --git a/packages/page-referenda/src/Referenda/Referendum.tsx b/packages/page-referenda/src/Referenda/Referendum.tsx
index 166e4e9401..c0efc58d65 100644
--- a/packages/page-referenda/src/Referenda/Referendum.tsx
+++ b/packages/page-referenda/src/Referenda/Referendum.tsx
@@ -406,17 +406,17 @@ function Referendum (props: Props): React.ReactElement<Props> {
         >
           {chartProps && (
             <Columar>
-              <Columar.Column className='chartColumn'>
-                <h1>{t<string>('approval / {{percent}}%', { replace: { percent: chartProps[0].progress.percent.toFixed(1) } })}</h1>
+              <Columar.Column>
                 <Chart.Line
                   legends={chartLegend[0]}
+                  title={t<string>('approval / {{percent}}%', { replace: { percent: chartProps[0].progress.percent.toFixed(1) } })}
                   {...chartProps[0]}
                 />
               </Columar.Column>
-              <Columar.Column className='chartColumn'>
-                <h1>{t<string>('support / {{percent}}%', { replace: { percent: chartProps[1].progress.percent.toFixed(1) } })}</h1>
+              <Columar.Column>
                 <Chart.Line
                   legends={chartLegend[1]}
+                  title={t<string>('support / {{percent}}%', { replace: { percent: chartProps[1].progress.percent.toFixed(1) } })}
                   {...chartProps[1]}
                 />
               </Columar.Column>
@@ -478,14 +478,6 @@ function Referendum (props: Props): React.ReactElement<Props> {
 }
 
 const StyledTr = styled.tr`
-  .chartColumn {
-    h1 {
-      margin-bottom: 0;
-      margin-top: 1rem;
-      padding-left: 3rem;
-    }
-  }
-
   .shortHash {
     max-width: var(--width-shorthash);
     min-width: 3em;
diff --git a/packages/page-staking/src/Query/Chart.tsx b/packages/page-staking/src/Query/Chart.tsx
index 3341f4ff4a..868fe8e87a 100644
--- a/packages/page-staking/src/Query/Chart.tsx
+++ b/packages/page-staking/src/Query/Chart.tsx
@@ -11,13 +11,13 @@ import { Chart, Spinner } from '@polkadot/react-components';
 interface Props {
   className?: string;
   colors: (string | undefined)[];
-  header: string;
   labels: string[];
   legends: string[];
+  title: string;
   values: LineData;
 }
 
-function ChartDisplay ({ className = '', colors, header, labels, legends, values }: Props): React.ReactElement<Props> {
+function ChartDisplay ({ className = '', colors, labels, legends, title, values }: Props): React.ReactElement<Props> {
   const isLoading = useMemo(
     () => !labels || labels.length === 0 || !values || values.length === 0 || !values[0] || !values[0].length,
     [labels, values]
@@ -25,11 +25,11 @@ function ChartDisplay ({ className = '', colors, header, labels, legends, values
 
   return (
     <StyledDiv className={`${className} staking--Chart ${isLoading ? 'isLoading' : ''}`}>
-      <h1>{header}</h1>
       <Chart.Line
         colors={colors}
         labels={labels}
         legends={legends}
+        title={title}
         values={values}
       />
       {isLoading && (
diff --git a/packages/page-staking/src/Query/ChartPoints.tsx b/packages/page-staking/src/Query/ChartPoints.tsx
index 2bca07c730..9c28b636b7 100644
--- a/packages/page-staking/src/Query/ChartPoints.tsx
+++ b/packages/page-staking/src/Query/ChartPoints.tsx
@@ -65,9 +65,9 @@ function ChartPoints ({ labels, validatorId }: Props): React.ReactElement<Props>
   return (
     <Chart
       colors={COLORS_POINTS}
-      header={t<string>('era points')}
       labels={labels}
       legends={legendsRef.current}
+      title={t<string>('era points')}
       values={values}
     />
   );
diff --git a/packages/page-staking/src/Query/ChartPrefs.tsx b/packages/page-staking/src/Query/ChartPrefs.tsx
index 2939a1bf93..c465305620 100644
--- a/packages/page-staking/src/Query/ChartPrefs.tsx
+++ b/packages/page-staking/src/Query/ChartPrefs.tsx
@@ -70,9 +70,9 @@ function ChartPrefs ({ labels, validatorId }: Props): React.ReactElement<Props>
   return (
     <Chart
       colors={COLORS_POINTS}
-      header={t<string>('commission')}
       labels={labels}
       legends={legendsRef.current}
+      title={t<string>('commission')}
       values={values}
     />
   );
diff --git a/packages/page-staking/src/Query/ChartRewards.tsx b/packages/page-staking/src/Query/ChartRewards.tsx
index edbe7460ce..1a2b3289d2 100644
--- a/packages/page-staking/src/Query/ChartRewards.tsx
+++ b/packages/page-staking/src/Query/ChartRewards.tsx
@@ -93,9 +93,9 @@ function ChartRewards ({ labels, validatorId }: Props): React.ReactElement<Props
   return (
     <Chart
       colors={COLORS_REWARD}
-      header={t<string>('rewards & slashes')}
       labels={labels}
       legends={legends}
+      title={t<string>('rewards & slashes')}
       values={values}
     />
   );
diff --git a/packages/page-staking/src/Query/ChartStake.tsx b/packages/page-staking/src/Query/ChartStake.tsx
index c11e7cb240..b57a3dcd30 100644
--- a/packages/page-staking/src/Query/ChartStake.tsx
+++ b/packages/page-staking/src/Query/ChartStake.tsx
@@ -83,9 +83,9 @@ function ChartStake ({ labels, validatorId }: Props): React.ReactElement<Props>
   return (
     <Chart
       colors={COLORS_STAKE}
-      header={t<string>('elected stake')}
       labels={labels}
       legends={legends}
+      title={t<string>('elected stake')}
       values={values}
     />
   );
diff --git a/packages/react-components/src/Chart/Line.tsx b/packages/react-components/src/Chart/Line.tsx
index 2cbf694ef6..3bbd8f072c 100644
--- a/packages/react-components/src/Chart/Line.tsx
+++ b/packages/react-components/src/Chart/Line.tsx
@@ -6,6 +6,7 @@ import type { BN } from '@polkadot/util';
 
 import React, { useMemo } from 'react';
 import * as Chart from 'react-chartjs-2';
+import styled from 'styled-components';
 
 import { isBn, objectSpread } from '@polkadot/util';
 
@@ -19,6 +20,7 @@ export interface Props {
   legends: string[];
   options?: ChartOptions;
   values: (number | BN)[][];
+  title?: React.ReactNode;
 }
 
 interface Dataset {
@@ -84,7 +86,10 @@ const BASE_OPTS: ChartOptions = {
   },
   scales: {
     x: {
-      beginAtZero: true
+      ticks: {
+        maxRotation: 60,
+        minRotation: 60
+      }
     }
   }
 };
@@ -97,6 +102,10 @@ function getOptions (options: ChartOptions = {}): ChartOptions {
       annotation: objectSpread({}, BASE_OPTS.plugins?.annotation, options.plugins?.annotation),
       crosshair: objectSpread({}, BASE_OPTS.plugins?.crosshair, options.plugins?.crosshair),
       tooltip: objectSpread({}, BASE_OPTS.plugins?.tooltip, options.plugins?.tooltip)
+    }),
+    scales: objectSpread({}, BASE_OPTS.scales, options.scales, {
+      x: objectSpread({}, BASE_OPTS.scales?.x, options.scales?.x),
+      y: objectSpread({}, BASE_OPTS.scales?.y, options.scales?.y)
     })
   });
 }
@@ -121,7 +130,7 @@ function getData (colors: (string | undefined)[] = [], legends: string[], labels
   }, { datasets: [] as Dataset[], labels });
 }
 
-function LineChart ({ className = '', colors, labels, legends, options, values }: Props): React.ReactElement<Props> | null {
+function LineChart ({ className = '', colors, labels, legends, options, title, values }: Props): React.ReactElement<Props> | null {
   const chartOptions = useMemo(
     () => getOptions(options),
     [options]
@@ -133,7 +142,8 @@ function LineChart ({ className = '', colors, labels, legends, options, values }
   );
 
   return (
-    <div className={`${className} ui--Chart-Line`}>
+    <StyledDiv className={`${className} ui--Chart-Line`}>
+      {title && <h1 className='ui--Chart-Header'>{title}</h1>}
       <ErrorBoundary>
         <Chart.Line
           // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
@@ -142,8 +152,16 @@ function LineChart ({ className = '', colors, labels, legends, options, values }
           options={chartOptions as any}
         />
       </ErrorBoundary>
-    </div>
+    </StyledDiv>
   );
 }
 
+const StyledDiv = styled.div`
+  h1.ui--Chart-Header {
+    margin-bottom: 0.25rem;
+    margin-top: 1rem;
+    padding-left: 0.25rem;
+  }
+`;
+
 export default React.memo(LineChart);
diff --git a/packages/react-components/src/Table/index.tsx b/packages/react-components/src/Table/index.tsx
index e9e406baa7..5d59e1f020 100644
--- a/packages/react-components/src/Table/index.tsx
+++ b/packages/react-components/src/Table/index.tsx
@@ -375,6 +375,10 @@ const StyledDiv = styled.div`
           * + h5 {
             margin-top: 1rem;
           }
+
+          .ui--Chart-Line {
+            padding: 0 0.5rem;
+          }
         }
       }