How to center highcharts pie chart and legend on a page?

Question

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:

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: http://jsfiddle.net/tobitobetoby/1fqvzpdn/36/ (even though it's centered in jsfiddle, it floats to the left on a web/html page)

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 < len; i++) {
            total += points[i].y;
          }
          chart.setTitle({
            text: '<br>€' + 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("<div class='transactions' style='fontSize:20px !important;'><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'/> &nbsp Transactions</div>", 120, 130, null, null, null, true).add();
          // Adding date label
          this.renderer.label("<div class='transactions'>11 Sept 2017 - 11 Oct 2017</div>", 95, 225, null, null, null, true).add();
    }
  } 
}

Solution 1

Looking at the complete git repo, the index.css file was not being imported in the index.js file, hence not being able to reference the css commands. The solution is, in the index.js file, add:

import './index.css';

To the top of the code. Then in the index.css file, add:

.highcharts-container {
  margin: 0 auto;
}

And this will centre the enter Highcharts div.

Solution 2

Center it in the div tag. Just add align="center" to the div and that should do it. Here is your updated fiddle

Comments

[Namaskar]

Unrelated, but   is rendered when exporting. You can add right padding to the icons themselves for space.

[Namaskar]

OR at least there should be the ending semicolon. &nbsp→ 

[Max Pringle]

When I update the fiddle with your recommendation it causes the whole grid to get messed up.