[Chartjs]-Can I use a gradient in Chart.js without accessing the chart context when the chart is created?

by

3👍

✅

You should learn to create ember components yourself, w/o relying on 3rd parties. Otherwise your life as developer always will be full of struggles. It’s especially sad in cases like this, when 3rd-party component itself is so simple.

You will need to:

  1. Remove ember-cli-chart from package.json
  2. npm install chart.js --save-dev
  3. In ember-cli-build.js file add app.import('node_modules/chart.js/dist/Chart.js'); (look into node_modules directory to make sure this is a correct path)
  4. Create ember-chart.js in app/components directory and put component’s code there. For code itself, you can copy from ember-cli-chart
  5. Now in didInsertElement you can do with chart whatever you want

People often over-use 3rd-party ember components. Sometimes using 3rd-party component makes sense: when it is complex and provide enough flexibility and value. But often using 3rd-party components just limits you.

0👍

I found the way to do this was add multiple stops:

var ctx = document.getElementById("myChart").getContext("2d");
var gradientStroke = ctx.createLinearGradient(0, 1200, 0, 0);
gradientStroke.addColorStop(0, "#80b6f4");
gradientStroke.addColorStop(0.2, "#94d973");
gradientStroke.addColorStop(0.4, "#80b6f4");
gradientStroke.addColorStop(1, "#94d973");

Hope that helps you get started

Example: http://neophytte.mine.nu/portfolio/skills2.html

Leave a comment