[Bug]: Tooltips in charts gets cut off ("left" CSS property is a negative integer)

[wdiu]

Name

W Diu

Are you an IBM employee?

• Yes

What happened?

Similar to #490, this happens very easily when selecting a point near the middle of the graph and returning customHTML (in the chart options) that results in a tooltip that's slightly wider than the default. However, in this case, it's because the "left" CSS property is a negative amount.

Maybe by default "left" (or even "top") should not be negative, or if that will break something, then there can be additional flags to prevent "left" (or even "top") from going to a negative integer.

This can also be reproduced by the example provided here: https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-area-simple--area-time-series. Simply resize the window as shown in the screenshot and observe the left side is cut off when the tooltip could have been positioned to the right to avoid getting cut off.

Version

1.13.18

Data & options used

Use the default data at https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-area-simple--area-time-series

Relevant log output

No response

Codesandbox example

https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-area-simple--area-time-series

What priority level would this be in your opinion?

P2

[theiliad]

Hi @wdiu, I'm not able to reproduce this on my end. Could you pls provide a stackblitz for it?

[wdiu]

Hi, @theiliad , thanks for looking into this. Here's what it looks like in your StackBlitz at https://stackblitz.com/edit/yzfn6i-nprkdx?file=index.js with these values:

const data = [
  {
    group: 'Yearly emission',
    date: `${time}-01-01T00:30:00.000Z`,
    value: 10,
  },
  {
    group: 'Yearly emission',
    date: `${time}-02-01T00:30:00.000Z`,
    value: 20,
  },
  {
    group: 'Yearly emission',
    date: `${time}-03-01T00:30:00.000Z`,
    value: 30,
  },
  {
    group: 'Yearly emission',
    date: `${time}-04-01T00:30:00.000Z`,
    value: 40,
  },
  {
    group: 'Yearly emission',
    date: `${time}-05-01T00:30:00.000Z`,
    value: 50,
  },
  {
    group: 'Yearly emission',
    date: `${time}-06-01T00:30:00.000Z`,
    value: 60,
  },  
];

[theiliad]

@wdiu it works ok for me even in very small container sizes

we use this package https://github.com/carbon-design-system/carbon-utils-position for positioning the tooltip

[wdiu]

I agree that it looks correct in yours.
Could it be because of a difference in browser or OS?
I'm using "Google Chrome 120.0.6099.227 (Official Build) (64-bit)" in Windows 10.