Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incorrect circular chart size when parent is taller than wider and legend not shown #4386

Closed
Assignees
Labels
bug Something isn't working

Comments

@meronz
Copy link

meronz commented Apr 4, 2024

Description

When using Width = 100% and Height = 100%, and the parent is taller than wider, "circular" charts (such as Pie, Polar Area, etc) are not sized correctly. Not showing the legend also seems to be important when reproducing the issue, as showing the label somehow makes the library calculate the correct size.

I'm willing to triage this issue but since I'm not familiar with the codebase some guidance could be helpful.

Steps to Reproduce

  1. Create a parent div with width: 500px and height: 600px
  2. Create a chart inside the parent container with the following options
     var options = {
        series: newSeries,
        chart: {
          width: "100%",
          height: "100%",
          type: 'pie',
        },
        labels: newLabels,
        legend: { show: false },
      }
  1. Render the chart

Expected Behavior

The chart is centered and it is not clipped on the left and right side

Actual Behavior

The chart is wider than the parent and so it is clipped on the left and right sides.

Screenshots

image

Reproduction Link

https://codepen.io/meronz/pen/qBwxOOY

@meronz meronz added the bug Something isn't working label Apr 4, 2024
@junedchhipa junedchhipa self-assigned this May 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment