diff --git a/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.block.less b/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.block.less
index 68f380a82a..2a1d16487a 100644
--- a/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.block.less
+++ b/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.block.less
@@ -86,7 +86,7 @@
 .workflowChart-nodeStatus--success {
     fill: @default-succ;
 }
-.workflowChart-nodeStatus--failed {
+.workflowChart-nodeStatus--failed, .workflowChart-nodeStatus--canceled {
     fill: @default-err;
 }
 .WorkflowChart-detailsLink {
diff --git a/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.directive.js b/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.directive.js
index 506ab41e5e..ce25538807 100644
--- a/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.directive.js
+++ b/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.directive.js
@@ -535,6 +535,9 @@ export default ['$state','moment', '$timeout', '$window', '$filter', 'Rest', 'Ge
                                             case "error":
                                                 statusClass += "workflowChart-nodeStatus--failed";
                                                 break;
+                                            case "canceled":
+                                                statusClass += "workflowChart-nodeStatus--canceled";
+                                                break;
                                         }
                                     }
 
@@ -785,6 +788,9 @@ export default ['$state','moment', '$timeout', '$window', '$filter', 'Rest', 'Ge
                                     case "error":
                                         statusClass += "workflowChart-nodeStatus--failed";
                                         break;
+                                    case "canceled":
+                                        statusClass += "workflowChart-nodeStatus--canceled";
+                                        break;
                                 }
                             }
 
diff --git a/awx/ui/client/src/workflow-results/workflow-results.controller.js b/awx/ui/client/src/workflow-results/workflow-results.controller.js
index 937a7cbd32..23f07c058a 100644
--- a/awx/ui/client/src/workflow-results/workflow-results.controller.js
+++ b/awx/ui/client/src/workflow-results/workflow-results.controller.js
@@ -221,7 +221,7 @@ export default ['workflowData', 'workflowResultsService', 'workflowDataOptions',
                         runTimeElapsedTimer = workflowResultsService.createOneSecondTimer(moment(), updateWorkflowJobElapsedTimer);
                     }
 
-                    if(data.status === "successful" || data.status === "failed" || data.status === "error"){
+                    if(data.status === "successful" || data.status === "failed" || data.status === "canceled" || data.status === "error"){
                         $state.go('.', null, { reload: true });
                     }
             }
@@ -234,7 +234,7 @@ export default ['workflowData', 'workflowResultsService', 'workflowDataOptions',
                     // can happen if the GET request on the workflow job returns "waiting" and
                     // the sockets aren't established yet so we miss the event that indicates
                     // the workflow job has moved into a running state.
-                    if (!_.includes(['running', 'successful', 'failed', 'error'], $scope.workflow.status)){
+                    if (!_.includes(['running', 'successful', 'failed', 'error', 'canceled'], $scope.workflow.status)){
                         $scope.workflow.status = 'running';
                         runTimeElapsedTimer = workflowResultsService.createOneSecondTimer(moment(), updateWorkflowJobElapsedTimer);
                     }