diff --git a/packages/graphing/src/axis/axes.jsx b/packages/graphing/src/axis/axes.jsx
index fed4375f8..5df696680 100644
--- a/packages/graphing/src/axis/axes.jsx
+++ b/packages/graphing/src/axis/axes.jsx
@@ -25,19 +25,19 @@ const StyledArrow = styled(Arrow)(() => ({
fill: color.defaults.PRIMARY,
}));
-const StyledLabel = styled('div')(({ theme }) => ({
- fontSize: theme.typography.fontSize,
-}));
-const StyledAxisLabelHolder = styled('div')(({ theme }) => ({
+const StyledAxisLabelHolder = styled('div')(({ theme, centered }) => ({
padding: 0,
margin: 0,
- textAlign: 'center',
'* > *': {
margin: 0,
padding: 0,
},
+ '& p': {
+ margin: 0,
+ },
fontSize: theme.typography.fontSize,
+ ...(centered && { textAlign: 'center' }),
}));
const StyledAxesGroup = styled('g')(() => ({
@@ -129,7 +129,9 @@ export class RawXAxis extends React.Component {
{includeArrows && includeArrows.right && }
{domain.axisLabel && (
-
+
+
+
)}
@@ -186,7 +188,7 @@ export class RawYAxis extends React.Component {
{range.axisLabel && (
-
+
)}
diff --git a/packages/graphing/src/grid-setup.jsx b/packages/graphing/src/grid-setup.jsx
index c8029dfe8..178f10c57 100644
--- a/packages/graphing/src/grid-setup.jsx
+++ b/packages/graphing/src/grid-setup.jsx
@@ -118,6 +118,15 @@ const AxisConfig = (props) => {
const { axisLabel = {}, min = {}, max = {} } = displayedFields;
const activePlugins = ['bold', 'italic', 'underline', 'strikethrough'];
+ const onKeyDown = (event) => {
+ if (event.key === 'Enter') {
+ // prevent adding new lines - cancelling event
+ return true;
+ }
+
+ return false;
+ };
+
return (
{displayHeader && (
@@ -159,6 +168,7 @@ const AxisConfig = (props) => {
onChange={(value) => onChange('axisLabel', value)}
markup={label || ''}
charactersLimit={5}
+ onKeyDown={onKeyDown}
activePlugins={activePlugins}
/>