Skip to content

Sparkline column chart positions dynamic width tooltips incorrectly. #5119

@dreid

Description

@dreid

Description

Small column charts have trouble calculating the tooltip position of elements for bars whose position + the width of the tooltip is < the chart width.

This happens because of the code at https://github.com/apexcharts/apexcharts.js/blob/main/src/modules/tooltip/Intersect.js#L200

which seems to be responsible for offsetting the tooltip x position by it's width. Since this only occurs if the tooltip would overflow the chart because of it's width.

This can be worked around by setting a min-width on the tooltip to ensure that all tooltips would overflow.

Steps to Reproduce

  1. Visit https://codepen.io/dareid/pen/azdVqKx
  2. Hover over the 3rd datapoint, note that the tooltip is centered above the bar.
  3. Hover over the 1st and 2nd datapoints, note that their x placement is significantly away from the bar.

Expected Behavior

All tooltips should be centered above the active bar.

Actual Behavior

Only tooltips whose width + the bar position is greater than the width of the chart get placed correctly.

Screenshots

Image

Reproduction Link

https://codepen.io/dareid/pen/azdVqKx

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions