@devexperts/dxcharts-lite
Version:
57 lines (56 loc) • 2.23 kB
JavaScript
/*
* 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/.
*/
import { CanvasElement, X_AXIS_MOBILE_PADDING } from '../../canvas/canvas-bounds-container';
const DEFAULT_X_LABEL_PADDING = { x: 4, y: 4 };
/**
* Draws the label on X axis.
* @param ctx
* @param canvasBoundsContainer
* @param config
* @param label
*/
export function drawXAxisLabel(ctx, canvasBoundsContainer, config, label) {
var _a, _b;
const alignType = (_a = label.alignType) !== null && _a !== void 0 ? _a : 'middle';
const { fontSize, fontFamily, padding } = config.components.xAxis;
const xAxisColors = config.colors.xAxis;
const offsetTop = (_b = padding.top) !== null && _b !== void 0 ? _b : 0;
const xAxisBounds = canvasBoundsContainer.getBounds(CanvasElement.X_AXIS);
ctx.save();
ctx.font = `bold ${fontSize}px ${fontFamily}`;
const labelWidth = ctx.measureText(label.text).width;
const boxWidth = labelWidth + DEFAULT_X_LABEL_PADDING.x * 2;
let boxStart = 0;
const x = label.x;
switch (alignType) {
case 'start':
boxStart = x - boxWidth;
break;
case 'end':
boxStart = x;
break;
case 'middle':
default:
boxStart = x - boxWidth / 2;
break;
}
// label can overlap with regular x-axis label, so we need to hide regular x-axis label
ctx.fillStyle = xAxisColors.backgroundColor;
ctx.strokeStyle = xAxisColors.backgroundColor;
ctx.fillRect(boxStart, xAxisBounds.y, boxWidth, xAxisBounds.height);
if (alignType !== 'middle') {
ctx.strokeStyle = label.color;
ctx.beginPath();
ctx.moveTo(x, xAxisBounds.y);
ctx.lineTo(x, xAxisBounds.y + xAxisBounds.height);
ctx.stroke();
}
ctx.fillStyle = label.color;
const xTextPos = boxStart + DEFAULT_X_LABEL_PADDING.x;
const yTextPos = xAxisBounds.y + offsetTop + fontSize + X_AXIS_MOBILE_PADDING / 2;
ctx.fillText(label.text, xTextPos, yTextPos);
ctx.restore();
}