search

apexcharts / apexcharts.js

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

X-axis labels cut out on the radar chart on mobile view #4454

Open Kutlwiwiso opened 2 months ago

Kutlwiwiso commented 2 months ago

Description

The x-axis labels on a simple radar chart are getting cut off when viewing the chart in a mobile view (iPhone 12 Pro dimensions) using the device toolbar in developer tools.

Steps to Reproduce

  1. Create a radar chart with the following x-axis labels: 'Verifications', 'Implementation', 'Configuration', 'Optimization', 'Integration'.
  2. Open the chart in a web browser on a laptop.
  3. Access developer tools (Inspect) and toggle the device toolbar (Toggle device toolbar).
  4. Set the device dimensions to mimic an iPhone 12 Pro.
  5. Observe the x-axis labels on the radar chart.

Expected Behavior

All x-axis labels should be fully visible and legibly displayed, regardless of the device screen size, without any labels being truncated.

Actual Behavior

The x-axis labels are cut off when the chart is viewed in the iPhone 12 Pro dimension mode, making it difficult to read the complete names on smaller screens.

Screenshots

9a6eea4d-df52-4138-8cd9-96e4f35e9c1b

Reproduction Link

https://codepen.io/Kutlwisiso-Belebesi/pen/WNWVJYb

frank-mendez commented 1 month ago

This appears to be a duplicate problem of #1663