AddNewChart

components.chart-view.js

import Ember from 'ember';

export default Ember.Component.extend({
  
});

controllers.application.js

import Ember from 'ember';
import ChartViewComponent from '../components/chart-view'

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  options: {
        responsive: true,
        title: {
            display: true,
            text: "Chart.js Time Point Data"
        },
        scales: {
            xAxes: [{
                type: "time",
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Date'
                }
            }],
            yAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'value'
                }
            }]
        }
    },
    lineValue1: 65,
    lineValue2: 59,
    lineLabel: "July",
    lineData: Ember.computed('lineValue1', 'lineValue2', 'lineLabel', function() {
      var labels = ["January", "February", "March", "April", "May", "June"];
      labels.push(this.get('lineLabel'));
      return {
          // labels: labels,
          datasets: [{
              label: "My First dataset",
              backgroundColor: "rgb(54, 162, 235)",
              borderColor: "rgb(54, 162, 235)",
              fill: false,
              data: [{
                      x: moment("2010-01-01 00:00:00"),
                      y: "6219.94",
                  },
                  {
                      x: moment("2010-01-02 00:00:00"),
                      y: "6219.96",
                  },
                  {
                      x: moment("2010-01-03 00:00:00"),
                      y: "6219.96",
                  },
                  {
                      x: moment("2010-01-04 00:00:00"),
                      y: "6219.97",
                  },
                  {
                      x: moment("2010-01-05 00:00:00"),
                      y: "6219.97",
                  },
                  {
                      x: moment("2010-01-06 00:00:00"),
                      y: "6219.97",
                  },
                  {
                      x: moment("2010-01-07 00:00:00"),
                      y: "6219.97",
                  },
                  {
                      x: moment("2010-01-08 00:00:00"),
                      y: "6219.97",
                  },
                  {
                      x: moment("2010-01-09 00:00:00"),
                      y: "6219.97",
                  },
                  {
                      x: moment("2010-01-10 00:00:00"),
                      y: "6219.97",
                  },
                  {
                      x: moment("2010-01-11 00:00:00"),
                      y: "6219.98",
                  },
                  {
                      x: moment("2010-01-12 00:00:00"),
                      y: "6219.99",
                  },
                  {
                      x: moment("2010-01-13 00:00:00"),
                      y: "6220",
                  },
                  {
                      x: moment("2010-01-14 00:00:00"),
                      y: "6219.99",
                  }
              ]
          }]
      };
  }),
  actions: {
    addChart() {
      let owner = Ember.getOwner(this);
      let component = ChartViewComponent.create
        layout: Ember.HTMLBars.compile('<div></div>')
        renderer: owner.lookup('renderer:-dom')
      
      component.append();
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
<button {{action 'addChart' }}>Add Chart</button>
<div id="main">

</div>
{{chart-view lineData=lineData options=options}}
{{outlet}}
<br>
<br>

templates.components.chart-view.hbs

{{ember-chart type='line' data=lineData width="600" height="200" options=options}}

{{yield}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-cli-moment-shim": "3.0.1",
    "ember-moment": "7.2.0",
    "ember-cli-chart": "3.3.1"
  }
}