Skip to content

Fix X axis labels overlapping - #83

Open
Dmitrii Sukhankin (dsukhankin) wants to merge 4 commits into
microsoft:masterfrom
dsukhankin:improve-x-axis-labels
Open

Fix X axis labels overlapping#83
Dmitrii Sukhankin (dsukhankin) wants to merge 4 commits into
microsoft:masterfrom
dsukhankin:improve-x-axis-labels

Conversation

@dsukhankin

Copy link
Copy Markdown
Contributor

Right now, labels on the X axis don't have any logic to prevent overlaps. This PR adds ellipsis to labels that are longer than what should be given to each tick on the X axis.

This PR also fixes package vulnerabilities with npm audit fix.

image

Copilot AI review requested due to automatic review settings April 16, 2026 15:48

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates the DotPlot Power BI visual to reduce X-axis label overlap by truncating long tick labels with ellipsis, and it also applies dependency security updates via npm audit fix.

Changes:

  • Apply textMeasurementService.getTailoredTextOrDefault(...) to X-axis tick labels to truncate text to an estimated per-tick width.
  • Move tick label formatting from the axis tickFormat(...) path to post-render DOM text updates.
  • Update package-lock.json with patched transitive dependency versions from npm audit fix.

Reviewed changes

Copilot reviewed 1 out of 2 changed files in this pull request and generated 3 comments.

File Description
src/visual.ts Truncates X-axis tick label text based on computed tick width to reduce overlap.
package-lock.json Updates resolved dependency versions/integrity hashes to address known vulnerabilities.
Comments suppressed due to low confidence (1)

src/visual.ts:831

  • When categoryAxis.show is false, this code unconditionally does .append("title") on every render. If renderAxis() runs multiple times while the setting remains false, each tick text will accumulate multiple <title> children. Prefer updating/replacing the existing title node (e.g., remove then append, or use a data join) instead of always appending.
                        );
                });
        } else {
            this.xAxisSelection.selectAll(DotPlot.TickTextSelector.selectorName)
                .append("title")
                .text((index: number) => {
                    return this.data.dataGroups[index]
                        && this.data.dataGroups[index].category.value;
                });

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/visual.ts
Comment thread src/visual.ts Outdated
Comment thread src/visual.ts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants