diff --git a/ui/app/components/chart-primitives/area.hbs b/ui/app/components/chart-primitives/area.hbs
index 4ba8af25f..bc411a9f3 100644
--- a/ui/app/components/chart-primitives/area.hbs
+++ b/ui/app/components/chart-primitives/area.hbs
@@ -7,7 +7,7 @@
     <path class="fill" d="{{this.area}}" />
   </clipPath>
 </defs>
-<g class="area {{this.colorClass}}" ...attributes>
+<g data-test-chart-area class="area {{this.colorClass}}" ...attributes>
   <path class="line" d="{{this.line}}" />
   <rect class="fill" x="0" y="0" width="{{@width}}" height="{{@height}}" fill="url(#{{this.fillId}})" clip-path="url(#{{this.maskId}})" />
 </g>
diff --git a/ui/app/components/primary-metric/allocation.hbs b/ui/app/components/primary-metric/allocation.hbs
index b2f872160..d8c221bd5 100644
--- a/ui/app/components/primary-metric/allocation.hbs
+++ b/ui/app/components/primary-metric/allocation.hbs
@@ -7,7 +7,7 @@
     {{else}} {{this.metric}} {{/if}}
   </h4>
   <div class="primary-graphic">
-    <StatsTimeSeries @data={{this.series}} @dataProp="data" @useDefaults={{false}}>
+    <StatsTimeSeries @data={{this.series}} @dataProp="data" >
       <:svg as |c|>
         {{#each (reverse this.series) as |series idx|}}
           <c.Area @data={{series.data}} @colorScale={{this.colorScale}} @index={{idx}} />
diff --git a/ui/app/components/stats-time-series.js b/ui/app/components/stats-time-series.js
index 401b6baf1..6df134b3a 100644
--- a/ui/app/components/stats-time-series.js
+++ b/ui/app/components/stats-time-series.js
@@ -16,7 +16,7 @@ export default class StatsTimeSeries extends Component {
   }
 
   get useDefaults() {
-    return this.args.useDefaults != null ? this.args.useDefaults : true;
+    return !this.args.dataProp;
   }
 
   // Specific a11y descriptors
diff --git a/ui/tests/integration/components/primary-metric/allocation-test.js b/ui/tests/integration/components/primary-metric/allocation-test.js
new file mode 100644
index 000000000..edc52a457
--- /dev/null
+++ b/ui/tests/integration/components/primary-metric/allocation-test.js
@@ -0,0 +1,71 @@
+import { setupRenderingTest } from 'ember-qunit';
+import { module, test } from 'qunit';
+import { findAll, render } from '@ember/test-helpers';
+import { initialize as fragmentSerializerInitializer } from 'nomad-ui/initializers/fragment-serializer';
+import hbs from 'htmlbars-inline-precompile';
+import { setupPrimaryMetricMocks, primaryMetric } from './primary-metric';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
+import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
+
+const mockTasks = [
+  { task: 'One', reservedCPU: 200, reservedMemory: 500, cpu: [], memory: [] },
+  { task: 'Two', reservedCPU: 100, reservedMemory: 200, cpu: [], memory: [] },
+  { task: 'Three', reservedCPU: 300, reservedMemory: 100, cpu: [], memory: [] },
+];
+
+module('Integration | Component | PrimaryMetric::Allocation', function(hooks) {
+  setupRenderingTest(hooks);
+  setupPrimaryMetricMocks(hooks, [...mockTasks]);
+
+  hooks.beforeEach(function() {
+    fragmentSerializerInitializer(this.owner);
+    this.store = this.owner.lookup('service:store');
+    this.server = startMirage();
+    this.server.create('namespace');
+    this.server.create('node');
+    this.server.create('job', { groupsCount: 1, groupTaskCount: 3, createAllocations: false });
+    this.server.create('allocation');
+  });
+
+  hooks.afterEach(function() {
+    this.server.shutdown();
+  });
+
+  const template = hbs`
+    <PrimaryMetric::Allocation
+      @allocation={{this.resource}}
+      @metric={{this.metric}} />
+  `;
+
+  const preload = async store => {
+    await store.findAll('allocation');
+  };
+
+  const findResource = store => store.peekAll('allocation').get('firstObject');
+
+  test('Must pass an accessibility audit', async function(assert) {
+    await preload(this.store);
+
+    const resource = findResource(this.store);
+    this.setProperties({ resource, metric: 'cpu' });
+
+    await render(template);
+    await componentA11yAudit(this.element, assert);
+  });
+
+  test('Each task for the allocation gets its own line', async function(assert) {
+    await preload(this.store);
+
+    const resource = findResource(this.store);
+    this.setProperties({ resource, metric: 'cpu' });
+
+    await render(template);
+    assert.equal(findAll('[data-test-chart-area]').length, mockTasks.length);
+  });
+
+  primaryMetric({
+    template,
+    preload,
+    findResource,
+  });
+});