Respond to data changes in a component

I’m trying to build a component that draws a Highcharts graph and struggling to get it to run a function in response to data changing. Here's the closest I've come so far, though I'm not sure if I'm thinking about this the right way:

// Template using the component:
<script type="text/x-handlebars" data-template-name="index">
  {{overview-chart data=model.dateRangeContributionSummary}}
</script>


// Component Template:
<script type="text/x-handlebars" data-template-name="components/overview-chart">
  <div class='chart-wrapper clear'>
    <div id='total-chart-inner' class='chart-inner'>
      {{chart}}
    </div>
  </div>
</script>


// Component JS code:
app.OverviewChartComponent = Ember.Component.extend({

  loadInitialChart: function() {
    this.send('drawGraph');
  }.on('didInsertElement'),

  chart: function() {
    if (Ember.$("total-chart-inner").exists()) {
      this.send('drawGraph');
    }
  }.property('data.totalSeries', 'data.totalCategories'),

  actions: {
    drawGraph: function() {
      // Code to draw Highcharts graph goes here...
    }
  }
});

I'm using Ember v1.10.0, not sure if that's hurting me at all. Ideally I wouldn't need loadInitialChart, but the chart function is initially called before the template has been written to the DOM. And then the biggest problem is that chart isn't called again when my data changes. Any hints as to what I might be getting wrong, or a better approach?