Non-fixed svg height? My pie charts have different size even though svg width and pie size are identical. Svg height is fixed, how do i unfix it?

0
votes

I've got a number of pie charts displayed in a grid with Highcharts and CSS floats.

Current Highcharts behavior seems to be the following:

  1. The height of all svg containers is set to a default value (400px).
  2. The legend is populated.
  3. The pie chart occupies the remaining area.

As a result, the chart's size depends on the number of items in the legend. All pie charts in my grid have different sizes, and it looks absolutely ugly:

         █████                       ███                       █████        
      ███████████                  ███████                   █████████      
    ███████████████                ███████                 █████████████    
   █████████████████                 ███                   █████████████    
   █████████████████         * Foo bar baz quux              █████████      
    ███████████████          * Bar baz quux foo                █████        
      ███████████            * Baz quux foo bar         * Foo bar baz quux  
         █████               * Quux foo bar baz         * Bar baz quux foo  
  * Foo bar baz quux         * Foo bar baz quux         * Baz quux foo bar  
  * Bar baz quux foo         * Bar baz quux foo         * Quux foo bar baz  



         █████                      █████                       ███         
       █████████                 ███████████                  ███████       
     █████████████             ███████████████                ███████       
     █████████████            █████████████████                 ███         
       █████████              █████████████████         * Foo bar baz quux  
         █████                 ███████████████          * Bar baz quux foo  
  * Foo bar baz quux             ███████████            * Baz quux foo bar  
  * Bar baz quux foo                █████               * Quux foo bar baz  
  * Baz quux foo bar         * Foo bar baz quux         * Foo bar baz quux  
  * Quux foo bar baz         * Bar baz quux foo         * Bar baz quux foo

Instead, i want the svg container's height to depend on the height of the contents. E. g.:

  1. The pie chart is placed. Its size is determined by the width of the container.
  2. The legend is populated. It takes as much space as it needs.
  3. The height of the svg container is set to be the height of its content.

Desired behavior:

         █████                     █████                     █████        
      ███████████               ███████████               ███████████     
    ███████████████           ███████████████           ███████████████   
   █████████████████         █████████████████         █████████████████  
   █████████████████         █████████████████         █████████████████  
    ███████████████           ███████████████           ███████████████   
      ███████████               ███████████               ███████████     
         █████                     █████                     █████        
  * Foo bar baz quux        * Foo bar baz quux        * Foo bar baz quux  
  * Bar baz quux foo        * Bar baz quux foo        * Bar baz quux foo  
                            * Baz quux foo bar        * Baz quux foo bar  
                            * Quux foo bar baz        * Quux foo bar baz  
                            * Foo bar baz quux                            
                            * Bar baz quux foo                            



         █████                     █████                     █████        
      ███████████               ███████████               ███████████     
    ███████████████           ███████████████           ███████████████   
   █████████████████         █████████████████         █████████████████  
   █████████████████         █████████████████         █████████████████  
    ███████████████           ███████████████           ███████████████   
      ███████████               ███████████               ███████████     
         █████                     █████                     █████        
  * Foo bar baz quux        * Foo bar baz quux        * Foo bar baz quux  
  * Bar baz quux foo        * Bar baz quux foo        * Bar baz quux foo  
  * Baz quux foo bar                                  * Baz quux foo bar  
  * Quux foo bar baz                                  * Quux foo bar baz  
                                                      * Foo bar baz quux  
                                                      * Bar baz quux foo

I'm capable of positioning charts in a grid via CSS. All i need is svg height to be dynamically calculated based on the height of its content.

Note that i don't want to update the svg height externally. I believe it is not possible to reliably guess the height of legend. I would have to take into consideration the number of elements in the grid, the length of each label, the width of the container (after DOM is positioned with CSS), font size, etc. Too much trouble, Highcharts should be able to do that for me.

Here is a basic demo for you to fiddle with: http://jsfiddle.net/0y4nbyLa/1/

1
svghighcharts
No, Highcharts fits to the container, not resize it. After rendering the chart, you can simply get legend height: Highcharts.charts[0].legend.contentGroup.getBBox().height - but calling setSize in the the callback will remove animation. You still can set maxHeight of the legend. Anyway, if you want Highcharts to resize the container, create an idea on the userVoice - Highcharts team is trying to implement most popular ideas into the core/plugins. - Paweł Fus
Thank you, @PawełFus! With your help, i was able to achieve what i wanted: jsfiddle.net/0y4nbyLa/4 Please convert your comment into an answer, include my link and comment on it, so that i can accept and upvote your answer. - Andrey Mikhaylov - lolmaus

1 Answers

1
votes

No, Highcharts fits to the container, not resize it. After rendering the chart, you can simply get legend height: Highcharts.charts[0].legend.contentGroup.getBBox().height - but calling setSize() in the the callback will remove animation.

You still can set maxHeight of the legend. Anyway, if you want Highcharts to resize the container, create an idea on the userVoice - Highcharts team is trying to implement most popular ideas into the core/plugins.

Demo with maxHeight, by @lolmaus: http://jsfiddle.net/0y4nbyLa/4/