How to create an Ember component using Highcharts.js

chart-component.hbs

{{pie-chart data=pieData}}

pie-chart.js

var PieChartComponent = Ember.Component.extend({
    tagName: 'div',
    classNames: ['chart'],

    dataChanged: function() {
        return this.rerender();
    }.observes('data'),

    renderChart: function() {
        return this.$().highcharts({
            chart: {
                height: 275
            },
            title: null,
            plotOptions: {
                pie: {
                    dataLabels: {
                        enabled: false
                    }
                }
            },
            series: [{
                type: 'pie',
                data: this.get('data')
            }],
            colors: ['#777777', '#888888', '#999999', '#aaaaaa'],
            credits: {
                enabled: true
            }
        });
    }.on('didInsertElement'),

    willDestroyElement: function() {
        this.$().highcharts().destroy();
    }
});