2 files changed, 19 insertions, 5 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 0b35f2856..7bf546a62 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -189,7 +189,7 @@ export class Histogram extends React.Component<HistogramProps> {
         var xAxisTitle = Object.keys(dataSet[0])[0]
         var yAxisTitle = this.numericalYData ? Object.keys(dataSet[0])[1] : 'frequency';
         let uniqueArr: unknown[] = [...new Set(data)]
-        var numBins = (this.numericalXData && Number.isInteger(data[0][xAxisTitle]))? (this.rangeVals.xMax! - this.rangeVals.xMin! + 1) : uniqueArr.length
+        var numBins = (this.numericalXData && Number.isInteger(data[0]))? (this.rangeVals.xMax! - this.rangeVals.xMin! ) : uniqueArr.length
         var translateXAxis = !this.numericalXData || numBins<this.maxBins ?  width/(numBins+1)/2 : 0;
         if (numBins>this.maxBins) numBins = this.maxBins;
         var startingPoint = this.numericalXData? this.rangeVals.xMin! : 0;
@@ -249,7 +249,7 @@ export class Histogram extends React.Component<HistogramProps> {
 
         // more calculations based on bins
         // x-axis
-        if (!this.numericalXData) { // reorganize if the data is strings rather than numbers
+        if (!this.numericalXData) { // reorganize to match data if the data is strings rather than numbers
             // uniqueArr.sort()
             histDataSet.sort()
             for (let i=0; i<data.length; i++){
@@ -273,10 +273,24 @@ export class Histogram extends React.Component<HistogramProps> {
             translateXAxis = eachRectWidth / 2;
         }
         else {
-            eachRectWidth = width/(bins.length+1)
+            var allSame = true;
+            for (var i=0; i<bins.length; i++){
+                if (bins[i] && bins[i][0]){
+                    var compare = bins[i][0];
+                    for (let j=1; j<bins[i].length; j++){
+                        if (bins[i][j] != compare) allSame = false;
+                    }
+                }
+            }
+            if (allSame){ 
+                translateXAxis = eachRectWidth / 2;
+                eachRectWidth = width/(bins.length)
+            }
+            else eachRectWidth = width/(bins.length+1)
+
             x.range([0, width-eachRectWidth])
             xAxis = d3.axisBottom(x)
-                .ticks(numBins-1)
+                .ticks(bins.length-1)
         }
         // y-axis
         const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d: any) { 
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index d4570dee2..133e3a33a 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -270,7 +270,7 @@ export class PieChart extends React.Component<PieChartProps> {
                 var sliceColor;
                 var sliceColors = StrListCast(this.props.layoutDoc.pieSliceColors).map(each => each.split('::'));
                 sliceColors.map(each => {if (each[0]==StrCast(accessByName)) sliceColor = each[1]});
-                return sliceColor? StrCast(sliceColor) : d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] })
+                return sliceColor? StrCast(sliceColor) : d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%(d3.schemeSet3.length)] })
                 .attr("class", selected? 
                 function(d) {
                     return (selected && d.startAngle==selected.startAngle && d.endAngle==selected.endAngle)? 'slice hover' : 'slice';