[Bug]: Heatmap chart axis tick label not rotating when too long

[brianjor]

Relevant package(s)

• @carbon/charts
• @carbon/charts-svelte
• @carbon/charts-react
• @carbon/charts-angular
• @carbon/charts-vue
• Documentation website

Carbon Charts Version

1.27.0

Which bundler are you using?

Other

What happened and what did you expect to happen?

When using the Heatmap component, long tick label text on the bottom axis are not being rotated to match the axis holder. The axis holder is rotated 45 degrees while the label text stays horizontal. It can be forced to rotate if I set axes.bottom.ticks.rotation = TickRotations.ALWAYS, but it should rotate with the axis holder automatically.

Short string (everything looks fine):

Long string that is not rotated:

Chart data and options (automatically formatted so no need for backticks)

data = [
      {
        bottom: 'Long string that will cause bug',
        left: 'Left',
        value: 1,
      },
    ];

options = {
      axes: {
        bottom: {
          mapsTo: 'bottom',
          scaleType: ScaleTypes.LABELS,
        },
        left: {
          mapsTo: 'left',
          scaleType: ScaleTypes.LABELS,
        },
      },
      heatmap: {},
      height: '500px',
      width: '500px',
      legend: {
        enabled: false,
      },
      toolbar: {
        enabled: false,
      },
    };

JavaScript console or build output (if relevant)

StackBlitz repro

https://stackblitz.com/edit/react-2ndpjeig?file=src%2Findex.js

IBM Application/Team (if relevant)

No response

What priority level would this be in your opinion?

P2 (Medium)