diff --git a/packages/Charts/src/utils/tree-utils.ts b/packages/Charts/src/utils/tree-utils.ts
index 2fd6323b73..de1a0fb4e5 100644
--- a/packages/Charts/src/utils/tree-utils.ts
+++ b/packages/Charts/src/utils/tree-utils.ts
@@ -7,7 +7,7 @@ export class TreeUtils {
 
   static async toTree(dataFrame: DG.DataFrame, splitByColumnNames: string[], rowMask: DG.BitSet,
     visitNode: ((arg0: TreeDataType) => void) | null = null, aggregations:
-      AggregationInfo[] = [], linkSelection: boolean = true, selection?: boolean, inherit?: boolean): Promise<TreeDataType> {
+      AggregationInfo[] = [], linkSelection: boolean = true, selection?: boolean, inherit?: boolean, includeNulls?: boolean): Promise<TreeDataType> {
     const data: TreeDataType = {
       name: 'All',
       value: 0,
@@ -27,7 +27,14 @@ export class TreeUtils {
       builder.add(aggregation.type, aggregation.columnName, aggregation.propertyName);
     }
 
-    const aggregated = builder.aggregate();
+    let aggregated = builder.aggregate();
+    if (!includeNulls) {
+      const colList: DG.Column[] = aggregated.columns.toList().filter((col) => splitByColumnNames.includes(col.name));
+      const filter = DG.BitSet.create(aggregated.rowCount, (rowI: number) => {
+        return colList.every((col) => !col.isNone(rowI));
+      });
+      aggregated = aggregated.clone(filter);
+    }
 
     if (linkSelection) {
       grok.data.linkTables(dataFrame, aggregated, splitByColumnNames,
diff --git a/packages/Charts/src/viewers/tree/tree-viewer.ts b/packages/Charts/src/viewers/tree/tree-viewer.ts
index 7cf42503d8..ba843231a5 100644
--- a/packages/Charts/src/viewers/tree/tree-viewer.ts
+++ b/packages/Charts/src/viewers/tree/tree-viewer.ts
@@ -43,6 +43,7 @@ export class TreeViewer extends EChartViewer {
   fontSize: number;
   showCounts: boolean;
   onClick: onClickOptions;
+  includeNulls: boolean;
 
   constructor() {
     super();
@@ -66,6 +67,7 @@ export class TreeViewer extends EChartViewer {
     this.fontSize = this.int('fontSize', 12);
     this.showCounts = this.bool('showCounts', false);
     this.onClick = <onClickOptions> this.string('onClick', 'Select', { choices: ['Select', 'Filter']});
+    this.includeNulls = this.bool('includeNulls', true);
 
     this.option = {
       series: [
@@ -188,7 +190,7 @@ export class TreeViewer extends EChartViewer {
       this.rowSource = rowSourceMap[this.onClick as onClickOptions] || this.rowSource;
     if (p?.name === 'hierarchyColumnNames' || p?.name === 'sizeColumnName' ||
         p?.name === 'sizeAggrType' || p?.name === 'colorColumnName' || p?.name === 'colorAggrType' ||
-        p?.name === 'fontSize' || p?.name === 'showCounts') {
+        p?.name === 'fontSize' || p?.name === 'showCounts' || p?.name === 'includeNulls') {
       if (p?.name === 'hierarchyColumnNames')
         this.chart.clear();
       if (p?.name === 'colorColumnName' || p?.name === 'colorAggrType')
@@ -260,8 +262,7 @@ export class TreeViewer extends EChartViewer {
     if (this.colorColumnName && this.applyColorAggr)
       aggregations.push({ type: <DG.AggregationType> this.colorAggrType,
         columnName: this.colorColumnName, propertyName: 'color' });
-
-    return [await TreeUtils.toTree(this.dataFrame, this.hierarchyColumnNames, this.filter, null, aggregations)];
+    return [await TreeUtils.toTree(this.dataFrame, this.hierarchyColumnNames, this.filter, null, aggregations, true, undefined, undefined, this.includeNulls)];
   }
 
   render(): void {