Pull request #5500: Feature/DXCF-5864 change price scale scales color along with background

Merge in DXCHARTS/dxchart5 from feature/DXCF-5864-change-price-scale-scales-color-along-with-background to master

* commit 'a2cce13abf69dd3397f9ecd33a5c1f017a2497e5':
  [DXCF-5864] Change price scale/scales color along with background // init
  [DXCF-5864] Change price scale/scales color along with background
  [DXCF-5864] Change price scale/scales color along with background // init
  [DXCF-5864] Change price scale/scales color along with background // init

GitOrigin-RevId: e73f6355a54e6ba1b9bfa74024a0cb2d01a995e8

Author: Keelaro1

src/chart/chart.config.ts

@@ -112,6 +112,10 @@ export const getDefaultConfig = (): FullChartConfig => ({
 				barCapSize: 1,
 			},
 			maxYAxisScalesAmount: 10,
+			applyBackgroundToAxes: {
+				x: true,
+				y: true,
+			},
 			sortCandles: defaultSortCandles,
 		},
 		yAxis: {
@@ -1000,6 +1004,13 @@ export interface ChartConfigComponentsChart {
 	 * The maximum amount of Y axis scales on a single chart
 	 */
 	maxYAxisScalesAmount: number;
+	/**
+	 * Background color will be also applied to the chart axes
+	 */
+	applyBackgroundToAxes: {
+		x: boolean;
+		y: boolean;
+	};
 	// optional because backward compability
 	sortCandles?: (candles: Candle[]) => Candle[];
 }

src/chart/components/chart/chart.component.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 - 2024 Devexperts Solutions IE Limited
+ * Copyright (C) 2019 - 2025 Devexperts Solutions IE Limited
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
@@ -317,6 +317,18 @@ export class ChartComponent extends ChartBaseElement {
 		this.canvasModel.fireDraw();
 	}
 
+	/**
+	 * Sets the options for the background color applying to the chart axes
+	 * @param {Object} options - options for both axes
+	 * @param {boolean} options.x - should the background color apply to the x axis
+	 * @param {boolean} options.y - should the background color apply to the y axis
+	 * @returns {void}
+	 */
+	public setApplyBackgroundToAxes(options: { x: boolean; y: boolean }) {
+		this.config.components.chart.applyBackgroundToAxes = { ...options };
+		this.chartModel.bus.fireDraw();
+	}
+
 	/**
 	 * Used to set the main series to chart.
 	 * @param series

src/chart/components/x_axis/x-axis-time-labels.drawer.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 - 2024 Devexperts Solutions IE Limited
+ * Copyright (C) 2019 - 2025 Devexperts Solutions IE Limited
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
@@ -42,7 +42,10 @@ export class XAxisTimeLabelsDrawer implements Drawer {
 			ctx.font = font;
 			ctx.fillStyle = xAxisColors.backgroundColor;
 			const bounds = this.canvasBoundsContainer.getBounds(CanvasElement.X_AXIS);
-			ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
+			// draw axis background rect if the background color is not used
+			if (!this.config.components.chart.applyBackgroundToAxes.x) {
+				ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
+			}
 
 			const color = this.config.colors.xAxis.labelTextColor;
 			const labels = this.labelsProvider();

src/chart/components/y_axis/y-axis.drawer.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 - 2024 Devexperts Solutions IE Limited
+ * Copyright (C) 2019 - 2025 Devexperts Solutions IE Limited
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
@@ -51,9 +51,11 @@ export class YAxisDrawer implements Drawer {
 				const bounds: Bounds = yAxisComponent.getBounds();
 				const ctx = this.canvasModel.ctx;
 
-				// draw axis background rect animation
-				ctx.fillStyle = this.getBackgroundColor();
-				ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
+				// draw axis background rect if the background color is not used
+				if (!this.fullConfig.components.chart.applyBackgroundToAxes.y) {
+					ctx.fillStyle = this.getBackgroundColor();
+					ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
+				}
 
 				const font = getFontFromConfig(yAxisComponent.state);
 				const fontHeight = calculateSymbolHeight(font, ctx);