1 files changed, 8 insertions, 9 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 5450d03b1..a7c4a00b0 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -5,10 +5,9 @@ import { IReactionDisposer, action, computed, makeObservable, observable, reacti
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { FaFillDrip } from 'react-icons/fa';
-import { Doc, NumListCast } from '../../../../../fields/Doc';
+import { Doc, NumListCast, StrListCast } from '../../../../../fields/Doc';
 import { List } from '../../../../../fields/List';
-import { listSpec } from '../../../../../fields/Schema';
-import { Cast, DocCast, StrCast } from '../../../../../fields/Types';
+import { DocCast, StrCast } from '../../../../../fields/Types';
 import { Docs } from '../../../../documents/Documents';
 import { undoable } from '../../../../util/UndoManager';
 import { ObservableReactComponent } from '../../../ObservableReactComponent';
@@ -108,13 +107,13 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
     }
 
     @computed get defaultBarColor() {
-        return Cast(this.layoutDoc.dataViz_histogram_defaultColor, 'string', '#69b3a2');
+        return StrCast(this.layoutDoc.dataViz_histogram_defaultColor, '#69b3a2')!;
     }
     @computed get barColors() {
-        return Cast(this.layoutDoc.dataViz_histogram_barColors, listSpec('string'), null);
+        return StrListCast(this.layoutDoc.dataViz_histogram_barColors);
     }
     @computed get selectedBins() {
-        return Cast(this.layoutDoc.dataViz_histogram_selectedBins, listSpec('number'), null);
+        return NumListCast(this.layoutDoc.dataViz_histogram_selectedBins);
     }
 
     @computed get rangeVals(): { xMin?: number; xMax?: number; yMin?: number; yMax?: number } {
@@ -129,7 +128,7 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
         // restore selected bars
         this._histogramSvg?.selectAll('rect').attr('class', dIn => {
             const d = dIn as HistogramData;
-            if (this.selectedBins.some(selBin => d[0] === selBin)) {
+            if (this.selectedBins?.some(selBin => d[0] === selBin)) {
                 this._selectedBars.push(d);
                 return 'histogram-bar hover';
             }
@@ -199,10 +198,10 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
                     const alreadySelected = this._selectedBars.findIndex(eachData => !Object.keys(d).some(key => d[key] !== eachData[key]));
                     if (alreadySelected !== -1) {
                         this._selectedBars.splice(alreadySelected, 1);
-                        this.selectedBins.splice(alreadySelected, 1);
+                        this.selectedBins?.splice(alreadySelected, 1);
                     } else {
                         this._selectedBars.push(d);
-                        this.selectedBins.push(d[0] as number);
+                        this.selectedBins?.push(d[0] as number);
                     }
                     const showSelectedLabel = (dataset: HistogramData[]) => {
                         const datum = dataset.lastElement();