When the values on the y-axis are long, the label for the y-axis is not properly given space, but instead overlaps with the values.
Two examples: one on Commons and one on Beta.
Here is also a screenshot from Commons for convenience:
Requirements
- Axis values should at most display 4 characters, including an abbreviation if needed. For example 1000000 would become 1M. We can use Intl.NumberFormat function to make sure these are localizable. See code below
- We will loosely enforce this 4 character requirement for the time being. Don't worry if exceptionally numbers such as 1,000,000,000,000,000,000 still overlap Y axis (likely abbreviated as 1,000,000T - this is out of scope).
- This should be true for both X and Y axis
- xAxis.nameGap and yAxis.nameGap value will be increased to accommodate 4 characters (to be tweaked later with Derek)
Formatter code
/** * @param {number} num * @return {string} */ function convertNumber( num, language ) { const formatter = new Intl.NumberFormat( language, { style: 'decimal', notation: num > 1000 ? 'compact' : 'standard', compactDisplay: 'short', minimumFractionDigits: 0, maximumFractionDigits: 1 } ); return formatter.format( num ); }