Draw additional x-axis line at y-0 if negative values are available #…

…1427

src/components/charts/BarChartComponent/axes.js

@@ -9,6 +9,32 @@ const getXAxisTickAngle = (size, width) => {
   return 2 * Math.atan((a + Math.sqrt(a * a + b * b - c * c)) / (b + c));
 };
 
+export const populateY0Axis = (svg, rangeY, width, data, fields) => {
+  const keys = fields.map(field => field.fieldName);
+  const minY = d3.min(data, d => {
+    return d3.min(keys, key => {
+      return d[key];
+    });
+  });
+  if (minY >= 0) return;
+
+  svg
+    .select("g.y0-axis")
+    .selectAll("*")
+    .remove();
+
+  svg
+    .select("g.y0-axis")
+    .append("line")
+    .attr("y1", rangeY(-3))
+    .attr("x1", 0)
+    .attr("y2", rangeY(-3))
+    .attr("x2", width)
+    .attr("stroke-width", 1)
+    .attr("opacity", 0.5)
+    .attr("stroke", "black");
+};
+
 export const populateXAxis = (svg, rangeX0) => {
   const sizes = [];
 

src/components/charts/BarChartComponent/index.js

@@ -5,7 +5,8 @@ import {
   getXAxisLabelsHeight,
   moveXAxis,
   populateXAxis,
-  populateYAxis
+  populateYAxis,
+  populateY0Axis
 } from "./axes";
 import { drawData } from "./data";
 import { getHorizontalDimensions, getVerticalDimensions } from "./dimensions";
@@ -41,6 +42,9 @@ class BarChartComponent extends Component {
       height
     );
     const rangeY = getYRange(vertical.height, data, fields);
+
+    populateY0Axis(this.svg, rangeY, horizontal.width, data, fields);
+
     populateYAxis(this.svg, rangeY);
 
     // adjust x axis

src/components/charts/BarChartComponent/svg.js

@@ -10,6 +10,8 @@ export const getSvg = className => {
 
   container.append("g").classed("x-axis", true);
 
+  container.append("g").classed("y0-axis", true);
+
   container.append("g").classed("y-axis", true);
 
   container.append("g").classed("datasets", true);