diff --git a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap
index 26fe4dc72921d..54bb3efd75b39 100644
--- a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap
+++ b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap
@@ -51,6 +51,7 @@ exports[`xy_expression XYChart component it renders area 1`] = `
"visible": true,
},
"tickLabel": Object {
+ "rotation": 0,
"visible": true,
},
}
@@ -81,6 +82,7 @@ exports[`xy_expression XYChart component it renders area 1`] = `
"visible": true,
},
"tickLabel": Object {
+ "rotation": -90,
"visible": false,
},
}
@@ -266,6 +268,7 @@ exports[`xy_expression XYChart component it renders bar 1`] = `
"visible": true,
},
"tickLabel": Object {
+ "rotation": 0,
"visible": true,
},
}
@@ -296,6 +299,7 @@ exports[`xy_expression XYChart component it renders bar 1`] = `
"visible": true,
},
"tickLabel": Object {
+ "rotation": -90,
"visible": false,
},
}
@@ -493,6 +497,7 @@ exports[`xy_expression XYChart component it renders horizontal bar 1`] = `
"visible": true,
},
"tickLabel": Object {
+ "rotation": 0,
"visible": true,
},
}
@@ -523,6 +528,7 @@ exports[`xy_expression XYChart component it renders horizontal bar 1`] = `
"visible": true,
},
"tickLabel": Object {
+ "rotation": -90,
"visible": false,
},
}
@@ -720,6 +726,7 @@ exports[`xy_expression XYChart component it renders line 1`] = `
"visible": true,
},
"tickLabel": Object {
+ "rotation": 0,
"visible": true,
},
}
@@ -750,6 +757,7 @@ exports[`xy_expression XYChart component it renders line 1`] = `
"visible": true,
},
"tickLabel": Object {
+ "rotation": -90,
"visible": false,
},
}
@@ -935,6 +943,7 @@ exports[`xy_expression XYChart component it renders stacked area 1`] = `
"visible": true,
},
"tickLabel": Object {
+ "rotation": 0,
"visible": true,
},
}
@@ -965,6 +974,7 @@ exports[`xy_expression XYChart component it renders stacked area 1`] = `
"visible": true,
},
"tickLabel": Object {
+ "rotation": -90,
"visible": false,
},
}
@@ -1158,6 +1168,7 @@ exports[`xy_expression XYChart component it renders stacked bar 1`] = `
"visible": true,
},
"tickLabel": Object {
+ "rotation": 0,
"visible": true,
},
}
@@ -1188,6 +1199,7 @@ exports[`xy_expression XYChart component it renders stacked bar 1`] = `
"visible": true,
},
"tickLabel": Object {
+ "rotation": -90,
"visible": false,
},
}
@@ -1393,6 +1405,7 @@ exports[`xy_expression XYChart component it renders stacked horizontal bar 1`] =
"visible": true,
},
"tickLabel": Object {
+ "rotation": 0,
"visible": true,
},
}
@@ -1423,6 +1436,7 @@ exports[`xy_expression XYChart component it renders stacked horizontal bar 1`] =
"visible": true,
},
"tickLabel": Object {
+ "rotation": -90,
"visible": false,
},
}
diff --git a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap
index bcf54c6696ee0..3bd0e9354c158 100644
--- a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap
+++ b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap
@@ -64,6 +64,28 @@ Object {
"hideEndzones": Array [
true,
],
+ "labelsOrientation": Array [
+ Object {
+ "chain": Array [
+ Object {
+ "arguments": Object {
+ "x": Array [
+ 0,
+ ],
+ "yLeft": Array [
+ -90,
+ ],
+ "yRight": Array [
+ -45,
+ ],
+ },
+ "function": "lens_xy_labelsOrientationConfig",
+ "type": "function",
+ },
+ ],
+ "type": "expression",
+ },
+ ],
"layers": Array [
Object {
"chain": Array [
diff --git a/x-pack/plugins/lens/public/xy_visualization/axis_settings_popover.test.tsx b/x-pack/plugins/lens/public/xy_visualization/axis_settings_popover.test.tsx
index 2e5fdf8493e24..11dc6efad01e0 100644
--- a/x-pack/plugins/lens/public/xy_visualization/axis_settings_popover.test.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/axis_settings_popover.test.tsx
@@ -34,6 +34,8 @@ describe('Axes Settings', () => {
toggleGridlinesVisibility: jest.fn(),
hasBarOrAreaOnAxis: false,
hasPercentageAxis: false,
+ orientation: 0,
+ setOrientation: jest.fn(),
};
});
@@ -82,6 +84,21 @@ describe('Axes Settings', () => {
);
});
+ it('has selected the horizontal option on the orientation group', () => {
+ const component = shallow();
+ expect(
+ component.find('[data-test-subj="lnsXY_axisOrientation_groups"]').prop('idSelected')
+ ).toEqual('xy_axis_orientation_horizontal');
+ });
+
+ it('should have called the setOrientation function on orientation button group change', () => {
+ const component = shallow();
+ component
+ .find('[data-test-subj="lnsXY_axisOrientation_groups"]')
+ .simulate('change', 'xy_axis_orientation_angled');
+ expect(props.setOrientation).toHaveBeenCalled();
+ });
+
it('hides the endzone visibility flag if no setter is passed in', () => {
const component = shallow();
expect(component.find('[data-test-subj="lnsshowEndzones"]').length).toBe(0);
diff --git a/x-pack/plugins/lens/public/xy_visualization/axis_settings_popover.tsx b/x-pack/plugins/lens/public/xy_visualization/axis_settings_popover.tsx
index a0d1dae2145d5..a2d65e92ebcdc 100644
--- a/x-pack/plugins/lens/public/xy_visualization/axis_settings_popover.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/axis_settings_popover.tsx
@@ -57,6 +57,14 @@ export interface AxisSettingsPopoverProps {
* Determines if the ticklabels of the axis are visible
*/
areTickLabelsVisible: boolean;
+ /**
+ * Determines the axis labels orientation
+ */
+ orientation: number;
+ /**
+ * Callback on orientation option change
+ */
+ setOrientation: (axis: AxesSettingsConfigKeys, orientation: number) => void;
/**
* Toggles the axis tickLabels visibility
*/
@@ -151,6 +159,33 @@ const popoverConfig = (
};
}
};
+const axisOrientationOptions: Array<{
+ id: string;
+ value: 0 | -90 | -45;
+ label: string;
+}> = [
+ {
+ id: 'xy_axis_orientation_horizontal',
+ value: 0,
+ label: i18n.translate('xpack.lens.xyChart.axisOrientation.horizontal', {
+ defaultMessage: 'Horizontal',
+ }),
+ },
+ {
+ id: 'xy_axis_orientation_vertical',
+ value: -90,
+ label: i18n.translate('xpack.lens.xyChart.axisOrientation.vertical', {
+ defaultMessage: 'Vertical',
+ }),
+ },
+ {
+ id: 'xy_axis_orientation_angled',
+ value: -45,
+ label: i18n.translate('xpack.lens.xyChart.axisOrientation.angled', {
+ defaultMessage: 'Angled',
+ }),
+ },
+];
const noop = () => {};
const idPrefix = htmlIdGenerator()();
@@ -165,6 +200,8 @@ export const AxisSettingsPopover: React.FunctionComponent
+ toggleGridlinesVisibility(axis)}
+ checked={areGridlinesVisible}
+ />
+
toggleTickLabelsVisibility(axis)}
checked={areTickLabelsVisible}
/>
-
-
+ toggleGridlinesVisibility(axis)}
- checked={areGridlinesVisible}
- />
+ >
+ value === orientation)!.id}
+ onChange={(optionId) => {
+ const newOrientation = axisOrientationOptions.find(({ id }) => id === optionId)!.value;
+ setOrientation(axis, newOrientation);
+ }}
+ />
+
{setEndzoneVisibility && (
<>
diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx
index b018e62f1fd8f..e2066584f66b6 100644
--- a/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx
@@ -42,6 +42,8 @@ import {
AxesSettingsConfig,
tickLabelsConfig,
gridlinesConfig,
+ labelsOrientationConfig,
+ LabelsOrientationConfig,
} from './types';
import { createMockExecutionContext } from '../../../../../src/plugins/expressions/common/mocks';
import { mountWithIntl } from '@kbn/test/jest';
@@ -287,6 +289,12 @@ const createArgsWithLayers = (layers: LayerArgs[] = [sampleLayer]): XYArgs => ({
yLeft: false,
yRight: false,
},
+ labelsOrientation: {
+ type: 'lens_xy_labelsOrientationConfig',
+ x: 0,
+ yLeft: -90,
+ yRight: -45,
+ },
yLeftExtent: {
mode: 'full',
type: 'lens_xy_axisExtentConfig',
@@ -371,6 +379,21 @@ describe('xy_expression', () => {
});
});
+ test('labelsOrientationConfig produces the correct arguments', () => {
+ const args: LabelsOrientationConfig = {
+ x: 0,
+ yLeft: -90,
+ yRight: -45,
+ };
+
+ const result = labelsOrientationConfig.fn(null, args, createMockExecutionContext());
+
+ expect(result).toEqual({
+ type: 'lens_xy_labelsOrientationConfig',
+ ...args,
+ });
+ });
+
test('gridlinesConfig produces the correct arguments', () => {
const args: AxesSettingsConfig = {
x: true,
@@ -1945,6 +1968,27 @@ describe('xy_expression', () => {
});
});
+ test('it should set the tickLabel orientation on the x axis', () => {
+ const { data, args } = sampleArgs();
+
+ args.labelsOrientation = {
+ x: -45,
+ yLeft: 0,
+ yRight: -90,
+ type: 'lens_xy_labelsOrientationConfig',
+ };
+
+ const instance = shallow();
+
+ const axisStyle = instance.find(Axis).first().prop('style');
+
+ expect(axisStyle).toMatchObject({
+ tickLabel: {
+ rotation: -45,
+ },
+ });
+ });
+
test('it should set the tickLabel visibility on the y axis if the tick labels is hidden', () => {
const { data, args } = sampleArgs();
@@ -1966,6 +2010,27 @@ describe('xy_expression', () => {
});
});
+ test('it should set the tickLabel orientation on the y axis', () => {
+ const { data, args } = sampleArgs();
+
+ args.labelsOrientation = {
+ x: -45,
+ yLeft: -90,
+ yRight: -90,
+ type: 'lens_xy_labelsOrientationConfig',
+ };
+
+ const instance = shallow();
+
+ const axisStyle = instance.find(Axis).at(1).prop('style');
+
+ expect(axisStyle).toMatchObject({
+ tickLabel: {
+ rotation: -90,
+ },
+ });
+ });
+
test('it should set the tickLabel visibility on the x axis if the tick labels is shown', () => {
const { data, args } = sampleArgs();
@@ -2057,6 +2122,12 @@ describe('xy_expression', () => {
yLeft: false,
yRight: false,
},
+ labelsOrientation: {
+ type: 'lens_xy_labelsOrientationConfig',
+ x: 0,
+ yLeft: 0,
+ yRight: 0,
+ },
yLeftExtent: {
mode: 'full',
type: 'lens_xy_axisExtentConfig',
@@ -2139,6 +2210,12 @@ describe('xy_expression', () => {
yLeft: false,
yRight: false,
},
+ labelsOrientation: {
+ type: 'lens_xy_labelsOrientationConfig',
+ x: 0,
+ yLeft: 0,
+ yRight: 0,
+ },
yLeftExtent: {
mode: 'full',
type: 'lens_xy_axisExtentConfig',
diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
index 7c767cd1d1b04..b6487fa448314 100644
--- a/x-pack/plugins/lens/public/xy_visualization/expression.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
@@ -180,6 +180,12 @@ export const xyChart: ExpressionFunctionDefinition<
defaultMessage: 'Show x and y axes gridlines',
}),
},
+ labelsOrientation: {
+ types: ['lens_xy_labelsOrientationConfig'],
+ help: i18n.translate('xpack.lens.xyChart.labelsOrientation.help', {
+ defaultMessage: 'Defines the orientation of x and y axes',
+ }),
+ },
axisTitlesVisibilitySettings: {
types: ['lens_xy_axisTitlesVisibilityConfig'],
help: i18n.translate('xpack.lens.xyChart.axisTitlesSettings.help', {
@@ -425,6 +431,12 @@ export function XYChart({
yRight: true,
};
+ const labelsOrientation = args.labelsOrientation || {
+ x: 0,
+ yLeft: 0,
+ yRight: 0,
+ };
+
const filteredBarLayers = filteredLayers.filter((layer) => layer.seriesType.includes('bar'));
const chartHasMoreThanOneBarSeries =
@@ -466,6 +478,10 @@ export function XYChart({
groupId === 'right'
? tickLabelsVisibilitySettings?.yRight
: tickLabelsVisibilitySettings?.yLeft,
+ rotation:
+ groupId === 'right'
+ ? args.labelsOrientation?.yRight || 0
+ : args.labelsOrientation?.yLeft || 0,
},
axisTitle: {
visible:
@@ -664,6 +680,7 @@ export function XYChart({
style={{
tickLabel: {
visible: tickLabelsVisibilitySettings?.x,
+ rotation: labelsOrientation?.x,
},
axisTitle: {
visible: axisTitlesVisibilitySettings.x,
diff --git a/x-pack/plugins/lens/public/xy_visualization/index.ts b/x-pack/plugins/lens/public/xy_visualization/index.ts
index f29d0f9280246..6263d941688a7 100644
--- a/x-pack/plugins/lens/public/xy_visualization/index.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/index.ts
@@ -34,6 +34,7 @@ export class XyVisualization {
gridlinesConfig,
axisTitlesVisibilityConfig,
axisExtentConfig,
+ labelsOrientationConfig,
layerConfig,
xyChart,
getXyChartRenderer,
@@ -45,6 +46,7 @@ export class XyVisualization {
expressions.registerFunction(() => yAxisConfig);
expressions.registerFunction(() => tickLabelsConfig);
expressions.registerFunction(() => axisExtentConfig);
+ expressions.registerFunction(() => labelsOrientationConfig);
expressions.registerFunction(() => gridlinesConfig);
expressions.registerFunction(() => axisTitlesVisibilityConfig);
expressions.registerFunction(() => layerConfig);
diff --git a/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts b/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts
index a7270bdf8f331..f43b633f4a716 100644
--- a/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts
@@ -50,6 +50,11 @@ describe('#toExpression', () => {
preferredSeriesType: 'bar',
fittingFunction: 'Carry',
tickLabelsVisibilitySettings: { x: false, yLeft: true, yRight: true },
+ labelsOrientation: {
+ x: 0,
+ yLeft: -90,
+ yRight: -45,
+ },
gridlinesVisibilitySettings: { x: false, yLeft: true, yRight: true },
hideEndzones: true,
yRightExtent: {
@@ -229,6 +234,31 @@ describe('#toExpression', () => {
});
});
+ it('should default the tick labels orientation settings to 0', () => {
+ const expression = xyVisualization.toExpression(
+ {
+ legend: { position: Position.Bottom, isVisible: true },
+ valueLabels: 'hide',
+ preferredSeriesType: 'bar',
+ layers: [
+ {
+ layerId: 'first',
+ seriesType: 'area',
+ splitAccessor: 'd',
+ xAccessor: 'a',
+ accessors: ['b', 'c'],
+ },
+ ],
+ },
+ frame.datasourceLayers
+ ) as Ast;
+ expect((expression.chain[0].arguments.labelsOrientation[0] as Ast).chain[0].arguments).toEqual({
+ x: [0],
+ yLeft: [0],
+ yRight: [0],
+ });
+ });
+
it('should default the gridlines visibility settings to true', () => {
const expression = xyVisualization.toExpression(
{
diff --git a/x-pack/plugins/lens/public/xy_visualization/to_expression.ts b/x-pack/plugins/lens/public/xy_visualization/to_expression.ts
index c89a5e81e35d0..b2ecdc5179ad4 100644
--- a/x-pack/plugins/lens/public/xy_visualization/to_expression.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/to_expression.ts
@@ -254,6 +254,22 @@ export const buildExpression = (
],
},
],
+ labelsOrientation: [
+ {
+ type: 'expression',
+ chain: [
+ {
+ type: 'function',
+ function: 'lens_xy_labelsOrientationConfig',
+ arguments: {
+ x: [state?.labelsOrientation?.x ?? 0],
+ yLeft: [state?.labelsOrientation?.yLeft ?? 0],
+ yRight: [state?.labelsOrientation?.yRight ?? 0],
+ },
+ },
+ ],
+ },
+ ],
valueLabels: [state?.valueLabels || 'hide'],
hideEndzones: [state?.hideEndzones || false],
valuesInLegend: [state?.valuesInLegend || false],
diff --git a/x-pack/plugins/lens/public/xy_visualization/types.ts b/x-pack/plugins/lens/public/xy_visualization/types.ts
index 609622186af20..06192b236dee5 100644
--- a/x-pack/plugins/lens/public/xy_visualization/types.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/types.ts
@@ -171,6 +171,58 @@ export const tickLabelsConfig: ExpressionFunctionDefinition<
},
};
+export interface LabelsOrientationConfig {
+ x: number;
+ yLeft: number;
+ yRight: number;
+}
+
+type LabelsOrientationConfigResult = LabelsOrientationConfig & {
+ type: 'lens_xy_labelsOrientationConfig';
+};
+
+export const labelsOrientationConfig: ExpressionFunctionDefinition<
+ 'lens_xy_labelsOrientationConfig',
+ null,
+ LabelsOrientationConfig,
+ LabelsOrientationConfigResult
+> = {
+ name: 'lens_xy_labelsOrientationConfig',
+ aliases: [],
+ type: 'lens_xy_labelsOrientationConfig',
+ help: `Configure the xy chart's tick labels orientation`,
+ inputTypes: ['null'],
+ args: {
+ x: {
+ types: ['number'],
+ options: [0, -90, -45],
+ help: i18n.translate('xpack.lens.xyChart.xAxisLabelsOrientation.help', {
+ defaultMessage: 'Specifies the labels orientation of the x-axis.',
+ }),
+ },
+ yLeft: {
+ types: ['number'],
+ options: [0, -90, -45],
+ help: i18n.translate('xpack.lens.xyChart.yLeftAxisLabelsOrientation.help', {
+ defaultMessage: 'Specifies the labels orientation of the left y-axis.',
+ }),
+ },
+ yRight: {
+ types: ['number'],
+ options: [0, -90, -45],
+ help: i18n.translate('xpack.lens.xyChart.yRightAxisLabelsOrientation.help', {
+ defaultMessage: 'Specifies the labels orientation of the right y-axis.',
+ }),
+ },
+ },
+ fn: function fn(input: unknown, args: LabelsOrientationConfig) {
+ return {
+ type: 'lens_xy_labelsOrientationConfig',
+ ...args,
+ };
+ },
+};
+
type GridlinesConfigResult = AxesSettingsConfig & { type: 'lens_xy_gridlinesConfig' };
export const gridlinesConfig: ExpressionFunctionDefinition<
@@ -507,6 +559,7 @@ export interface XYArgs {
};
tickLabelsVisibilitySettings?: AxesSettingsConfig & { type: 'lens_xy_tickLabelsConfig' };
gridlinesVisibilitySettings?: AxesSettingsConfig & { type: 'lens_xy_gridlinesConfig' };
+ labelsOrientation?: LabelsOrientationConfig & { type: 'lens_xy_labelsOrientationConfig' };
curveType?: XYCurveType;
fillOpacity?: number;
hideEndzones?: boolean;
@@ -530,6 +583,7 @@ export interface XYState {
axisTitlesVisibilitySettings?: AxesSettingsConfig;
tickLabelsVisibilitySettings?: AxesSettingsConfig;
gridlinesVisibilitySettings?: AxesSettingsConfig;
+ labelsOrientation?: LabelsOrientationConfig;
curveType?: XYCurveType;
fillOpacity?: number;
hideEndzones?: boolean;
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
index 3128527334553..d5d66cfda6029 100644
--- a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
@@ -223,6 +223,25 @@ export const XyToolbar = memo(function XyToolbar(props: VisualizationToolbarProp
});
};
+ const labelsOrientation = {
+ x: state?.labelsOrientation?.x ?? 0,
+ yLeft: state?.labelsOrientation?.yLeft ?? 0,
+ yRight: state?.labelsOrientation?.yRight ?? 0,
+ };
+
+ const onLabelsOrientationChange = (axis: AxesSettingsConfigKeys, orientation: number): void => {
+ const newLabelsOrientation = {
+ ...labelsOrientation,
+ ...{
+ [axis]: orientation,
+ },
+ };
+ setState({
+ ...state,
+ labelsOrientation: newLabelsOrientation,
+ });
+ };
+
const axisTitlesVisibilitySettings = {
x: state?.axisTitlesVisibilitySettings?.x ?? true,
yLeft: state?.axisTitlesVisibilitySettings?.yLeft ?? true,
@@ -428,6 +447,8 @@ export const XyToolbar = memo(function XyToolbar(props: VisualizationToolbarProp
isDisabled={
Object.keys(axisGroups.find((group) => group.groupId === 'left') || {}).length === 0
}
+ orientation={labelsOrientation.yLeft}
+ setOrientation={onLabelsOrientationChange}
isAxisTitleVisible={axisTitlesVisibilitySettings.yLeft}
toggleAxisTitleVisibility={onAxisTitlesVisibilitySettingsChange}
extent={state?.yLeftExtent || { mode: 'full' }}
@@ -446,6 +467,8 @@ export const XyToolbar = memo(function XyToolbar(props: VisualizationToolbarProp
toggleTickLabelsVisibility={onTickLabelsVisibilitySettingsChange}
areGridlinesVisible={gridlinesVisibilitySettings.x}
toggleGridlinesVisibility={onGridlinesVisibilitySettingsChange}
+ orientation={labelsOrientation.x}
+ setOrientation={onLabelsOrientationChange}
isAxisTitleVisible={axisTitlesVisibilitySettings.x}
toggleAxisTitleVisibility={onAxisTitlesVisibilitySettingsChange}
endzonesVisible={!state?.hideEndzones}
@@ -480,6 +503,8 @@ export const XyToolbar = memo(function XyToolbar(props: VisualizationToolbarProp
Object.keys(axisGroups.find((group) => group.groupId === 'right') || {}).length ===
0
}
+ orientation={labelsOrientation.yRight}
+ setOrientation={onLabelsOrientationChange}
hasPercentageAxis={hasPercentageAxis(axisGroups, 'right', state)}
isAxisTitleVisible={axisTitlesVisibilitySettings.yRight}
toggleAxisTitleVisibility={onAxisTitlesVisibilitySettingsChange}
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts
index 277ca4467aeda..87165d64625e7 100644
--- a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts
@@ -633,6 +633,7 @@ describe('xy_suggestions', () => {
axisTitlesVisibilitySettings: { x: true, yLeft: true, yRight: true },
gridlinesVisibilitySettings: { x: true, yLeft: true, yRight: true },
tickLabelsVisibilitySettings: { x: true, yLeft: false, yRight: false },
+ labelsOrientation: { x: 0, yLeft: -45, yRight: -45 },
preferredSeriesType: 'bar',
layers: [
{
@@ -675,6 +676,7 @@ describe('xy_suggestions', () => {
axisTitlesVisibilitySettings: { x: true, yLeft: true, yRight: true },
gridlinesVisibilitySettings: { x: true, yLeft: true, yRight: true },
tickLabelsVisibilitySettings: { x: true, yLeft: false, yRight: false },
+ labelsOrientation: { x: 0, yLeft: -45, yRight: -45 },
layers: [
{
accessors: ['price', 'quantity'],
@@ -790,6 +792,7 @@ describe('xy_suggestions', () => {
axisTitlesVisibilitySettings: { x: true, yLeft: true, yRight: true },
gridlinesVisibilitySettings: { x: true, yLeft: true, yRight: true },
tickLabelsVisibilitySettings: { x: true, yLeft: false, yRight: false },
+ labelsOrientation: { x: 0, yLeft: -45, yRight: -45 },
layers: [
{
accessors: ['price', 'quantity'],
@@ -833,6 +836,7 @@ describe('xy_suggestions', () => {
axisTitlesVisibilitySettings: { x: true, yLeft: true, yRight: true },
gridlinesVisibilitySettings: { x: true, yLeft: true, yRight: true },
tickLabelsVisibilitySettings: { x: true, yLeft: false, yRight: false },
+ labelsOrientation: { x: 0, yLeft: -45, yRight: -45 },
layers: [
{
accessors: ['price'],
@@ -877,6 +881,7 @@ describe('xy_suggestions', () => {
axisTitlesVisibilitySettings: { x: true, yLeft: true, yRight: true },
gridlinesVisibilitySettings: { x: true, yLeft: true, yRight: true },
tickLabelsVisibilitySettings: { x: true, yLeft: false, yRight: false },
+ labelsOrientation: { x: 0, yLeft: -45, yRight: -45 },
layers: [
{
accessors: ['price', 'quantity'],
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts
index a494d51f51681..511d9387e9c28 100644
--- a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts
@@ -542,6 +542,11 @@ function buildSuggestion({
yLeft: true,
yRight: true,
},
+ labelsOrientation: currentState?.labelsOrientation || {
+ x: 0,
+ yLeft: 0,
+ yRight: 0,
+ },
gridlinesVisibilitySettings: currentState?.gridlinesVisibilitySettings || {
x: true,
yLeft: true,