chart axis labels

1 files changed, 13 insertions, 2 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index cb0b8cd9a..1da803076 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -244,10 +244,10 @@ export class Histogram extends React.Component<HistogramProps> {
         let uniqueArr = [...new Set(data)]
         var numBins = uniqueArr.length
         if (+d3.max(data)!) numBins = +d3.max(data)!
-        // var numBins = (+d3.max(data)!)? +d3.max(data)!  : 3;
 
         const svg = d3.select(this._histogramRef.current)
             .append("svg")
+                .attr("class", "graph")
                 .attr("width", width + this.props.margin.right + this.props.margin.left)
                 .attr("height", height + this.props.margin.top + this.props.margin.bottom)
             .append("g")
@@ -297,6 +297,18 @@ export class Histogram extends React.Component<HistogramProps> {
             .attr("transform", "translate(" + translateXAxis + ", " + height + ")")
             .call(xAxis)
 
+        // axis titles
+        svg.append("text")
+            .attr("transform", "translate(" + (width/2) + " ," + (height+40) + ")")
+            .style("text-anchor", "middle")
+            .text(field);
+        svg.append("text")
+            .attr("transform", "rotate(-90)")
+            .attr("x", -(height/2))
+            .attr("y", -20)
+            .style("text-anchor", "middle")
+            .text('frequency');
+
         d3.format('.0f')
 
         svg.selectAll("rect")
@@ -305,7 +317,6 @@ export class Histogram extends React.Component<HistogramProps> {
             .append("rect")
               .attr("x", 1)
               .attr("transform", function(d) { return "translate(" + x(d.x0! - 1) + "," + y(d.length) + ")"; })
-            //   .attr("width", function(d) { return x(d.x1!) - x(d.x0! )  ; })
               .attr("width", width/(numBins))
               .attr("height", function(d) { return height - y(d.length); })
               .attr("style", "outline: thin solid black;")