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 48f33fe3..5922653a 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,13 +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>
 
-    <canvas baseChart
-            [height]="chartHeight"
-            [type]="'bar'"
-            [datasets]="barChartData"
-            [labels]="barChartLabels"
-            [options]="barChartOptions"
-    ></canvas>
+    <observation-bar-chart [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.ts b/frontend/src/app/components/fhir-card/resources/observation/observation.component.ts
index 4521dab2..64c44fd6 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
@@ -1,19 +1,17 @@
 import {ChangeDetectorRef, Component, Input, OnInit} from '@angular/core';
-import {NgbCollapseModule} from '@ng-bootstrap/ng-bootstrap';
-import {CommonModule, formatDate} from '@angular/common';
+import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
+import {CommonModule} from '@angular/common';
 import {BadgeComponent} from '../../common/badge/badge.component';
 import {TableComponent} from '../../common/table/table.component';
 import {Router, RouterModule} from '@angular/router';
-import {LocationModel} from '../../../../../lib/models/resources/location-model';
 import {TableRowItem, TableRowItemDataType} from '../../common/table/table-row-item';
 import {ObservationModel} from '../../../../../lib/models/resources/observation-model';
-import {ChartConfiguration} from 'chart.js';
-import fhirpath from 'fhirpath';
-import {NgChartsModule} from 'ng2-charts';
+import { ObservationBarChartComponent } from 'src/app/components/fhir-card/common/observation-bar-chart/observation-bar-chart.component';
 
 @Component({
   standalone: true,
-  imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent, RouterModule, NgChartsModule],
+  imports: [CommonModule, BadgeComponent, TableComponent, RouterModule, NgbCollapseModule, ObservationBarChartComponent],
+  providers: [],
   selector: 'fhir-observation',
   templateUrl: './observation.component.html',
   styleUrls: ['./observation.component.scss']
@@ -25,81 +23,6 @@ export class ObservationComponent implements OnInit {
 
   tableData: TableRowItem[] = []
 
-  //observation chart data
-  chartHeight = 45
-
-  barChartData =[
-
-    {
-      label: "Reference",
-      data: [[55,102], [44,120]],
-      backgroundColor: "rgba(91, 71, 251,0.6)",
-      hoverBackgroundColor: "rgba(91, 71, 251,0.2)"
-    },{
-      label: "Current",
-      data: [[80,81], [130,131]],
-      borderColor: "rgba(0,0,0,1)",
-      backgroundColor: "rgba(0,0,0,1)",
-      hoverBackgroundColor: "rgba(0,0,0,1)",
-      minBarLength: 3,
-      barPercentage: 1,
-      tooltip: {
-
-      }
-    }
-  ]  as ChartConfiguration<'bar'>['data']['datasets']
-
-  barChartLabels = [] // ["2020", "2018"] //["1","2","3","4","5","6","7","8"]
-
-  barChartOptions = {
-    indexAxis: 'y',
-    legend:{
-      display: false,
-    },
-    autoPadding: true,
-    //add padding to fix tooltip cutoff
-    layout: {
-      padding: {
-        left: 0,
-        right: 4,
-        top: 0,
-        bottom: 10
-      }
-    },
-    scales: {
-      y: {
-        stacked: true,
-        ticks: {
-          beginAtZero: true,
-          fontSize: 10,
-          min: 0,
-          // max: 80
-        },
-      },
-      x: {
-        scaleLabel:{
-          display: false,
-          labelString: "xaxis",
-          padding: 4,
-        },
-        // stacked: true,
-        ticks: {
-          beginAtZero: true,
-          fontSize: 10,
-          min: 0,
-          // max: 80
-        },
-      },
-    }
-  } as ChartConfiguration<'bar'>['options']
-
-  barChartColors = [
-    {
-      backgroundColor: 'white'
-    }
-  ];
-
-
   constructor(public changeRef: ChangeDetectorRef, public router: Router) { }
 
   ngOnInit(): void {
@@ -107,7 +30,8 @@ export class ObservationComponent implements OnInit {
       return
     }
 
-    this.tableData.push(    {
+    this.tableData.push(
+      {
         label: 'Issued on',
         data: this.displayModel?.effective_date,
         enabled: !!this.displayModel?.effective_date,
@@ -131,30 +55,13 @@ export class ObservationComponent implements OnInit {
       },
       {
         label: 'Reference',
-        data: [this.displayModel?.reference_range?.[0]?.low?.value,this.displayModel?.reference_range?.[0]?.high?.value].join(" "),
+        data: this.displayModel.referenceRangeDisplay(),
         enabled: !!this.displayModel?.reference_range,
-      })
-
-
-    //populate chart data
-    if(this.displayModel?.effective_date) {
-      this.barChartLabels.push(
-        formatDate(this.displayModel?.effective_date, "mediumDate", "en-US", undefined)
-      )
-    } else {
-      this.barChartLabels.push("")
-    }
-
-    this.barChartData[0].data = [[this.displayModel?.reference_range?.[0]?.low?.value, this.displayModel?.reference_range?.[0]?.high?.value]]
-    this.barChartData[1].data = [[this.displayModel?.value_quantity_value as number, this.displayModel?.value_quantity_value as number]]
-
-    let suggestedMax = (this.displayModel?.value_quantity_value as number) * 1.1;
-    this.barChartOptions.scales['x']['suggestedMax'] = suggestedMax
-
-    console.log("Observation chart data: ", this.barChartData[0].data, this.barChartData[1].data)
+      }
+    )
   }
+
   markForCheck(){
     this.changeRef.markForCheck()
   }
-
 }
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 1693cdb9..aa6de0c7 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
@@ -1,24 +1,18 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import {fhirVersions} from "../../../../../lib/models/constants";
-import R4Example1Json from "../../../../../lib/fixtures/r4/resources/observation/example1.json";
-import R4Example2Json from "../../../../../lib/fixtures/r4/resources/observation/example2.json";
-import R4Example3Json from "../../../../../lib/fixtures/r4/resources/observation/example3.json";
-import {ObservationComponent} from "./observation.component";
-import {ObservationModel} from "../../../../../lib/models/resources/observation-model";
+import { moduleMetadata } from '@storybook/angular';
+import { fhirVersions } from "../../../../../lib/models/constants";
+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';
 
-
-
-// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
 const meta: Meta<ObservationComponent> = {
   title: 'Fhir Card/Observation',
   component: ObservationComponent,
   decorators: [
-    // moduleMetadata({
-    //   imports: [AppModule]
-    // })
-    // applicationConfig({
-    //   providers: [importProvidersFrom(AppModule)],
-    // }),
+    moduleMetadata({
+      imports: [ RouterTestingModule ]
+    })
   ],
   tags: ['autodocs'],
   render: (args: ObservationComponent) => ({
@@ -40,30 +34,11 @@ const meta: Meta<ObservationComponent> = {
 export default meta;
 type Story = StoryObj<ObservationComponent>;
 
-// More on writing stories with args: https://storybook.js.org/docs/angular/writing-stories/args
-let r4Example1DisplayModel =  new ObservationModel(R4Example1Json, fhirVersions.R4)
-r4Example1DisplayModel.source_id = '123-456-789'
-r4Example1DisplayModel.source_resource_id = '123-456-789'
-export const R4Example1: Story = {
-  args: {
-    displayModel: r4Example1DisplayModel
-  }
-};
-
-let r4Example2DisplayModel =  new ObservationModel(R4Example2Json, fhirVersions.R4)
-r4Example2DisplayModel.source_id = '123-456-789'
-r4Example2DisplayModel.source_resource_id = '123-456-789'
-export const R4Example2: Story = {
-  args: {
-    displayModel: r4Example2DisplayModel
-  }
-};
-
-let r4Example3DisplayModel =  new ObservationModel(R4Example3Json, fhirVersions.R4)
-r4Example3DisplayModel.source_id = '123-456-789'
-r4Example3DisplayModel.source_resource_id = '123-456-789'
-export const R4Example3: Story = {
+let observation = new ObservationModel(observationR4Factory.referenceRange().build(), fhirVersions.R4);
+observation.source_id = '123-456-789'
+observation.source_resource_id = '123-456-789'
+export const Entry: Story = {
   args: {
-    displayModel: r4Example3DisplayModel
+    displayModel: observation
   }
 };
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 adc472ab..4696fb48 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
@@ -36,12 +36,13 @@
             <div #collapse="ngbCollapse" [ngbCollapse]="true">
 
               <ul>
-                <li class="cursor-pointer tx-indigo" *ngFor="let observation of observations" [routerLink]="['/explore', observation?.source_id, 'resource', observation?.source_resource_id]">Observation: {{observation | fhirPath: "Observation.effectiveDateTime": "Observation.issued" | date}}</li>
+                <li class="cursor-pointer tx-indigo" *ngFor="let observation of observations">
+                  <a [routerLink]="['/explore', observation?.source_id, 'resource', observation?.source_resource_id]">
+                    Observation: {{observation | fhirPath: "Observation.effectiveDateTime": "Observation.issued" | date}}
+                  </a>
+                </li>
               </ul>
             </div>
-
-
-
           </div>
         </div>
 
@@ -53,15 +54,12 @@
           </div>
 
           <div class="col-12">
-            <canvas baseChart [height]="chartHeight" [type]="'bar'" [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions"></canvas>
+            <observation-bar-chart [observations]="observationModels"></observation-bar-chart>
           </div>
 
-
-
         </div>
       </div>
     </div>
 
-
   </div><!-- card-body -->
 </div>
diff --git a/frontend/src/app/components/report-labs-observation/report-labs-observation.component.spec.ts b/frontend/src/app/components/report-labs-observation/report-labs-observation.component.spec.ts
index b92fd29d..d5aa5c1d 100644
--- a/frontend/src/app/components/report-labs-observation/report-labs-observation.component.spec.ts
+++ b/frontend/src/app/components/report-labs-observation/report-labs-observation.component.spec.ts
@@ -1,8 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { ReportLabsObservationComponent } from './report-labs-observation.component';
-import {PipesModule} from '../../pipes/pipes.module';
-import {NgbCollapseModule} from '@ng-bootstrap/ng-bootstrap';
+import { PipesModule } from '../../pipes/pipes.module';
+import { NgbCollapse } from '@ng-bootstrap/ng-bootstrap';
 
 describe('ReportLabsObservationComponent', () => {
   let component: ReportLabsObservationComponent;
@@ -10,8 +9,8 @@ describe('ReportLabsObservationComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [PipesModule, NgbCollapseModule],
-      declarations: [ ReportLabsObservationComponent ]
+      imports: [PipesModule],
+      declarations: [ ReportLabsObservationComponent, NgbCollapse ],
     })
     .compileComponents();
 
diff --git a/frontend/src/app/components/report-labs-observation/report-labs-observation.component.ts b/frontend/src/app/components/report-labs-observation/report-labs-observation.component.ts
index 3852ba5c..4bd242ee 100644
--- a/frontend/src/app/components/report-labs-observation/report-labs-observation.component.ts
+++ b/frontend/src/app/components/report-labs-observation/report-labs-observation.component.ts
@@ -1,11 +1,6 @@
-import {Component, Input, OnInit} from '@angular/core';
-import {ResourceFhir} from '../../models/fasten/resource_fhir';
-import {ChartConfiguration} from 'chart.js';
-// import { ChartConfiguration, ChartData, ChartEvent, ChartType } from 'chart.js';
-// import { BaseChartDirective } from 'ng2-charts';
-import * as fhirpath from 'fhirpath';
-import {formatDate} from '@angular/common';
-
+import { Component, Input, OnInit } from '@angular/core';
+import { ResourceFhir } from '../../models/fasten/resource_fhir';
+import { ObservationModel } from 'src/lib/models/resources/observation-model';
 
 @Component({
   selector: 'app-report-labs-observation',
@@ -13,186 +8,23 @@ import {formatDate} from '@angular/common';
   styleUrls: ['./report-labs-observation.component.scss']
 })
 export class ReportLabsObservationComponent implements OnInit {
-
   @Input() observations: ResourceFhir[] = []
   @Input() observationCode: string
   @Input() observationTitle: string
 
+  observationModels: ObservationModel[] = []
   firstObservation: ResourceFhir = null
-  // based on https://stackoverflow.com/questions/38889716/chartjs-2-stacked-bar-with-marker-on-top
-  // https://stackoverflow.com/questions/62711919/chart-js-horizontal-lines-per-bar
-
-
-  chartHeight = 60
-
-  barChartData =[
-    // {
-    //   label: "Current",
-    //   backgroundColor: 'rgba(255, 0, 128, 1)',
-    //   data: [],
-    //   xAxisID: "x-axis-current"
-    // },
-    // {
-    //   label: "Reference",
-    //   backgroundColor: 'rgba(99,189,50,0.2)',
-    //   data: [],
-    //   xAxisID: "x-axis-ref"
-    // },
-
-
-
-    {
-      label: "Reference",
-      data: [[55,102], [44,120]],
-      backgroundColor: "rgba(91, 71, 251,0.6)",
-      hoverBackgroundColor: "rgba(91, 71, 251,0.2)"
-    },{
-      label: "Current",
-      data: [[80,81], [130,131]],
-      borderColor: "rgba(0,0,0,1)",
-      backgroundColor: "rgba(0,0,0,1)",
-      hoverBackgroundColor: "rgba(0,0,0,1)",
-      minBarLength: 3,
-      barPercentage: 1,
-      tooltip: {
-
-      }
-      // id: "x-axis-current",
-      //important settings
-
-      //set the width of the line ( or point )
-      // pointRadius: 50,
-      // don´t show line betrween points
-      // showLine: false,
-      //change points of line chart to line style ( little bit confusin why it´s named point anyway )
-      // pointStyle: 'line',
-
-      //chart type
-      // type: "line",
-    }
-  ]  as ChartConfiguration<'bar'>['data']['datasets']
-
-  barChartLabels = [] // ["2020", "2018"] //["1","2","3","4","5","6","7","8"]
-
-  barChartOptions = {
-    indexAxis: 'y',
-    legend:{
-      display: false,
-    },
-    //add padding to fix tooltip cutoff
-    layout: {
-      padding: {
-        left: 0,
-        right: 4,
-        top: 0,
-        bottom: 10
-      }
-    },
-    scales: {
-      y: {
-        stacked: true,
-        ticks: {
-          beginAtZero: true,
-          fontSize: 10,
-          min: 0,
-          // max: 80
-        },
-      },
-      x: {
-        scaleLabel:{
-          display: false,
-          labelString: "xaxis",
-          padding: 4,
-        },
-        // stacked: true,
-        ticks: {
-          beginAtZero: true,
-          fontSize: 10,
-          min: 0,
-          // max: 80
-        },
-
-      },
-    }
-  } as ChartConfiguration<'bar'>['options']
-
-  barChartColors = [
-    {
-      backgroundColor: 'white'
-    }
-  ];
-
 
   constructor() { }
 
   ngOnInit(): void {
-
-    let currentValues: number[] = []
-
-    let referenceRanges = []
-
     //sort observations
     this.observations = this.observations?.sort((a, b) => a.sort_date > b.sort_date ? -1 : a.sort_date < b.sort_date ? 1 : 0)
 
     if(this.observations.length > 0){
       this.firstObservation = this.observations[0]
     }
-    for(let observation of this.observations){
-      //get label
-      this.barChartLabels.push(
-        formatDate(fhirpath.evaluate(observation.resource_raw, "Observation.effectiveDateTime")[0], "mediumDate", "en-US", undefined)
-      )
-
-      //get current value
-      // let currentValue = fhirpath.evaluate(observation.resource_raw, "Observation.valueQuantity.value")[0]
-      // if(currentValue != null){
-      //   currentValues.push([currentValue, currentValue])
-      // } else {
-      //   currentValues.push([])
-      // }
-      currentValues.push(fhirpath.evaluate(observation.resource_raw, "Observation.valueQuantity.value")[0])
-
-      //set chart x-axis label
-      let units = fhirpath.evaluate(observation.resource_raw, "Observation.valueQuantity.unit")[0]
-
-      //TODO: fix x-axis label
-      // if(units){
-      //
-      //   (this.barChartOptions as ChartConfiguration<'bar'>['options']).scales['x']['scaleLabel'].display = true
-      //   (this.barChartOptions as ChartConfiguration<'bar'>['options']).scales['y']['scaleLabel'].labelString = units
-      // }
-
-
-      //add low/high ref value blocks
-      // let referenceLow = fhirpath.evaluate(observation.resource_raw, "Observation.referenceRange.low.value")[0]
-      // let referenceHigh = fhirpath.evaluate(observation.resource_raw, "Observation.referenceRange.high.value")[0]
-      // if (referenceLow != null && referenceHigh != null){
-      //   referenceRanges.push([referenceLow, referenceHigh])
-      // } else {
-      //   referenceRanges.push([0,0])
-      // }
-      referenceRanges.push([
-        fhirpath.evaluate(observation.resource_raw, "Observation.referenceRange.low.value")[0],
-        fhirpath.evaluate(observation.resource_raw, "Observation.referenceRange.high.value")[0]
-      ])
-    }
-
-
-
-    // @ts-ignore
-    this.barChartData[0].data = referenceRanges
-    this.barChartData[1].data = currentValues.map(v => [v, v])
-    // this.barChartData[1].data = currentValues
-
-    let suggestedMax = Math.max(...currentValues) * 1.1;
-    this.barChartOptions.scales['x']['suggestedMax'] = suggestedMax
 
-    console.log(this.observationTitle, this.barChartData[0].data, this.barChartData[1].data)
-
-
-    if(currentValues.length > 1){
-      this.chartHeight = 30 * currentValues.length
-    }
+    this.observationModels = this.observations.map(ob => new ObservationModel(ob.resource_raw))
   }
-
 }
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 7e21a1e6..258545b6 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
@@ -14,6 +14,7 @@ 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';
 
 
 const withHttpClientProvider: DecoratorFunction<any> = (storyFunc, context) => {
@@ -39,8 +40,8 @@ const meta: Meta<ReportLabsObservationComponent> = {
   decorators: [
     withHttpClientProvider,
     moduleMetadata({
-      imports: [PipesModule, GlossaryLookupComponent, NgChartsModule, RouterTestingModule, HttpClientModule],
-      declarations: [NgbCollapse],
+      imports: [PipesModule, GlossaryLookupComponent, NgChartsModule, RouterTestingModule, HttpClientModule, ObservationBarChartComponent],
+      declarations: [ NgbCollapse ],
       providers: [],
     })
   ],