search

apexcharts / apexcharts.js

📊 Interactive JavaScript Charts built on SVG
https://apexcharts.com
MIT License
14.27k stars 1.3k forks source link

First Item of Bar Chart Does Not Appear for Certain Widths When Border Radius is Enabled #4435

Open Thimows opened 5 months ago

Thimows commented 5 months ago

Description

The first item of the bar chart does not seem to appear for certain widths. The value is there, even on the tooltip, but the bar does not show. When I set the Border Radius to 0 it seems to work again:

2024-04-26 om 10 54 44

Steps to Reproduce

  1. Visit the my codepen example: https://codepen.io/thimows/pen/BaEbdmW
  2. You will see that the first bar does not show.
  3. Set the border radius to 0 under plotOptions and it will show up again.

Reproduction Link

You can see a reproducible example here: https://codepen.io/thimows/pen/BaEbdmW

Thimows commented 5 months ago

To follow up, this seems to be caused by a borderRadius and a columnWidth of 100%. Changing the columnWidth to 99% seems to fix it. Maybe there is a small edge case here that is not accounted for?

LeoMcH36 commented 5 months ago

Adding to this because I am having similar issues with column width 100% and bar charts, for me however I am not using border radius. Reducing column width helped fix my issues but the issue only occurred with 3 data points but was fine for 4 which was strange. Also the first bar seems to be showing fine in your reproduction link

The issue I mentioned is here https://codepen.io/rogueDovah/pen/GRLeVaN