HighCharts: Reduce size of chart

Question

Does anyone know how to reduce the size of this pie chart? I am using Lazy High Charts gem.

return LazyHighCharts::HighChart.new('pie') do |f|
      f.chart({:defaultSeriesType=>"pie" , :margin=> [0, 0, 0, 0],  backgroundColor: "#F5F5F5", renderTo: "mediamix#{akid.to_s}"} )
      f.series({:type=> 'pie', :name=> "Count",:data=> data_val, borderWidth: 0})
      f.title({ :text=> nil})
      f.plot_options({:pie=>{:allowPointSelect=>true, :cursor=>"pointer" , dataLabels: {enabled: true}, showInLegend: false}})
    end

enter image description here

score 6 · Answer 1 · answered Jul 17 '15 at 08:22

6

You can also explitly define the width and height via Highchart API:

 $('#container').highcharts({
       chart: {
                height: 200,
               width:100
            });

answered Jul 17 '15 at 08:22

Hyder B.

10,900
5
51
60

score 4 · Accepted Answer · answered Mar 26 '13 at 15:26

4

Highcharts renders the charts to fill the containing div that you specify in the renderTo option. In your case, you are specifying:

renderTo:"mediamix#{akid.to_s}"

I don't use Lazy Highcharts Gem, so I don't know what this refers to, but you need to look through your code for where this div is defined, and set it's height and width to the size you need.

answered Mar 26 '13 at 15:26

SteveP

18,840
9
47
60

I am generating the DIV ID dynamically as you can see (mediamix#{akid.to_s}) ... hence I cannot style this unknown ID from stylesheet. The ID is being used within the high_chart command = high_chart("mediamix#{f.id.to_s}", Gakie.pie(f.id)) – Pykih Mar 26 '13 at 16:00
You have to give the div a size somehow. Either give it a class, set it's height/width properties, or amend it's size using javascript/jquery. – SteveP Mar 26 '13 at 16:04

HighCharts: Reduce size of chart

2 Answers2