Bottom axis labels not partially hidden when using linear scale

[markov00]

If you use a dataset with more than 10 x values, seems that the we don't correctly computed the bottom axis label width.
Can be reproduced using the following to generate a simple dataset:

import { DataGenerator } from '../utils/data_generators/data_generator';

const dg = new DataGenerator();
const data = dg.generateSimpleSeries();

...
<AreaSeries
    id={getSpecId('area')}
    xScaleType={ScaleType.Linear}
    yScaleType={ScaleType.Linear}
    xAccessor="x"
    yAccessors={['y']}
    data={data}
/>

The axis values are correct, but seems to be cutted off:
0, 5, 1, 1, 2, 2, 3, 3, 4, 4 instead of
0, 5, 10, 15, 20, 25, 30, 35, 40, 45

[markov00]

I've found a workaround using the same value of maxLabelBboxWidth for maxLabelTextWidth but I think it's better to dig a bit more here

[emmacunningham]

Ah interesting, thanks for catching this! Will investigate :)

[emmacunningham]

@markov00 Hrm strangely I cannot seem to reproduce this... This is the output for the AreaSeries chart that you shared:

I've tried it at different screen sizes as well and tested with various AxisSpec configurations (esp the showOverlappingTicks and showOverlappingLabels configurations), but am still not seeing the labels get truncated. Could you share what AxisSpec configurations you are using? Wondering if it has something to do with a specific set of AxisSpec configs...

[emmacunningham]

Leaving some notes here just to document what I've found so far. We've figured out that this is an issue affecting Chrome but not Firefox. However, upon further investigation, it seems to be very specific to however we're measuring the text of the labels. The labels are getting cut off in Chrome because the computed width is not wide enough (seems to be off by about 0.25px). At first I thought this might have something to do with discrepancies between rendered font families, but this seems to not be the issue since in isolation, the logic to compute the width of the label seems to work as intended and correctly there's not truncation of the text.

I've created an isolated version of how we're computing these text label widths in this CodePen. This mostly just uses the logic that is in the CanvasTextBBoxCalculator.

However, when I call the same measure function in our repo, using the same text input, font size, and font family, the returned value in Chrome is off by about 1px (from both the isolated sandbox version in Chrome as well as the value computed in Firefox).

    const testBbox = bboxCalculator.compute('32', 10, `'Open Sans', Helvetica, Arial, sans-serif`).getOrElse({
      width: 0,
      height: 0,
    });

This returns 11.066666603088379 in Firefox and 11.123046875 in the CodePen in Chrome, which will get bumped up to 12px, creating enough width for the text. However, in the app in Chrome, this returns 10.96304702758789 which then rounds up to 11px, which is not enough width, causing the truncation by Konva.