in src/visual.ts [568:665]
private renderAxesLabels(options: MekkoAxisRenderingOptions, xFontSize: number): void {
this.axisGraphicsContext
.selectAll(MekkoChart.XAxisLabelSelector.selectorName)
.remove();
this.axisGraphicsContext
.selectAll(MekkoChart.YAxisLabelSelector.selectorName)
.remove();
const margin: IMargin = this.margin,
width: number = options.viewport.width - (margin.left + margin.right),
height: number = options.viewport.height,
fontSize: number = MekkoChart.FontSize;
const showOnRight: boolean = this.yAxisOrientation === axisPosition.right;
if (!options.hideXAxisTitle && (this.categoryAxisProperties["show"] === undefined || this.categoryAxisProperties["show"])) {
const xAxisYPosition: number = MekkoChart.getTranslation(this.xAxisGraphicsContext.attr("transform"))[1]
- fontSize + xFontSize + MekkoChart.XAxisYPositionOffset;
const rotataionEnabled = (<BaseColumnChart>this.layers[0]).getXAxisLabelsSettings().enableRotataion;
let shiftTitle: number = 0;
if (rotataionEnabled) {
let axes: MekkoChartAxisProperties = this.axes = axisUtils.calculateAxes(
this.layers,
options.viewport,
this.margin,
this.categoryAxisProperties,
this.valueAxisProperties,
this.isXScrollBarVisible || this.isYScrollBarVisible,
null);
shiftTitle = this.calculateXAxisAdditionalHeight(axes.x.values);
}
const xAxisLabel: Selection = this.axisGraphicsContext.append("text")
.attr(
"x", width / MekkoChart.WidthDelimiter
)
.attr(
"y", xAxisYPosition + shiftTitle
)
.style(
"fill", options.xLabelColor
? options.xLabelColor.solid.color
: null
)
.text(options.axisLabels.x)
.classed(MekkoChart.XAxisLabelSelector.className, true);
xAxisLabel.call(
AxisHelper.LabelLayoutStrategy.clip,
width,
textMeasurementService.svgEllipsis);
}
if (!options.hideYAxisTitle) {
const yAxisLabel: Selection = this.axisGraphicsContext.append("text")
.style(
"fill", options.yLabelColor
? options.yLabelColor.solid.color
: null
)
.text(options.axisLabels.y)
.attr("transform", MekkoChart.TransformRotate)
.attr(
"y", showOnRight
? width + margin.right - fontSize
: -margin.left
)
.attr("x", -((height - margin.top - options.legendMargin) / MekkoChart.XDelimiter))
.attr("dy", MekkoChart.DefaultDy)
.classed(MekkoChart.YAxisLabelSelector.className, true);
yAxisLabel.call(AxisHelper.LabelLayoutStrategy.clip,
height - (margin.bottom + margin.top),
textMeasurementService.svgEllipsis);
}
if (!options.hideY2AxisTitle && options.axisLabels.y2) {
const y2AxisLabel: Selection = this.axisGraphicsContext.append("text")
.text(options.axisLabels.y2)
.attr("transform", MekkoChart.TransformRotate)
.attr("y", showOnRight ? -margin.left : width + margin.right - fontSize)
.attr("x", -((height - margin.top - options.legendMargin) / MekkoChart.XDelimiter))
.attr("dy", MekkoChart.DefaultDy)
.style(
"fill", options.y2LabelColor
? options.y2LabelColor.solid.color
: null
)
.classed(MekkoChart.YAxisLabelSelector.className, true);
y2AxisLabel.call(AxisHelper.LabelLayoutStrategy.clip,
height - (margin.bottom + margin.top),
textMeasurementService.svgEllipsis);
}
}