Rotate x-axis labels on burndown and burnup charts

What does this MR do and why?

Rotates the x-axis date labels on the burndown and burnup charts by 45 degrees. The full dd mmm yyyy labels draw horizontally with no rotation, so they crowd and overlap on long milestones. Contribution analytics solved the same problem the same way in Tilt x-axis and adjust spacing (!33692).

Both charts share common_chart_options.js; the two chart components (burndown_chart.vue, burnup_chart.vue) are its only consumers, so both inherit the rotation and nothing else is affected. The grid already uses containLabel: true, which sizes the plot area around the rotated labels in echarts 5.

References

Related to Tilt x-axis text under Burnup/Burndown charts (#323036).

Screenshots or screen recordings

View Before After
Light burn_charts_light burn_charts_light
Dark burn_charts_dark burn_charts_dark

Six-month milestone at the default viewport: before, the horizontal labels crowd and echarts drops every other month (3 of 6 dates render); after, the 45-degree tilt fits all months legibly.

How to set up and validate locally

  1. On an EE instance, create a project milestone with a start date and a due date a few months apart.
  2. Assign a few issues to the milestone and close some of them.
  3. Visit the milestone page and open the Burndown chart (and toggle to Burnup chart).
  4. The x-axis date labels render tilted at 45 degrees instead of horizontally overlapping.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Paul W

Merge request reports

Loading
Loading