Chartkick生成PDF图表字体过小问题求助（Ruby on Rails环境）

Hey there! I’ve run into this exact tiny font issue with Chartkick + WickedPDF before, so I totally get how frustrating it can be. Let’s walk through the fixes that worked for me:

Chartkick relies on underlying engines like Google Charts or Highcharts, and you can pass specific font size settings directly through the library parameter. This is the most targeted fix because it adjusts each part of the chart individually.

For Google Charts (the default adapter), update your pie chart code like this:

<%= pie_chart Infosheet.group(:gender).count, 
    library: {
      titleTextStyle: { fontSize: 16 }, # Adjust title font size
      legend: { textStyle: { fontSize: 14 } }, # Legend text size
      tooltip: { textStyle: { fontSize: 14 } }, # Tooltip text size
      pieSliceTextStyle: { fontSize: 12 } # Text on pie slices
    } %>

Tweak the pixel values until the font looks right in your PDF.

Sometimes the WebKit renderer WickedPDF uses defaults to a zoom level that shrinks text. You can bump this up in your controller’s PDF render method:

def generate_stats_pdf
  respond_to do |format|
    format.pdf do
      render pdf: "gender_stats_report",
             zoom: 1.5, # 1.0 is default; start with 1.2-1.5 and adjust
             template: "reports/gender_stats",
             layout: "pdf_layout"
    end
  end
end

Be careful not to set the zoom too high—this can mess up your page layout, so test incrementally.

Add a PDF-specific CSS file (make sure it’s included in your PDF layout) and target the Chartkick container to override font sizes:

/* In app/assets/stylesheets/pdf.css */
.chartkick {
  font-size: 14px !important;
  /* Optional: Scale the entire chart if needed */
  transform: scale(1.2);
  transform-origin: top left;
  margin-bottom: 30px; /* Add space to avoid overlapping after scaling */
}

I’ve found Highcharts often handles font rendering more reliably in PDFs than Google Charts. To switch the adapter:

1. Add the Highcharts gem to your Gemfile:

   gem 'highcharts-rails'
   

2. Create an initializer at config/initializers/chartkick.rb:

   Chartkick.options[:adapter] = :highcharts
   

3. Update your chart’s library config for Highcharts:

   <%= pie_chart Infosheet.group(:gender).count,
       library: {
         title: { style: { fontSize: '16px' } },
         legend: { itemStyle: { fontSize: '14px' } },
         tooltip: { style: { fontSize: '14px' } },
         plotOptions: {
           pie: {
             dataLabels: { style: { fontSize: '12px' } }
           }
         }
       } %>
   

Start with Fix 1 first—it’s the most precise way to control font sizes without affecting your overall layout. If that doesn’t do the trick, try adjusting the zoom or switching to Highcharts.

内容的提问来源于stack exchange，提问作者user9250616