1 files changed, 14 insertions, 4 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 6591581f7..26c40045c 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -16,6 +16,7 @@ import { ColorPicker, EditableText, IconButton, Size, Type } from "browndash-com
 import { FaFillDrip } from "react-icons/fa";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { listSpec } from "../../../../../fields/Schema";
+import { scaleCreatorNumerical, yAxisCreator } from "../utils/D3Utils";
 
 export interface HistogramProps {
     rootDoc: Doc;
@@ -63,7 +64,7 @@ export class Histogram extends React.Component<HistogramProps> {
         var ax0 = this.props.axes[0];
         var ax1 = this.props.axes[1];
         if (/\d/.test(this.props.pairs[0][ax0])) { this.numericalXData = true;}
-        if (/\d/.test(this.props.pairs[0][ax1]) && this.props.pairs.length < this.maxBins) { this.numericalYData = true;}
+        if (/\d/.test(this.props.pairs[0][ax1]) ) { this.numericalYData = true;}
         return this.props.pairs
             ?.filter(pair => (!this.incomingLinks.length ? true : this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(guids[this.props.pairs.indexOf(pair)])))
             .map(pair => ({ [ax0]: (pair[this.props.axes[0]]), [ax1]: (pair[this.props.axes[1]]) }))
@@ -282,7 +283,7 @@ export class Histogram extends React.Component<HistogramProps> {
                 }
                 for (let i=0; i<data.length; i++){
                     let barData = histStringDataSet.filter(each => each[xAxisTitle]==data[i])
-                    barData[0][yAxisTitle] = Number(barData[0][yAxisTitle]) + 1;
+                    histStringDataSet.filter(each => each[xAxisTitle]==data[i])[0][yAxisTitle] = Number(barData[0][yAxisTitle]) + 1;
                 }
             }
             histDataSet = histStringDataSet
@@ -337,10 +338,13 @@ export class Histogram extends React.Component<HistogramProps> {
             translateXAxis = eachRectWidth / 2;
         }
         else {
+            eachRectWidth = width/(bins.length+1)
+            x.range([0, width-eachRectWidth])
             xAxis = d3.axisBottom(x)
                 .ticks(numBins-1)
         }
-        const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d: any) { return d[yAxisTitle]!.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')})
+        const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d: any) { 
+            return Number(d[yAxisTitle]!.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))})
                     : d3.max(bins, function(d) { return d.length; })
 
         var y = d3.scaleLinear()
@@ -348,8 +352,14 @@ export class Histogram extends React.Component<HistogramProps> {
             y.domain([0, +maxFrequency!]);
         var yAxis = d3.axisLeft(y)
             .ticks(maxFrequency!)
-        svg.append("g")
+        if (this.numericalYData){
+            const yScale = scaleCreatorNumerical(0, Number(maxFrequency), height, 0);
+            yAxisCreator(svg.append('g'), width, yScale);
+        }
+        else{
+            svg.append("g")
             .call(yAxis);
+        }
         svg.append("g")
             .attr("transform", "translate(" + translateXAxis + ", " + height + ")")
             .call(xAxis)