Ember Charts 0px width and height chart when used with Bootstrap

I am experiencing an issue where my ember-charts are being rendered by default with a 0px width and height SVG. If I change the size of the SVG manually, then it reveals a small chart (105px by 104px, chart-viewport class) which I cannot override at all.

I have tried all the chart types and the effect is the same. The main things I have at play here are ember-cli-bootstrap-sass 0.2.8, Liquid Fire 0.14, Ember 1.7.0, Ember CLI 0.1.2. I've ran into issues with Bootstrap and Liquid Fire heights before (like this) with inheriting height, so the source of the problem may not be very clear. Code extract below:

/controllers/dashboard.js

import Ember from 'ember';

export default Ember.Controller.extend({
  needs: ['application', 'nav'],
  chartContent: [
  {
        "label": "Equity",
        "value": 12935781.176999997
    },
    {
        "label": "Real Assets",
        "value": 10475849.276172025
    },
    {
        "label": "Fixed Income",
        "value": 8231078.16438347
    },
    {
        "label": "Cash & Cash Equivalent",
        "value": 5403418.115000006
    },
    {
        "label": "Hedge Fund",
        "value": 1621341.246006786
    },
    {
        "label": "Private Equity",
        "value": 1574677.59
    }
  ]
});

/styles/app.scss

.dashboard-container {
  margin-top: 1em;
  .chart {
    height: 295px;
    margin-top: 1em;
    .graphic {
      width: 100%;
      height: 250px;
    }
  }
}

/templates/dashboard.hbs

<div class="container-fluid dashboard-container">
  <div class="row">
    <div class="col-sm-6 chart">
      <p class="strong">MTD Sales Revenue</p>
    <div class="graphic">
    {{vertical-bar-chart data=chartContent}}
    </div><!--.graphic-->
    </div><!--.chart-->
  </div>
</div>

Any thoughts?