Gradient Carts

components.dope-chart.js

import Ember from 'ember';

export default Ember.Component.extend({
  fillGradient: null,
  strokeGradient: null,

  didInsertElement() {
    /*** Create Gradients ***/
    const ctx = this.$().find('canvas')[0].getContext('2d');

    var strokeGradient = ctx.createLinearGradient(0,0,ctx.canvas.width,0);
      strokeGradient.addColorStop(0, 'rgba(34,113,238,1)');
      strokeGradient.addColorStop(0.5, 'rgba(124,98,206,1)');  
      strokeGradient.addColorStop(1, 'rgba(236,44,137,1)');
    
    var fillGradient = ctx.createLinearGradient(0,0,ctx.canvas.width,0);
      fillGradient.addColorStop(0, 'rgba(34,113,238,0.25)');
      fillGradient.addColorStop(0.5, 'rgba(124,98,206,0.25)');  
      fillGradient.addColorStop(1, 'rgba(236,44,137,0.25)');

    this.set('fillGradient', fillGradient);
    this.set('strokeGradient', strokeGradient);
  },
  chartData: Ember.computed('fillGradient', 'strokeGradient', function() {
    let fillGradient = this.get('fillGradient');
    let strokeGradient = this.get('strokeGradient');
    let data = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [
        {
          label: "Dope Test",
          fill: true,
          lineTension: 0.25,
          backgroundColor: fillGradient,
          borderColor: strokeGradient,
          borderCapStyle: 'butt',
          borderDash: [],
          borderDashOffset: 0.0,
          borderJoinStyle: 'miter',
          pointBorderColor: strokeGradient,
          pointBackgroundColor: "#fff",
          pointBorderWidth: 2,
          pointHoverRadius: 5,
          pointHoverBackgroundColor: strokeGradient,
          pointHoverBorderColor: "#fff",
          pointHoverBorderWidth: 4,
          pointRadius: 4,
          pointHitRadius: 10,
          data: [65, 59, 80, 81, 56, 55, 40],
          spanGaps: false,
        }
      ]
    };

    return data;
  }),
  chartOptions: []
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

<h1>Gradient Chart Test</h1>
<br>
<br>
{{outlet}}
{{dope-chart}}
<br>
<br>

templates.components.dope-chart.hbs

{{ember-chart type="line" data=chartData options=chartOptions width=200 height=200}}

twiddle.json

{
  "version": "0.10.6",
  "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.9.0",
    "ember-data": "2.9.0",
    "ember-template-compiler": "2.9.0",
    "ember-testing": "2.9.0"
  },
  "addons": {
    "ember-cli-chart": "2.0.6"
  }
}