Skip to content

Commit

Permalink
fix(Axis): Correct x axis height calculation for autorotated x axis t…
Browse files Browse the repository at this point in the history
…ick texts

The height of the rotated tick text was also added when the tick texts were
not rotated due to the autorotate being enabled.
The `maxtickSize.height` is now only added if the tick texts are actually
rotated or if multiline is enabled.

Ref #3584
  • Loading branch information
michkami committed Jan 8, 2024
1 parent 9d28cbb commit 300f4f1
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 3 deletions.
6 changes: 5 additions & 1 deletion src/ChartInternal/internals/size.axis.ts
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,11 @@ export default {

const maxtickSize = $$.axis.getMaxTickSize(id);

if (maxtickSize.height > defaultHeight) {
const isXAxisTickRotated = config.axis_x_tick_rotate > 0 && (
!config.axis_x_tick_autorotate || $$.needToRotateXAxisTickTexts()
);

if ((config.axis_x_tick_multiline || isXAxisTickRotated) && maxtickSize.height > defaultHeight) {
h += maxtickSize.height - defaultHeight;
}

Expand Down
32 changes: 30 additions & 2 deletions test/internals/axis-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1349,7 +1349,21 @@ describe("AXIS", function() {
expect(tspan.attr("dx")).to.be.equal("0");
});

compare(0, 18.8125, 48, 0);
compare(0, 18.8125, 30, 0);
});

it("should not use the height of the longest tick text when ticks are not rotated", () => {
chart.$.main.selectAll(`.${$AXIS.axisX} g.tick`).each(function() {
const tick = d3Select(this);
const text = tick.select("text");
const tspan = text.select("tspan");

expect(text.attr("transform")).to.be.null;
expect(text.attr("y")).to.be.equal("9");
expect(tspan.attr("dx")).to.be.equal("0");
});

compare(0, 18.8125, 30, 0);
});

it("update args", () => {
Expand Down Expand Up @@ -1535,7 +1549,21 @@ describe("AXIS", function() {
expect(tspan.attr("dx")).to.be.equal("0");
});

compare(0, 18.8125, 55, 0);
compare(0, 18.8125, 30, 0);
});

it("should not use the height of the longest tick text when ticks are not rotated", () => {
chart.$.main.selectAll(`.${$AXIS.axisX} g.tick`).each(function() {
const tick = d3Select(this);
const text = tick.select("text");
const tspan = text.select("tspan");

expect(text.attr("transform")).to.be.null;
expect(text.attr("y")).to.be.equal("9");
expect(tspan.attr("dx")).to.be.equal("0");
});

compare(0, 18.8125, 30, 0);
});

it("update args", () => {
Expand Down

0 comments on commit 300f4f1

Please sign in to comment.