diff --git a/frontend/src/app/components/fhir-card/resources/observation/observation.component.html b/frontend/src/app/components/fhir-card/resources/observation/observation.component.html
index 5922653a..417ae961 100644
--- a/frontend/src/app/components/fhir-card/resources/observation/observation.component.html
+++ b/frontend/src/app/components/fhir-card/resources/observation/observation.component.html
@@ -14,7 +14,7 @@ <h6 class="card-title">{{displayModel?.sort_title}}</h6>
     <p class="az-content-text mg-b-20">Observations are a central element in healthcare, used to support diagnosis, monitor progress, determine baselines and patterns and even capture demographic characteristics.</p>
     <fhir-ui-table [displayModel]="displayModel" [tableData]="tableData"></fhir-ui-table>
 
-    <observation-bar-chart [observations]="[displayModel]"></observation-bar-chart>
+    <observation-bar-chart *ngIf="displayVisualization" [observations]="[displayModel]"></observation-bar-chart>
   </div>
   <div *ngIf="showDetails" class="card-footer">
     <a class="float-right" [routerLink]="['/explore', displayModel?.source_id, 'resource', displayModel?.source_resource_id]">details</a>
diff --git a/frontend/src/app/components/fhir-card/resources/observation/observation.component.spec.ts b/frontend/src/app/components/fhir-card/resources/observation/observation.component.spec.ts
index c4adf3ce..9960005b 100644
--- a/frontend/src/app/components/fhir-card/resources/observation/observation.component.spec.ts
+++ b/frontend/src/app/components/fhir-card/resources/observation/observation.component.spec.ts
@@ -1,7 +1,11 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ObservationComponent } from './observation.component';
-import {RouterTestingModule} from '@angular/router/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ObservationModel } from 'src/lib/models/resources/observation-model';
+import { observationR4Factory } from 'src/lib/fixtures/factories/r4/resources/observation-r4-factory';
+import { fhirVersions } from 'src/lib/models/constants';
+import { By } from '@angular/platform-browser';
 
 describe('ObservationComponent', () => {
   let component: ObservationComponent;
@@ -15,10 +19,18 @@ describe('ObservationComponent', () => {
 
     fixture = TestBed.createComponent(ObservationComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
+    fixture.detectChanges();
     expect(component).toBeTruthy();
   });
+
+  it('should not display a visualization if table is the only visualization type', () => {
+    component.displayModel = new ObservationModel(observationR4Factory.valueCodeableConcept().build(), fhirVersions.R4);
+    fixture.detectChanges();
+
+    expect(component.displayVisualization).toBeFalse();
+    expect(fixture.debugElement.query(By.css('observation-visualization'))).toBeFalsy();
+  });
 });
diff --git a/frontend/src/app/components/fhir-card/resources/observation/observation.component.ts b/frontend/src/app/components/fhir-card/resources/observation/observation.component.ts
index 64c44fd6..c9bf2e19 100644
--- a/frontend/src/app/components/fhir-card/resources/observation/observation.component.ts
+++ b/frontend/src/app/components/fhir-card/resources/observation/observation.component.ts
@@ -22,6 +22,7 @@ export class ObservationComponent implements OnInit {
   @Input() isCollapsed: boolean = false
 
   tableData: TableRowItem[] = []
+  displayVisualization: boolean = true
 
   constructor(public changeRef: ChangeDetectorRef, public router: Router) { }
 
@@ -30,6 +31,14 @@ export class ObservationComponent implements OnInit {
       return
     }
 
+    let visualizationTypes = this.displayModel?.value_model?.visualizationTypes()
+
+    // If only table is allowed, just don't display anything since we are already displaying
+    // everything in tabular format.
+    if (visualizationTypes.length == 1 && visualizationTypes[0] == 'table') {
+      this.displayVisualization = false
+    }
+
     this.tableData.push(
       {
         label: 'Issued on',
@@ -40,23 +49,23 @@ export class ObservationComponent implements OnInit {
         label: 'Subject',
         data: this.displayModel?.subject,
         data_type: TableRowItemDataType.Reference,
-        enabled: !!this.displayModel?.subject ,
+        enabled: !!this.displayModel?.subject,
       },
       {
         label: 'Coding',
         data: this.displayModel?.code,
-        data_type: TableRowItemDataType.Coding,
+        data_type: TableRowItemDataType.CodableConcept,
         enabled: !!this.displayModel?.code,
       },
       {
         label: 'Value',
-        data: [this.displayModel?.value_quantity_value,this.displayModel?.value_quantity_unit].join(" "),
-        enabled: !!this.displayModel?.value_quantity_value,
+        data: this.displayModel?.value_model?.display(),
+        enabled: !!this.displayModel?.value_model,
       },
       {
         label: 'Reference',
-        data: this.displayModel.referenceRangeDisplay(),
-        enabled: !!this.displayModel?.reference_range,
+        data: this.displayModel?.reference_range.display(),
+        enabled: !!this.displayModel?.reference_range.hasValue(),
       }
     )
   }
diff --git a/frontend/src/app/components/fhir-card/resources/observation/observation.stories.ts b/frontend/src/app/components/fhir-card/resources/observation/observation.stories.ts
index aa6de0c7..54ea75e0 100644
--- a/frontend/src/app/components/fhir-card/resources/observation/observation.stories.ts
+++ b/frontend/src/app/components/fhir-card/resources/observation/observation.stories.ts
@@ -5,6 +5,7 @@ import { ObservationComponent } from "./observation.component";
 import { ObservationModel } from "../../../../../lib/models/resources/observation-model";
 import { RouterTestingModule } from '@angular/router/testing';
 import { observationR4Factory } from 'src/lib/fixtures/factories/r4/resources/observation-r4-factory';
+import { codeableConceptR4Factory } from 'src/lib/fixtures/factories/r4/datatypes/codeable-concept-r4-factory';
 
 const meta: Meta<ObservationComponent> = {
   title: 'Fhir Card/Observation',
@@ -34,7 +35,7 @@ const meta: Meta<ObservationComponent> = {
 export default meta;
 type Story = StoryObj<ObservationComponent>;
 
-let observation = new ObservationModel(observationR4Factory.referenceRange().build(), fhirVersions.R4);
+let observation = new ObservationModel(observationR4Factory.valueQuantity().referenceRange().build(), fhirVersions.R4);
 observation.source_id = '123-456-789'
 observation.source_resource_id = '123-456-789'
 export const Entry: Story = {
@@ -42,3 +43,21 @@ export const Entry: Story = {
     displayModel: observation
   }
 };
+
+let observation2 = new ObservationModel(observationR4Factory.valueCodeableConcept().code(codeableConceptR4Factory.text('Covid Test').build()).build(), fhirVersions.R4);
+observation.source_id = '123-456-789'
+observation.source_resource_id = '123-456-789'
+export const CodeableConcept: Story = {
+  args: {
+    displayModel: observation2
+  }
+};
+
+let observation3 = new ObservationModel(observationR4Factory.dataAbsent().build(), fhirVersions.R4);
+observation.source_id = '123-456-789'
+observation.source_resource_id = '123-456-789'
+export const DataAbsent: Story = {
+  args: {
+    displayModel: observation3
+  }
+};
diff --git a/frontend/src/app/components/report-labs-observation/report-labs-observation.component.html b/frontend/src/app/components/report-labs-observation/report-labs-observation.component.html
index 4696fb48..c4e8b438 100644
--- a/frontend/src/app/components/report-labs-observation/report-labs-observation.component.html
+++ b/frontend/src/app/components/report-labs-observation/report-labs-observation.component.html
@@ -53,8 +53,8 @@
             <app-glossary-lookup [code]="observationCode" [codeSystem]="'http://loinc.org'"></app-glossary-lookup>
           </div>
 
-          <div class="col-12">
-            <observation-bar-chart [observations]="observationModels"></observation-bar-chart>
+          <div class="col-12 visualization-container">
+            <observation-visualization [observations]="observationModels"></observation-visualization>
           </div>
 
         </div>
diff --git a/frontend/src/app/components/report-labs-observation/report-labs-observation.component.scss b/frontend/src/app/components/report-labs-observation/report-labs-observation.component.scss
index e69de29b..0e503d0b 100644
--- a/frontend/src/app/components/report-labs-observation/report-labs-observation.component.scss
+++ b/frontend/src/app/components/report-labs-observation/report-labs-observation.component.scss
@@ -0,0 +1,5 @@
+.visualization-container {
+  max-height: 20em;
+  display: inline-block;
+  overflow: scroll;
+}
diff --git a/frontend/src/app/components/report-labs-observation/report-labs-observation.stories.ts b/frontend/src/app/components/report-labs-observation/report-labs-observation.stories.ts
index 258545b6..77ca9520 100644
--- a/frontend/src/app/components/report-labs-observation/report-labs-observation.stories.ts
+++ b/frontend/src/app/components/report-labs-observation/report-labs-observation.stories.ts
@@ -4,7 +4,7 @@ import { DecoratorFunction } from '@storybook/types';
 import { ReportLabsObservationComponent } from './report-labs-observation.component'
 import { PipesModule } from 'src/app/pipes/pipes.module';
 import { NgbCollapse } from '@ng-bootstrap/ng-bootstrap';
-import { ResourceFhir } from 'src/app/models/fasten/resource_fhir';
+import { IResourceRaw, ResourceFhir } from 'src/app/models/fasten/resource_fhir';
 import { GlossaryLookupComponent } from '../glossary-lookup/glossary-lookup.component';
 import { NgChartsModule } from 'ng2-charts';
 import { HTTP_CLIENT_TOKEN } from 'src/app/dependency-injection';
@@ -14,7 +14,9 @@ import { Observable, of } from 'rxjs';
 
 import R4Example1Json from "../../../lib/fixtures/r4/resources/observation/example1.json";
 import { Html as GlossaryLookupHtml } from '../glossary-lookup/glossary-lookup.stories';
-import { ObservationBarChartComponent } from '../fhir-card/common/observation-bar-chart/observation-bar-chart.component';
+import { ObservationVisualizationComponent } from '../fhir-card/common/observation-visualization/observation-visualization.component';
+import { fhirVersions } from 'src/lib/models/constants';
+import { observationR4Factory } from 'src/lib/fixtures/factories/r4/resources/observation-r4-factory';
 
 
 const withHttpClientProvider: DecoratorFunction<any> = (storyFunc, context) => {
@@ -40,7 +42,7 @@ const meta: Meta<ReportLabsObservationComponent> = {
   decorators: [
     withHttpClientProvider,
     moduleMetadata({
-      imports: [PipesModule, GlossaryLookupComponent, NgChartsModule, RouterTestingModule, HttpClientModule, ObservationBarChartComponent],
+      imports: [PipesModule, GlossaryLookupComponent, NgChartsModule, RouterTestingModule, HttpClientModule, ObservationVisualizationComponent],
       declarations: [ NgbCollapse ],
       providers: [],
     })
@@ -100,3 +102,35 @@ export const Entry: Story = {
     ...GlossaryLookupHtml.parameters
   }
 };
+
+
+const observation3: ResourceFhir = {
+  source_id: '',
+  source_resource_id: '',
+  source_resource_type: 'Observation',
+  fhir_version: '4',
+  sort_title: 'sort',
+  sort_date: new Date(),
+  resource_raw: observationR4Factory.valueCodeableConcept().build() as IResourceRaw,
+};
+
+const observation4: ResourceFhir = {
+  source_id: '',
+  source_resource_id: '',
+  source_resource_type: 'Observation',
+  fhir_version: '4',
+  sort_title: 'sort',
+  sort_date: new Date(),
+  resource_raw: observationR4Factory.valueCodeableConcept().build() as IResourceRaw,
+};
+
+export const CodableConcept: Story = {
+  args: {
+    observations: [observation3, observation4],
+    observationCode: '788-0',
+    observationTitle: 'Erythrocyte distribution width [Ratio] by Automated count',
+  },
+  parameters: {
+    ...GlossaryLookupHtml.parameters
+  }
+};