linking default histogram color bug fix

1 files changed, 6 insertions, 4 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index e5e3ccd53..46a264386 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -424,7 +424,7 @@ export class Histogram extends React.Component<HistogramProps> {
                         return height - y(d.length)})
               .attr("width", eachRectWidth)
               .attr("class", 'histogram-bar')
-              .attr("fill", (d)=>{ return this.props.layoutDoc['histogramBarColors-'+d[0]]? StrCast(this.props.layoutDoc['histogramBarColors-'+d[0]]) : this.props.layoutDoc.defaultHistogramColor? StrCast(this.props.layoutDoc.defaultHistogramColor): '#69b3a2'})
+              .attr("fill", (d)=>{ return this.props.layoutDoc['histogramBarColors-'+d[0]]? StrCast(this.props.layoutDoc['histogramBarColors-'+d[0]]) : StrCast(this.props.layoutDoc['defaultHistogramColor'])})
     };
 
     @action changeSelectedColor = (color: string) => {
@@ -439,16 +439,16 @@ export class Histogram extends React.Component<HistogramProps> {
             else return true;
         })
         defaultColorBars.attr("fill", color);
-        this.props.layoutDoc.defaultHistogramColor = color;
+        this.props.layoutDoc['defaultHistogramColor'] = color;
     };
 
     render() {
-        this.componentDidMount();
         var curSelectedBarName;
         var titleAccessor: any='';
         if (this.props.axes.length==2) titleAccessor = 'histogram-title-'+this.props.axes[0]+'-'+this.props.axes[1];
         else if (this.props.axes.length>0) titleAccessor = 'histogram-title-'+this.props.axes[0];
         if (!this.props.layoutDoc[titleAccessor]) this.props.layoutDoc[titleAccessor] = this.defaultGraphTitle;
+        if (!this.props.layoutDoc['defaultHistogramColor']) this.props.layoutDoc['defaultHistogramColor'] = '#69b3a2';
         var selected: string;
         if (this._currSelected){
             curSelectedBarName = StrCast(this._currSelected![this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))
@@ -460,6 +460,8 @@ export class Histogram extends React.Component<HistogramProps> {
             selected += ' }';
         }
         else selected = 'none';
+
+        this.componentDidMount();
         return (
             this.props.axes.length >= 1 ? (
             <div className="chart-container" >
@@ -476,7 +478,7 @@ export class Histogram extends React.Component<HistogramProps> {
                         tooltip={'Change Default Bar Color'} 
                         type={Type.SEC} 
                         icon={<FaFillDrip/>}
-                        selectedColor={this.props.layoutDoc.defaultHistogramColor? StrCast(this.props.layoutDoc.defaultHistogramColor): '#69b3a2'}
+                        selectedColor={StrCast(this.props.layoutDoc['defaultHistogramColor'])}
                         setSelectedColor={color => this.changeDefaultColor(color)}
                         size={Size.XSMALL}
                     />