title: How to center highcharts pie chart and legend on a page?
body: <p>I'm loading my highchart data on a node/react single page application and I cant figure out how to center it in the middle of the page. Currently it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/ccR6N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ccR6N.png" alt="enter image description here"></a></p>
  
  <p>It's floating to the left and I want to center everything in the orange box in the middle. I've looked throughout the highcharts api doc and can't seem to figure it out. The jsfiddle is here: <a href="http://jsfiddle.net/tobitobetoby/1fqvzpdn/36/" rel="nofollow noreferrer">http://jsfiddle.net/tobitobetoby/1fqvzpdn/36/</a> (even though it's centered in jsfiddle, it floats to the left on a web/html page)</p>
  
  <pre><code>chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'pie',
        events: {
          load: function(event) {
            var chart = this,
              points = chart.series[0].points,
              len = points.length,
              total = 0,
              i = 0;
            for (i = 0; i &lt; len; i++) {
              total += points[i].y;
            }
            chart.setTitle({
              text: '&lt;br&gt;€' + total,
              verticalAlign: 'middle',
              style: {
                fontFamily: 'Arial,Roboto,Helvetica,sans-serif',
                fontWeight: 'bold',
                fontSize: 34
              },
            });
            // Adding 'transaction' label - labels below don't support images/icons
            this.renderer.label("&lt;div class='transactions' style='fontSize:20px !important;'&gt;&lt;img style='width:25px; height:25px; position:relative; top:7px;' src='https://github.com/tobi-ajala/shell-exercise/blob/master/icons/card.png?raw=true'/&gt; &amp;nbsp Transactions&lt;/div&gt;", 120, 130, null, null, null, true).add();
            // Adding date label
            this.renderer.label("&lt;div class='transactions'&gt;11 Sept 2017 - 11 Oct 2017&lt;/div&gt;", 95, 225, null, null, null, true).add();
      }
    } 
  }
  </code></pre>