title: Highcharts Bar Chart not printing correctly
body: <p>I have a bar chart using Highcharts. On the screen it looks like this: </p>
  
  <p><img src="https://i.stack.imgur.com/Wkthy.png" alt="enter image description here"></p>
  
  <p>But when I go to print it looks like this:
  <img src="https://i.stack.imgur.com/EOw1b.png" alt="enter image description here"></p>
  
  <p>So basically nothing is showing up when I go to print. Here is the javascript I am using. </p>
  
  <pre><code>function qm_load_barcharts(qmsr_data) {
  var bar_width = 200;
  $('#profile-barchart tbody tr').each(function() {
      $(this).children('td').eq(4).each(function() {
  
          // Get the div id.
          var $div_id = $(this).children('div').eq(0).attr('id');
  
          // From the div id reconstitute the pfx in proper form.
          var pfx = $div_id.replace(/^x/, '');
          pfx = pfx.replace(/_/g, '.');
          pfx = pfx.replace(/-/, '/');
  
          // Look up our indicator values for the prefix.
          var active_cnt     = qmsr_data[pfx]['active'];
          var latent_cnt     = qmsr_data[pfx]['latent'];
          var indicators_cnt = qmsr_data[pfx]['indicators'];
  
          // Set our bar segment sizes.
          var total = active_cnt + latent_cnt + indicators_cnt;
          var active_size;
          var latent_size;
          var indicators_size;
  
          if (active_cnt == 0) {
              active_size = 0;
          }
          else {
              active_size = Math.round((active_cnt/total) * bar_width);
          }
  
          if (latent_cnt == 0) {
              latent_size = 0;
          }
          else {
              latent_size = Math.round((latent_cnt/total) * bar_width);
          }
  
          if (indicators_cnt == 0) {
              indicators_size = 0;
          }
          else {
              indicators_size = Math.round((indicators_cnt/total) * bar_width);
          }
  
          if ((active_cnt + latent_cnt + indicators_cnt) == 0) {
              // Perfect score, so make one full-width gray bar.
              $('#' + $div_id).children('div.active-bar').eq(0).css("background-color", "#ababab");
              $('#' + $div_id).children('div').eq(0).width(bar_width + 'px');
              $('#' + $div_id).children('div').eq(1).width('0px');
              $('#' + $div_id).children('div').eq(2).width('0px');
          }
          else {
              // Set div sizes proportionately.
              $('#' + $div_id).children('div').eq(0).width(active_size + 'px');
              $('#' + $div_id).children('div').eq(1).width(latent_size + 'px');
              $('#' + $div_id).children('div').eq(2).width(indicators_size + 'px');
  
              // Set values inside dives.
              $('#' + $div_id).children('div.active-bar').children('div').eq(0).html(active_cnt);
              $('#' + $div_id).children('div.latent-bar').children('div').eq(0).html(latent_cnt);
              $('#' + $div_id).children('div.indicators-bar').children('div').eq(0).html(indicators_cnt);
          }
      });
  });
  }
  </code></pre>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;div id="&lt;%= $pfx_id %&gt;" class='qmsr-barchart'&gt;
   &lt;div class='active-bar'&gt;
   &lt;div class='hidden-nugget'&gt;&lt;/div&gt;
   &amp;nbsp;
   &lt;/div&gt;
   &lt;div class='latent-bar'&gt;
   &lt;div class='hidden-nugget'&gt;&lt;/div&gt;
   &amp;nbsp;
   &lt;/div&gt;
   &lt;div class='indicators-bar'&gt;
   &lt;div class='hidden-nugget'&gt;&lt;/div&gt;
   &amp;nbsp;
   &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>And here's the print view CSS:</p>
  
  <pre><code> @media print {
  .active-bar {
      background-color: #A74A44;
  }
  .latent-bar {
      background-color: #EB8104;
  }
  .indicators-bar {
      background-color: #E6E714;
  }
  }
  </code></pre>
  
  <p>I am trying to print it in Chrome, if that matters at all. </p>