How to customize Functional Coverage Chart scales and label density?

[mSaurabhPS]

Context
I am using Serenity/JS with the standard HTML reports (Serenity BDD version 4.2.34). I am specifically looking at the Functional Coverage Overview horizontal bar chart.

I’ve noticed two layout issues that I’d like to customize to improve the report's professional look:

• Label Visibility: At normal browser zoom levels, several category labels on the Y-axis (Features/Capabilities) are hidden. They only appear when I zoom out significantly. This seems to be due to the default autoSkip behavior in the underlying Chart.js engine.

• Scale Increments: The X-axis (number of test cases) currently increments by 2 (e.g., 0, 2, 4, 6...). For our project volume, I would prefer to change this to increments of 4 (e.g., 0, 4, 8, 12...) to reduce clutter.

What I've Tried
I have reviewed the Serenity BDD Reporting Documentation and checked serenity.conf. While I see properties for serenity.report.durations, I cannot find a specific property to pass custom ticks or stepSize configurations to the chart engine.

Questions

• Is there a supported way via serenity.conf or Serenity/JS configuration to set the chart stepSize to 4?

• Is there a way to force the chart container to a specific min-height so that the Y-axis labels don't auto-skip at 100% zoom?

If I need to provide a custom template to override the JavaScript, which file in the Serenity/JS ecosystem should I target to modify the coverageChart initialization?

Environment
Serenity BDD Version: 4.2.34

Serenity/JS Version: 3.3.17

[mSaurabhPS]

If you notice the bar graph is not condensed because of various number of tests that are not being executed.