Search code examples
javascriptcss-gridamchartsradar-chart

Radar doesn't fit the div properly, cutting off some of the contents. How can I fix it?


I am using amcharts and I have a grid layout on my page to store 3 elements: List, map and radar chart.

The radar chart doesn't display properly for some reason. It doesn't matter what dimensions and sizes I give to the parent div, it doesn't display the radar with all the labels. It always cuts off some of them.

I couldn't find anything about it in documentation or in here. Here are the results of my stylings: first, second third.


Solution

  • After unsuccessful attempts at altering CSS, I fixed it by adding a title of the chart at the top and label with opacity 0 at the bottom using charts prototypes in JS. I couldn't find any solution in documentation, but to set fixed maxHeight of the radar in pixels. The solution with pixels wouldn't work well with CSS-Grid.

    fixed container