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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions