New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  created: 76,
  completed: 45,
  failed: 21
});

styles.app.css

.task-completion {
  display: flex;
}

.section {
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
}

.bar {
  height: 8px;
  margin-right: 1px;
}

.section:first-child .bar {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.section:last-child .bar {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}  

.created {
  background-color: #090;
}

.completed {
  background-color: #09e;
}

.failed {
  background-color: #c00;
}

templates.application.hbs

<div class="task-completion">
	<div class="section" style="flex: {{created}}">
  	<span>Tasks Created: {{created}}</span>
  	<div class="created bar"></div>
  </div>
  <div class="section" style="flex: {{completed}}">
  	<span>Tasks Completed: {{completed}}</span>
  	<div class="completed bar"></div>
  </div>
  <div class="section" style="flex: {{failed}}">
  	<span>Tasks Failed: {{failed}}</span>
  	<div class="failed bar"></div>
  </div>
</div>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}