@nivo/axes - npm Package Compare versions

Comparing version 0.55.0 to 0.56.0

dist/nivo-axes.cjs.js

@@ -125,2 +125,36 @@ 'use strict';
 };
+var computeGridLines = function computeGridLines(_ref2) {
+  var width = _ref2.width,
+      height = _ref2.height,
+      scale = _ref2.scale,
+      axis = _ref2.axis,
+      _values = _ref2.values;
+  var lineValues = isArray(_values) ? _values : undefined;
+  var lineCount = isNumber(_values) ? _values : undefined;
+  var values = lineValues || getScaleTicks(scale, lineCount);
+  var position = scale.bandwidth ? centerScale(scale) : scale;
+  var lines;
+  if (axis === 'x') {
+    lines = values.map(function (v) {
+      return {
+        key: "".concat(v),
+        x1: position(v),
+        x2: position(v),
+        y1: 0,
+        y2: height
+      };
+    });
+  } else if (axis === 'y') {
+    lines = values.map(function (v) {
+      return {
+        key: "".concat(v),
+        x1: 0,
+        x2: width,
+        y1: position(v),
+        y2: position(v)
+      };
+    });
+  }
+  return lines;
+};
 
@@ -220,13 +254,4 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-function _typeof$1(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$1 = function _typeof(obj) { return typeof obj; }; } else { _typeof$1 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$1(obj); }
 function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$2(target, key, source[key]); }); } return target; }
-function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties$1(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-function _createClass$1(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$1(Constructor.prototype, protoProps); if (staticProps) _defineProperties$1(Constructor, staticProps); return Constructor; }
-function _possibleConstructorReturn$1(self, call) { if (call && (_typeof$1(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized$1(self); }
-function _assertThisInitialized$1(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _getPrototypeOf$1(o) { _getPrototypeOf$1 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf$1(o); }
-function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf$1(subClass, superClass); }
-function _setPrototypeOf$1(o, p) { _setPrototypeOf$1 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf$1(o, p); }
 function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -258,164 +283,151 @@ var willEnter = function willEnter() {
 };
-var Axis =
-function (_Component) {
-  _inherits$1(Axis, _Component);
-  function Axis() {
-    _classCallCheck$1(this, Axis);
-    return _possibleConstructorReturn$1(this, _getPrototypeOf$1(Axis).apply(this, arguments));
-  }
-  _createClass$1(Axis, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          axis = _this$props.axis,
-          scale = _this$props.scale,
-          x = _this$props.x,
-          y = _this$props.y,
-          length = _this$props.length,
-          ticksPosition = _this$props.ticksPosition,
-          tickValues = _this$props.tickValues,
-          tickSize = _this$props.tickSize,
-          tickPadding = _this$props.tickPadding,
-          tickRotation = _this$props.tickRotation,
-          format = _this$props.format,
-          renderTick = _this$props.renderTick,
-          legend = _this$props.legend,
-          legendPosition = _this$props.legendPosition,
-          legendOffset = _this$props.legendOffset,
-          theme = _this$props.theme,
-          animate = _this$props.animate,
-          motionStiffness = _this$props.motionStiffness,
-          motionDamping = _this$props.motionDamping,
-          onClick = _this$props.onClick;
-      var _computeCartesianTick = computeCartesianTicks({
-        axis: axis,
-        scale: scale,
-        ticksPosition: ticksPosition,
-        tickValues: tickValues,
-        tickSize: tickSize,
-        tickPadding: tickPadding,
-        tickRotation: tickRotation
-      }),
-          ticks = _computeCartesianTick.ticks,
-          textAlign = _computeCartesianTick.textAlign,
-          textBaseline = _computeCartesianTick.textBaseline;
-      var legendNode = null;
-      if (legend !== undefined) {
-        var legendX = 0;
-        var legendY = 0;
-        var legendRotation = 0;
-        var textAnchor;
-        if (axis === 'y') {
-          legendRotation = -90;
-          legendX = legendOffset;
-          if (legendPosition === 'start') {
-            textAnchor = 'start';
-            legendY = length;
-          } else if (legendPosition === 'middle') {
-            textAnchor = 'middle';
-            legendY = length / 2;
-          } else if (legendPosition === 'end') {
-            textAnchor = 'end';
-          }
-        } else {
-          legendY = legendOffset;
-          if (legendPosition === 'start') {
-            textAnchor = 'start';
-          } else if (legendPosition === 'middle') {
-            textAnchor = 'middle';
-            legendX = length / 2;
-          } else if (legendPosition === 'end') {
-            textAnchor = 'end';
-            legendX = length;
-          }
-        }
-        legendNode = React__default.createElement("text", {
-          transform: "translate(".concat(legendX, ", ").concat(legendY, ") rotate(").concat(legendRotation, ")"),
-          textAnchor: textAnchor,
-          style: _objectSpread$1({
-            alignmentBaseline: 'middle'
-          }, theme.axis.legend.text)
-        }, legend);
+var Axis = function Axis(_ref2) {
+  var axis = _ref2.axis,
+      scale = _ref2.scale,
+      x = _ref2.x,
+      y = _ref2.y,
+      length = _ref2.length,
+      ticksPosition = _ref2.ticksPosition,
+      tickValues = _ref2.tickValues,
+      tickSize = _ref2.tickSize,
+      tickPadding = _ref2.tickPadding,
+      tickRotation = _ref2.tickRotation,
+      format = _ref2.format,
+      renderTick = _ref2.renderTick,
+      legend = _ref2.legend,
+      legendPosition = _ref2.legendPosition,
+      legendOffset = _ref2.legendOffset,
+      theme = _ref2.theme,
+      animate = _ref2.animate,
+      motionStiffness = _ref2.motionStiffness,
+      motionDamping = _ref2.motionDamping,
+      onClick = _ref2.onClick;
+  var _computeCartesianTick = computeCartesianTicks({
+    axis: axis,
+    scale: scale,
+    ticksPosition: ticksPosition,
+    tickValues: tickValues,
+    tickSize: tickSize,
+    tickPadding: tickPadding,
+    tickRotation: tickRotation
+  }),
+      ticks = _computeCartesianTick.ticks,
+      textAlign = _computeCartesianTick.textAlign,
+      textBaseline = _computeCartesianTick.textBaseline;
+  var legendNode = null;
+  if (legend !== undefined) {
+    var legendX = 0;
+    var legendY = 0;
+    var legendRotation = 0;
+    var textAnchor;
+    if (axis === 'y') {
+      legendRotation = -90;
+      legendX = legendOffset;
+      if (legendPosition === 'start') {
+        textAnchor = 'start';
+        legendY = length;
+      } else if (legendPosition === 'middle') {
+        textAnchor = 'middle';
+        legendY = length / 2;
+      } else if (legendPosition === 'end') {
+        textAnchor = 'end';
       }
-      if (animate !== true) {
-        return React__default.createElement("g", {
-          transform: "translate(".concat(x, ",").concat(y, ")")
-        }, ticks.map(function (tick, tickIndex) {
-          return renderTick(_objectSpread$1({
-            tickIndex: tickIndex,
-            format: format,
-            rotate: tickRotation,
-            textBaseline: textBaseline,
-            textAnchor: textAlign,
-            theme: theme
-          }, tick, onClick ? {
-            onClick: onClick
-          } : {}));
-        }), React__default.createElement("line", {
-          style: theme.axis.domain.line,
-          x1: 0,
-          x2: axis === 'x' ? length : 0,
-          y1: 0,
-          y2: axis === 'x' ? 0 : length
-        }), legendNode);
+    } else {
+      legendY = legendOffset;
+      if (legendPosition === 'start') {
+        textAnchor = 'start';
+      } else if (legendPosition === 'middle') {
+        textAnchor = 'middle';
+        legendX = length / 2;
+      } else if (legendPosition === 'end') {
+        textAnchor = 'end';
+        legendX = length;
       }
-      var springConfig = {
-        stiffness: motionStiffness,
-        damping: motionDamping
-      };
-      return React__default.createElement(reactMotion.Motion, {
-        style: {
-          x: reactMotion.spring(x, springConfig),
-          y: reactMotion.spring(y, springConfig)
-        }
-      }, function (xy) {
-        return React__default.createElement("g", {
-          transform: "translate(".concat(xy.x, ",").concat(xy.y, ")")
-        }, React__default.createElement(reactMotion.TransitionMotion, {
-          willEnter: willEnter,
-          willLeave: willLeave(springConfig),
-          styles: ticks.map(function (tick) {
-            return {
-              key: "".concat(tick.key),
-              data: tick,
-              style: {
-                opacity: reactMotion.spring(1, springConfig),
-                x: reactMotion.spring(tick.x, springConfig),
-                y: reactMotion.spring(tick.y, springConfig),
-                rotate: reactMotion.spring(tickRotation, springConfig)
-              }
-            };
-          })
-        }, function (interpolatedStyles) {
-          return React__default.createElement(React.Fragment, null, interpolatedStyles.map(function (_ref2, tickIndex) {
-            var style = _ref2.style,
-                tick = _ref2.data;
-            return renderTick(_objectSpread$1({
-              tickIndex: tickIndex,
-              format: format,
-              textBaseline: textBaseline,
-              textAnchor: textAlign,
-              theme: theme
-            }, tick, style, onClick ? {
-              onClick: onClick
-            } : {}));
-          }));
-        }), React__default.createElement(reactMotion.Motion, {
+    }
+    legendNode = React__default.createElement("text", {
+      transform: "translate(".concat(legendX, ", ").concat(legendY, ") rotate(").concat(legendRotation, ")"),
+      textAnchor: textAnchor,
+      style: _objectSpread$1({
+        alignmentBaseline: 'middle'
+      }, theme.axis.legend.text)
+    }, legend);
+  }
+  if (animate !== true) {
+    return React__default.createElement("g", {
+      transform: "translate(".concat(x, ",").concat(y, ")")
+    }, ticks.map(function (tick, tickIndex) {
+      return renderTick(_objectSpread$1({
+        tickIndex: tickIndex,
+        format: format,
+        rotate: tickRotation,
+        textBaseline: textBaseline,
+        textAnchor: textAlign,
+        theme: theme
+      }, tick, onClick ? {
+        onClick: onClick
+      } : {}));
+    }), React__default.createElement("line", {
+      style: theme.axis.domain.line,
+      x1: 0,
+      x2: axis === 'x' ? length : 0,
+      y1: 0,
+      y2: axis === 'x' ? 0 : length
+    }), legendNode);
+  }
+  var springConfig = {
+    stiffness: motionStiffness,
+    damping: motionDamping
+  };
+  return React__default.createElement(reactMotion.Motion, {
+    style: {
+      x: reactMotion.spring(x, springConfig),
+      y: reactMotion.spring(y, springConfig)
+    }
+  }, function (xy) {
+    return React__default.createElement("g", {
+      transform: "translate(".concat(xy.x, ",").concat(xy.y, ")")
+    }, React__default.createElement(reactMotion.TransitionMotion, {
+      willEnter: willEnter,
+      willLeave: willLeave(springConfig),
+      styles: ticks.map(function (tick) {
+        return {
+          key: "".concat(tick.key),
+          data: tick,
           style: {
-            x2: reactMotion.spring(axis === 'x' ? length : 0, springConfig),
-            y2: reactMotion.spring(axis === 'x' ? 0 : length, springConfig)
+            opacity: reactMotion.spring(1, springConfig),
+            x: reactMotion.spring(tick.x, springConfig),
+            y: reactMotion.spring(tick.y, springConfig),
+            rotate: reactMotion.spring(tickRotation, springConfig)
           }
-        }, function (values) {
-          return React__default.createElement("line", _extends$1({
-            style: theme.axis.domain.line,
-            x1: 0,
-            y1: 0
-          }, values));
-        }), legendNode);
-      });
-    }
-  }]);
-  return Axis;
-}(React.Component);
-_defineProperty$2(Axis, "propTypes", _objectSpread$1({
+        };
+      })
+    }, function (interpolatedStyles) {
+      return React__default.createElement(React.Fragment, null, interpolatedStyles.map(function (_ref3, tickIndex) {
+        var style = _ref3.style,
+            tick = _ref3.data;
+        return renderTick(_objectSpread$1({
+          tickIndex: tickIndex,
+          format: format,
+          textBaseline: textBaseline,
+          textAnchor: textAlign,
+          theme: theme
+        }, tick, style, onClick ? {
+          onClick: onClick
+        } : {}));
+      }));
+    }), React__default.createElement(reactMotion.Motion, {
+      style: {
+        x2: reactMotion.spring(axis === 'x' ? length : 0, springConfig),
+        y2: reactMotion.spring(axis === 'x' ? 0 : length, springConfig)
+      }
+    }, function (values) {
+      return React__default.createElement("line", _extends$1({
+        style: theme.axis.domain.line,
+        x1: 0,
+        y1: 0
+      }, values));
+    }), legendNode);
+  });
+};
+Axis.propTypes = _objectSpread$1({
   axis: PropTypes.oneOf(['x', 'y']).isRequired,
@@ -439,4 +451,4 @@ scale: PropTypes.func.isRequired,
   }).isRequired
-}, core.motionPropTypes));
-_defineProperty$2(Axis, "defaultProps", {
+}, core.motionPropTypes);
+Axis.defaultProps = {
   x: 0,
@@ -450,6 +462,6 @@ y: 0,
   legendOffset: 0
-});
-var enhance = compose(core.withMotion(), withPropsOnChange(['format', 'scale'], function (_ref3) {
-  var format = _ref3.format,
-      scale = _ref3.scale;
+};
+var enhance = compose(core.withMotion(), withPropsOnChange(['format', 'scale'], function (_ref4) {
+  var format = _ref4.format,
+      scale = _ref4.scale;
   return {
@@ -476,12 +488,12 @@ format: getFormatter(format, scale)
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$3(target, key, source[key]); }); } return target; }
-function _typeof$2(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$2 = function _typeof(obj) { return typeof obj; }; } else { _typeof$2 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$2(obj); }
+function _typeof$1(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$1 = function _typeof(obj) { return typeof obj; }; } else { _typeof$1 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$1(obj); }
 function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties$2(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-function _createClass$2(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$2(Constructor.prototype, protoProps); if (staticProps) _defineProperties$2(Constructor, staticProps); return Constructor; }
-function _possibleConstructorReturn$2(self, call) { if (call && (_typeof$2(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized$2(self); }
-function _assertThisInitialized$2(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _getPrototypeOf$2(o) { _getPrototypeOf$2 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf$2(o); }
-function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf$2(subClass, superClass); }
-function _setPrototypeOf$2(o, p) { _setPrototypeOf$2 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf$2(o, p); }
+function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties$1(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _createClass$1(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$1(Constructor.prototype, protoProps); if (staticProps) _defineProperties$1(Constructor, staticProps); return Constructor; }
+function _possibleConstructorReturn$1(self, call) { if (call && (_typeof$1(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized$1(self); }
+function _assertThisInitialized$1(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _getPrototypeOf$1(o) { _getPrototypeOf$1 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf$1(o); }
+function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf$1(subClass, superClass); }
+function _setPrototypeOf$1(o, p) { _setPrototypeOf$1 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf$1(o, p); }
 function _defineProperty$3(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -491,8 +503,8 @@ var positions = ['top', 'right', 'bottom', 'left'];
 function (_PureComponent) {
-  _inherits$2(Axes, _PureComponent);
+  _inherits$1(Axes, _PureComponent);
   function Axes() {
-    _classCallCheck$2(this, Axes);
-    return _possibleConstructorReturn$2(this, _getPrototypeOf$2(Axes).apply(this, arguments));
+    _classCallCheck$1(this, Axes);
+    return _possibleConstructorReturn$1(this, _getPrototypeOf$1(Axes).apply(this, arguments));
   }
-  _createClass$2(Axes, [{
+  _createClass$1(Axes, [{
     key: "render",
@@ -557,2 +569,190 @@ value: function render() {
 
+var GridLine = function GridLine(props) {
+  return React__default.createElement("line", props);
+};
+GridLine.propTypes = {
+  x1: PropTypes.number.isRequired,
+  x2: PropTypes.number.isRequired,
+  y1: PropTypes.number.isRequired,
+  y2: PropTypes.number.isRequired
+};
+GridLine.defaultProps = {
+  x1: 0,
+  x2: 0,
+  y1: 0,
+  y2: 0
+};
+
+function _typeof$2(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$2 = function _typeof(obj) { return typeof obj; }; } else { _typeof$2 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$2(obj); }
+function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties$2(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _createClass$2(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$2(Constructor.prototype, protoProps); if (staticProps) _defineProperties$2(Constructor, staticProps); return Constructor; }
+function _possibleConstructorReturn$2(self, call) { if (call && (_typeof$2(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized$2(self); }
+function _getPrototypeOf$2(o) { _getPrototypeOf$2 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf$2(o); }
+function _assertThisInitialized$2(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf$2(subClass, superClass); }
+function _setPrototypeOf$2(o, p) { _setPrototypeOf$2 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf$2(o, p); }
+function _defineProperty$4(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var GridLines =
+function (_Component) {
+  _inherits$2(GridLines, _Component);
+  function GridLines(props) {
+    var _this;
+    _classCallCheck$2(this, GridLines);
+    _this = _possibleConstructorReturn$2(this, _getPrototypeOf$2(GridLines).call(this, props));
+    _this.willEnter = _this.willEnter.bind(_assertThisInitialized$2(_this));
+    _this.willLeave = _this.willLeave.bind(_assertThisInitialized$2(_this));
+    return _this;
+  }
+  _createClass$2(GridLines, [{
+    key: "willEnter",
+    value: function willEnter(_ref) {
+      var style = _ref.style;
+      var type = this.props.type;
+      return {
+        opacity: 0,
+        x1: type === 'x' ? 0 : style.x1.val,
+        x2: type === 'x' ? 0 : style.x2.val,
+        y1: type === 'y' ? 0 : style.y1.val,
+        y2: type === 'y' ? 0 : style.y2.val
+      };
+    }
+  }, {
+    key: "willLeave",
+    value: function willLeave(_ref2) {
+      var style = _ref2.style;
+      var _this$props = this.props,
+          motionStiffness = _this$props.motionStiffness,
+          motionDamping = _this$props.motionDamping;
+      var springConfig = {
+        stiffness: motionStiffness,
+        damping: motionDamping
+      };
+      return {
+        opacity: reactMotion.spring(0, springConfig),
+        x1: reactMotion.spring(style.x1.val, springConfig),
+        x2: reactMotion.spring(style.x2.val, springConfig),
+        y1: reactMotion.spring(style.y1.val, springConfig),
+        y2: reactMotion.spring(style.y2.val, springConfig)
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          lines = _this$props2.lines,
+          animate = _this$props2.animate,
+          motionStiffness = _this$props2.motionStiffness,
+          motionDamping = _this$props2.motionDamping,
+          theme = _this$props2.theme;
+      if (!animate) {
+        return React__default.createElement("g", null, lines.map(function (line) {
+          return React__default.createElement(GridLine, _extends$3({
+            key: line.key
+          }, line, theme.grid.line));
+        }));
+      }
+      var springConfig = {
+        stiffness: motionStiffness,
+        damping: motionDamping
+      };
+      return React__default.createElement(reactMotion.TransitionMotion, {
+        willEnter: this.willEnter,
+        willLeave: this.willLeave,
+        styles: lines.map(function (line) {
+          return {
+            key: line.key,
+            style: {
+              opacity: reactMotion.spring(1, springConfig),
+              x1: reactMotion.spring(line.x1 || 0, springConfig),
+              x2: reactMotion.spring(line.x2 || 0, springConfig),
+              y1: reactMotion.spring(line.y1 || 0, springConfig),
+              y2: reactMotion.spring(line.y2 || 0, springConfig)
+            }
+          };
+        })
+      }, function (interpolatedStyles) {
+        return React__default.createElement("g", null, interpolatedStyles.map(function (interpolatedStyle) {
+          var key = interpolatedStyle.key,
+              style = interpolatedStyle.style;
+          return React__default.createElement(GridLine, _extends$3({
+            key: key
+          }, theme.grid.line, style));
+        }));
+      });
+    }
+  }]);
+  return GridLines;
+}(React.Component);
+_defineProperty$4(GridLines, "propTypes", {
+  type: PropTypes.oneOf(['x', 'y']).isRequired,
+  lines: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string.isRequired,
+    x1: PropTypes.number,
+    x2: PropTypes.number,
+    y1: PropTypes.number,
+    y2: PropTypes.number
+  })).isRequired,
+  theme: PropTypes.object.isRequired,
+  animate: PropTypes.bool.isRequired,
+  motionStiffness: PropTypes.number.isRequired,
+  motionDamping: PropTypes.number.isRequired
+});
+
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$5(target, key, source[key]); }); } return target; }
+function _defineProperty$5(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var Grid = function Grid(_ref) {
+  var width = _ref.width,
+      height = _ref.height,
+      xScale = _ref.xScale,
+      yScale = _ref.yScale,
+      xValues = _ref.xValues,
+      yValues = _ref.yValues,
+      theme = _ref.theme,
+      animate = _ref.animate,
+      motionStiffness = _ref.motionStiffness,
+      motionDamping = _ref.motionDamping;
+  var xLines = xScale ? computeGridLines({
+    width: width,
+    height: height,
+    scale: xScale,
+    axis: 'x',
+    values: xValues
+  }) : false;
+  var yLines = yScale ? computeGridLines({
+    width: width,
+    height: height,
+    scale: yScale,
+    axis: 'y',
+    values: yValues
+  }) : false;
+  return React__default.createElement("g", null, xLines && React__default.createElement(GridLines, {
+    type: "x",
+    lines: xLines,
+    theme: theme,
+    animate: animate,
+    motionStiffness: motionStiffness,
+    motionDamping: motionDamping
+  }), yLines && React__default.createElement(GridLines, {
+    type: "y",
+    lines: yLines,
+    theme: theme,
+    animate: animate,
+    motionStiffness: motionStiffness,
+    motionDamping: motionDamping
+  }));
+};
+Grid.propTypes = _objectSpread$3({
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  xScale: PropTypes.func,
+  yScale: PropTypes.func,
+  xValues: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)]))]),
+  yValues: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)]))]),
+  theme: PropTypes.object.isRequired
+}, core.motionPropTypes);
+Grid.defaultProps = {};
+var Grid$1 = pure(Grid);
+
 var degreesToRadians = function degreesToRadians(degrees) {
@@ -562,4 +762,4 @@ return degrees * Math.PI / 180;
 
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$4(target, key, source[key]); }); } return target; }
-function _defineProperty$4(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$6(target, key, source[key]); }); } return target; }
+function _defineProperty$6(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 var renderAxisToCanvas = function renderAxisToCanvas(ctx, _ref) {
@@ -582,2 +782,7 @@ var axis = _ref.axis,
       format = _ref.format,
+      legend = _ref.legend,
+      _ref$legendPosition = _ref.legendPosition,
+      legendPosition = _ref$legendPosition === void 0 ? 'end' : _ref$legendPosition,
+      _ref$legendOffset = _ref.legendOffset,
+      legendOffset = _ref$legendOffset === void 0 ? 0 : _ref$legendOffset,
       theme = _ref.theme;
@@ -602,17 +807,21 @@ var _computeCartesianTick = computeCartesianTicks({
   ctx.font = "".concat(theme.axis.ticks.text.fontSize, "px ").concat(theme.axis.ticks.text.fontFamily);
-  ctx.lineWidth = theme.axis.domain.line.strokeWidth;
-  ctx.lineCap = 'square';
-  ctx.strokeStyle = theme.axis.domain.line.stroke;
-  ctx.beginPath();
-  ctx.moveTo(0, 0);
-  ctx.lineTo(axis === 'x' ? length : 0, axis === 'x' ? 0 : length);
-  ctx.stroke();
-  ticks.forEach(function (tick) {
-    ctx.lineWidth = theme.axis.ticks.line.strokeWidth;
+  if (theme.axis.domain.line.strokeWidth > 0) {
+    ctx.lineWidth = theme.axis.domain.line.strokeWidth;
     ctx.lineCap = 'square';
-    ctx.strokeStyle = theme.axis.ticks.line.stroke;
+    ctx.strokeStyle = theme.axis.domain.line.stroke;
     ctx.beginPath();
-    ctx.moveTo(tick.x, tick.y);
-    ctx.lineTo(tick.x + tick.lineX, tick.y + tick.lineY);
+    ctx.moveTo(0, 0);
+    ctx.lineTo(axis === 'x' ? length : 0, axis === 'x' ? 0 : length);
     ctx.stroke();
+  }
+  ticks.forEach(function (tick) {
+    if (theme.axis.ticks.line.strokeWidth > 0) {
+      ctx.lineWidth = theme.axis.ticks.line.strokeWidth;
+      ctx.lineCap = 'square';
+      ctx.strokeStyle = theme.axis.ticks.line.stroke;
+      ctx.beginPath();
+      ctx.moveTo(tick.x, tick.y);
+      ctx.lineTo(tick.x + tick.lineX, tick.y + tick.lineY);
+      ctx.stroke();
+    }
     var value = format !== undefined ? format(tick.value) : tick.value;
@@ -626,2 +835,39 @@ ctx.save();
   });
+  if (legend !== undefined) {
+    var legendX = 0;
+    var legendY = 0;
+    var legendRotation = 0;
+    var _textAlign;
+    if (axis === 'y') {
+      legendRotation = -90;
+      legendX = legendOffset;
+      if (legendPosition === 'start') {
+        _textAlign = 'start';
+        legendY = length;
+      } else if (legendPosition === 'middle') {
+        _textAlign = 'center';
+        legendY = length / 2;
+      } else if (legendPosition === 'end') {
+        _textAlign = 'end';
+      }
+    } else {
+      legendY = legendOffset;
+      if (legendPosition === 'start') {
+        _textAlign = 'start';
+      } else if (legendPosition === 'middle') {
+        _textAlign = 'center';
+        legendX = length / 2;
+      } else if (legendPosition === 'end') {
+        _textAlign = 'end';
+        legendX = length;
+      }
+    }
+    ctx.translate(legendX, legendY);
+    ctx.rotate(degreesToRadians(legendRotation));
+    ctx.font = "".concat(theme.axis.legend.text.fontWeight ? "".concat(theme.axis.legend.text.fontWeight, " ") : '').concat(theme.axis.legend.text.fontSize, "px ").concat(theme.axis.legend.text.fontFamily);
+    ctx.fillStyle = theme.axis.legend.text.fill;
+    ctx.textAlign = _textAlign;
+    ctx.textBaseline = 'middle';
+    ctx.fillText(legend, 0, 0);
+  }
   ctx.restore();
@@ -653,3 +899,3 @@ };
     var format = getFormatter(axis.format, scale);
-    renderAxisToCanvas(ctx, _objectSpread$3({}, axis, {
+    renderAxisToCanvas(ctx, _objectSpread$4({}, axis, {
       axis: isXAxis ? 'x' : 'y',
@@ -666,5 +912,26 @@ x: position === 'right' ? width : 0,
 };
+var renderGridLinesToCanvas = function renderGridLinesToCanvas(ctx, _ref3) {
+  var width = _ref3.width,
+      height = _ref3.height,
+      scale = _ref3.scale,
+      axis = _ref3.axis,
+      values = _ref3.values;
+  var lines = computeGridLines({
+    width: width,
+    height: height,
+    scale: scale,
+    axis: axis,
+    values: values
+  });
+  lines.forEach(function (line) {
+    ctx.beginPath();
+    ctx.moveTo(line.x1, line.y1);
+    ctx.lineTo(line.x2, line.y2);
+    ctx.stroke();
+  });
+};
 
 exports.Axes = Axes;
 exports.Axis = Axis$1;
+exports.Grid = Grid$1;
 exports.axisPropType = axisPropType;
@@ -674,1 +941,2 @@ exports.axisPropTypes = axisPropTypes;
 exports.renderAxisToCanvas = renderAxisToCanvas;
+exports.renderGridLinesToCanvas = renderGridLinesToCanvas;

dist/nivo-axes.esm.js

@@ -118,2 +118,36 @@ import React, { PureComponent, Fragment, Component } from 'react';
 };
+var computeGridLines = function computeGridLines(_ref2) {
+  var width = _ref2.width,
+      height = _ref2.height,
+      scale = _ref2.scale,
+      axis = _ref2.axis,
+      _values = _ref2.values;
+  var lineValues = isArray(_values) ? _values : undefined;
+  var lineCount = isNumber(_values) ? _values : undefined;
+  var values = lineValues || getScaleTicks(scale, lineCount);
+  var position = scale.bandwidth ? centerScale(scale) : scale;
+  var lines;
+  if (axis === 'x') {
+    lines = values.map(function (v) {
+      return {
+        key: "".concat(v),
+        x1: position(v),
+        x2: position(v),
+        y1: 0,
+        y2: height
+      };
+    });
+  } else if (axis === 'y') {
+    lines = values.map(function (v) {
+      return {
+        key: "".concat(v),
+        x1: 0,
+        x2: width,
+        y1: position(v),
+        y2: position(v)
+      };
+    });
+  }
+  return lines;
+};
 
@@ -213,13 +247,4 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-function _typeof$1(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$1 = function _typeof(obj) { return typeof obj; }; } else { _typeof$1 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$1(obj); }
 function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$2(target, key, source[key]); }); } return target; }
-function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties$1(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-function _createClass$1(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$1(Constructor.prototype, protoProps); if (staticProps) _defineProperties$1(Constructor, staticProps); return Constructor; }
-function _possibleConstructorReturn$1(self, call) { if (call && (_typeof$1(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized$1(self); }
-function _assertThisInitialized$1(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _getPrototypeOf$1(o) { _getPrototypeOf$1 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf$1(o); }
-function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf$1(subClass, superClass); }
-function _setPrototypeOf$1(o, p) { _setPrototypeOf$1 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf$1(o, p); }
 function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -251,164 +276,151 @@ var willEnter = function willEnter() {
 };
-var Axis =
-function (_Component) {
-  _inherits$1(Axis, _Component);
-  function Axis() {
-    _classCallCheck$1(this, Axis);
-    return _possibleConstructorReturn$1(this, _getPrototypeOf$1(Axis).apply(this, arguments));
-  }
-  _createClass$1(Axis, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          axis = _this$props.axis,
-          scale = _this$props.scale,
-          x = _this$props.x,
-          y = _this$props.y,
-          length = _this$props.length,
-          ticksPosition = _this$props.ticksPosition,
-          tickValues = _this$props.tickValues,
-          tickSize = _this$props.tickSize,
-          tickPadding = _this$props.tickPadding,
-          tickRotation = _this$props.tickRotation,
-          format = _this$props.format,
-          renderTick = _this$props.renderTick,
-          legend = _this$props.legend,
-          legendPosition = _this$props.legendPosition,
-          legendOffset = _this$props.legendOffset,
-          theme = _this$props.theme,
-          animate = _this$props.animate,
-          motionStiffness = _this$props.motionStiffness,
-          motionDamping = _this$props.motionDamping,
-          onClick = _this$props.onClick;
-      var _computeCartesianTick = computeCartesianTicks({
-        axis: axis,
-        scale: scale,
-        ticksPosition: ticksPosition,
-        tickValues: tickValues,
-        tickSize: tickSize,
-        tickPadding: tickPadding,
-        tickRotation: tickRotation
-      }),
-          ticks = _computeCartesianTick.ticks,
-          textAlign = _computeCartesianTick.textAlign,
-          textBaseline = _computeCartesianTick.textBaseline;
-      var legendNode = null;
-      if (legend !== undefined) {
-        var legendX = 0;
-        var legendY = 0;
-        var legendRotation = 0;
-        var textAnchor;
-        if (axis === 'y') {
-          legendRotation = -90;
-          legendX = legendOffset;
-          if (legendPosition === 'start') {
-            textAnchor = 'start';
-            legendY = length;
-          } else if (legendPosition === 'middle') {
-            textAnchor = 'middle';
-            legendY = length / 2;
-          } else if (legendPosition === 'end') {
-            textAnchor = 'end';
-          }
-        } else {
-          legendY = legendOffset;
-          if (legendPosition === 'start') {
-            textAnchor = 'start';
-          } else if (legendPosition === 'middle') {
-            textAnchor = 'middle';
-            legendX = length / 2;
-          } else if (legendPosition === 'end') {
-            textAnchor = 'end';
-            legendX = length;
-          }
-        }
-        legendNode = React.createElement("text", {
-          transform: "translate(".concat(legendX, ", ").concat(legendY, ") rotate(").concat(legendRotation, ")"),
-          textAnchor: textAnchor,
-          style: _objectSpread$1({
-            alignmentBaseline: 'middle'
-          }, theme.axis.legend.text)
-        }, legend);
+var Axis = function Axis(_ref2) {
+  var axis = _ref2.axis,
+      scale = _ref2.scale,
+      x = _ref2.x,
+      y = _ref2.y,
+      length = _ref2.length,
+      ticksPosition = _ref2.ticksPosition,
+      tickValues = _ref2.tickValues,
+      tickSize = _ref2.tickSize,
+      tickPadding = _ref2.tickPadding,
+      tickRotation = _ref2.tickRotation,
+      format = _ref2.format,
+      renderTick = _ref2.renderTick,
+      legend = _ref2.legend,
+      legendPosition = _ref2.legendPosition,
+      legendOffset = _ref2.legendOffset,
+      theme = _ref2.theme,
+      animate = _ref2.animate,
+      motionStiffness = _ref2.motionStiffness,
+      motionDamping = _ref2.motionDamping,
+      onClick = _ref2.onClick;
+  var _computeCartesianTick = computeCartesianTicks({
+    axis: axis,
+    scale: scale,
+    ticksPosition: ticksPosition,
+    tickValues: tickValues,
+    tickSize: tickSize,
+    tickPadding: tickPadding,
+    tickRotation: tickRotation
+  }),
+      ticks = _computeCartesianTick.ticks,
+      textAlign = _computeCartesianTick.textAlign,
+      textBaseline = _computeCartesianTick.textBaseline;
+  var legendNode = null;
+  if (legend !== undefined) {
+    var legendX = 0;
+    var legendY = 0;
+    var legendRotation = 0;
+    var textAnchor;
+    if (axis === 'y') {
+      legendRotation = -90;
+      legendX = legendOffset;
+      if (legendPosition === 'start') {
+        textAnchor = 'start';
+        legendY = length;
+      } else if (legendPosition === 'middle') {
+        textAnchor = 'middle';
+        legendY = length / 2;
+      } else if (legendPosition === 'end') {
+        textAnchor = 'end';
       }
-      if (animate !== true) {
-        return React.createElement("g", {
-          transform: "translate(".concat(x, ",").concat(y, ")")
-        }, ticks.map(function (tick, tickIndex) {
-          return renderTick(_objectSpread$1({
-            tickIndex: tickIndex,
-            format: format,
-            rotate: tickRotation,
-            textBaseline: textBaseline,
-            textAnchor: textAlign,
-            theme: theme
-          }, tick, onClick ? {
-            onClick: onClick
-          } : {}));
-        }), React.createElement("line", {
-          style: theme.axis.domain.line,
-          x1: 0,
-          x2: axis === 'x' ? length : 0,
-          y1: 0,
-          y2: axis === 'x' ? 0 : length
-        }), legendNode);
+    } else {
+      legendY = legendOffset;
+      if (legendPosition === 'start') {
+        textAnchor = 'start';
+      } else if (legendPosition === 'middle') {
+        textAnchor = 'middle';
+        legendX = length / 2;
+      } else if (legendPosition === 'end') {
+        textAnchor = 'end';
+        legendX = length;
       }
-      var springConfig = {
-        stiffness: motionStiffness,
-        damping: motionDamping
-      };
-      return React.createElement(Motion, {
-        style: {
-          x: spring(x, springConfig),
-          y: spring(y, springConfig)
-        }
-      }, function (xy) {
-        return React.createElement("g", {
-          transform: "translate(".concat(xy.x, ",").concat(xy.y, ")")
-        }, React.createElement(TransitionMotion, {
-          willEnter: willEnter,
-          willLeave: willLeave(springConfig),
-          styles: ticks.map(function (tick) {
-            return {
-              key: "".concat(tick.key),
-              data: tick,
-              style: {
-                opacity: spring(1, springConfig),
-                x: spring(tick.x, springConfig),
-                y: spring(tick.y, springConfig),
-                rotate: spring(tickRotation, springConfig)
-              }
-            };
-          })
-        }, function (interpolatedStyles) {
-          return React.createElement(Fragment, null, interpolatedStyles.map(function (_ref2, tickIndex) {
-            var style = _ref2.style,
-                tick = _ref2.data;
-            return renderTick(_objectSpread$1({
-              tickIndex: tickIndex,
-              format: format,
-              textBaseline: textBaseline,
-              textAnchor: textAlign,
-              theme: theme
-            }, tick, style, onClick ? {
-              onClick: onClick
-            } : {}));
-          }));
-        }), React.createElement(Motion, {
+    }
+    legendNode = React.createElement("text", {
+      transform: "translate(".concat(legendX, ", ").concat(legendY, ") rotate(").concat(legendRotation, ")"),
+      textAnchor: textAnchor,
+      style: _objectSpread$1({
+        alignmentBaseline: 'middle'
+      }, theme.axis.legend.text)
+    }, legend);
+  }
+  if (animate !== true) {
+    return React.createElement("g", {
+      transform: "translate(".concat(x, ",").concat(y, ")")
+    }, ticks.map(function (tick, tickIndex) {
+      return renderTick(_objectSpread$1({
+        tickIndex: tickIndex,
+        format: format,
+        rotate: tickRotation,
+        textBaseline: textBaseline,
+        textAnchor: textAlign,
+        theme: theme
+      }, tick, onClick ? {
+        onClick: onClick
+      } : {}));
+    }), React.createElement("line", {
+      style: theme.axis.domain.line,
+      x1: 0,
+      x2: axis === 'x' ? length : 0,
+      y1: 0,
+      y2: axis === 'x' ? 0 : length
+    }), legendNode);
+  }
+  var springConfig = {
+    stiffness: motionStiffness,
+    damping: motionDamping
+  };
+  return React.createElement(Motion, {
+    style: {
+      x: spring(x, springConfig),
+      y: spring(y, springConfig)
+    }
+  }, function (xy) {
+    return React.createElement("g", {
+      transform: "translate(".concat(xy.x, ",").concat(xy.y, ")")
+    }, React.createElement(TransitionMotion, {
+      willEnter: willEnter,
+      willLeave: willLeave(springConfig),
+      styles: ticks.map(function (tick) {
+        return {
+          key: "".concat(tick.key),
+          data: tick,
           style: {
-            x2: spring(axis === 'x' ? length : 0, springConfig),
-            y2: spring(axis === 'x' ? 0 : length, springConfig)
+            opacity: spring(1, springConfig),
+            x: spring(tick.x, springConfig),
+            y: spring(tick.y, springConfig),
+            rotate: spring(tickRotation, springConfig)
           }
-        }, function (values) {
-          return React.createElement("line", _extends$1({
-            style: theme.axis.domain.line,
-            x1: 0,
-            y1: 0
-          }, values));
-        }), legendNode);
-      });
-    }
-  }]);
-  return Axis;
-}(Component);
-_defineProperty$2(Axis, "propTypes", _objectSpread$1({
+        };
+      })
+    }, function (interpolatedStyles) {
+      return React.createElement(Fragment, null, interpolatedStyles.map(function (_ref3, tickIndex) {
+        var style = _ref3.style,
+            tick = _ref3.data;
+        return renderTick(_objectSpread$1({
+          tickIndex: tickIndex,
+          format: format,
+          textBaseline: textBaseline,
+          textAnchor: textAlign,
+          theme: theme
+        }, tick, style, onClick ? {
+          onClick: onClick
+        } : {}));
+      }));
+    }), React.createElement(Motion, {
+      style: {
+        x2: spring(axis === 'x' ? length : 0, springConfig),
+        y2: spring(axis === 'x' ? 0 : length, springConfig)
+      }
+    }, function (values) {
+      return React.createElement("line", _extends$1({
+        style: theme.axis.domain.line,
+        x1: 0,
+        y1: 0
+      }, values));
+    }), legendNode);
+  });
+};
+Axis.propTypes = _objectSpread$1({
   axis: PropTypes.oneOf(['x', 'y']).isRequired,
@@ -432,4 +444,4 @@ scale: PropTypes.func.isRequired,
   }).isRequired
-}, motionPropTypes));
-_defineProperty$2(Axis, "defaultProps", {
+}, motionPropTypes);
+Axis.defaultProps = {
   x: 0,
@@ -443,6 +455,6 @@ y: 0,
   legendOffset: 0
-});
-var enhance = compose(withMotion(), withPropsOnChange(['format', 'scale'], function (_ref3) {
-  var format = _ref3.format,
-      scale = _ref3.scale;
+};
+var enhance = compose(withMotion(), withPropsOnChange(['format', 'scale'], function (_ref4) {
+  var format = _ref4.format,
+      scale = _ref4.scale;
   return {
@@ -469,12 +481,12 @@ format: getFormatter(format, scale)
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$3(target, key, source[key]); }); } return target; }
-function _typeof$2(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$2 = function _typeof(obj) { return typeof obj; }; } else { _typeof$2 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$2(obj); }
+function _typeof$1(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$1 = function _typeof(obj) { return typeof obj; }; } else { _typeof$1 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$1(obj); }
 function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties$2(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-function _createClass$2(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$2(Constructor.prototype, protoProps); if (staticProps) _defineProperties$2(Constructor, staticProps); return Constructor; }
-function _possibleConstructorReturn$2(self, call) { if (call && (_typeof$2(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized$2(self); }
-function _assertThisInitialized$2(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _getPrototypeOf$2(o) { _getPrototypeOf$2 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf$2(o); }
-function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf$2(subClass, superClass); }
-function _setPrototypeOf$2(o, p) { _setPrototypeOf$2 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf$2(o, p); }
+function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties$1(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _createClass$1(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$1(Constructor.prototype, protoProps); if (staticProps) _defineProperties$1(Constructor, staticProps); return Constructor; }
+function _possibleConstructorReturn$1(self, call) { if (call && (_typeof$1(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized$1(self); }
+function _assertThisInitialized$1(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _getPrototypeOf$1(o) { _getPrototypeOf$1 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf$1(o); }
+function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf$1(subClass, superClass); }
+function _setPrototypeOf$1(o, p) { _setPrototypeOf$1 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf$1(o, p); }
 function _defineProperty$3(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -484,8 +496,8 @@ var positions = ['top', 'right', 'bottom', 'left'];
 function (_PureComponent) {
-  _inherits$2(Axes, _PureComponent);
+  _inherits$1(Axes, _PureComponent);
   function Axes() {
-    _classCallCheck$2(this, Axes);
-    return _possibleConstructorReturn$2(this, _getPrototypeOf$2(Axes).apply(this, arguments));
+    _classCallCheck$1(this, Axes);
+    return _possibleConstructorReturn$1(this, _getPrototypeOf$1(Axes).apply(this, arguments));
   }
-  _createClass$2(Axes, [{
+  _createClass$1(Axes, [{
     key: "render",
@@ -550,2 +562,190 @@ value: function render() {
 
+var GridLine = function GridLine(props) {
+  return React.createElement("line", props);
+};
+GridLine.propTypes = {
+  x1: PropTypes.number.isRequired,
+  x2: PropTypes.number.isRequired,
+  y1: PropTypes.number.isRequired,
+  y2: PropTypes.number.isRequired
+};
+GridLine.defaultProps = {
+  x1: 0,
+  x2: 0,
+  y1: 0,
+  y2: 0
+};
+
+function _typeof$2(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$2 = function _typeof(obj) { return typeof obj; }; } else { _typeof$2 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$2(obj); }
+function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties$2(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _createClass$2(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$2(Constructor.prototype, protoProps); if (staticProps) _defineProperties$2(Constructor, staticProps); return Constructor; }
+function _possibleConstructorReturn$2(self, call) { if (call && (_typeof$2(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized$2(self); }
+function _getPrototypeOf$2(o) { _getPrototypeOf$2 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf$2(o); }
+function _assertThisInitialized$2(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf$2(subClass, superClass); }
+function _setPrototypeOf$2(o, p) { _setPrototypeOf$2 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf$2(o, p); }
+function _defineProperty$4(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var GridLines =
+function (_Component) {
+  _inherits$2(GridLines, _Component);
+  function GridLines(props) {
+    var _this;
+    _classCallCheck$2(this, GridLines);
+    _this = _possibleConstructorReturn$2(this, _getPrototypeOf$2(GridLines).call(this, props));
+    _this.willEnter = _this.willEnter.bind(_assertThisInitialized$2(_this));
+    _this.willLeave = _this.willLeave.bind(_assertThisInitialized$2(_this));
+    return _this;
+  }
+  _createClass$2(GridLines, [{
+    key: "willEnter",
+    value: function willEnter(_ref) {
+      var style = _ref.style;
+      var type = this.props.type;
+      return {
+        opacity: 0,
+        x1: type === 'x' ? 0 : style.x1.val,
+        x2: type === 'x' ? 0 : style.x2.val,
+        y1: type === 'y' ? 0 : style.y1.val,
+        y2: type === 'y' ? 0 : style.y2.val
+      };
+    }
+  }, {
+    key: "willLeave",
+    value: function willLeave(_ref2) {
+      var style = _ref2.style;
+      var _this$props = this.props,
+          motionStiffness = _this$props.motionStiffness,
+          motionDamping = _this$props.motionDamping;
+      var springConfig = {
+        stiffness: motionStiffness,
+        damping: motionDamping
+      };
+      return {
+        opacity: spring(0, springConfig),
+        x1: spring(style.x1.val, springConfig),
+        x2: spring(style.x2.val, springConfig),
+        y1: spring(style.y1.val, springConfig),
+        y2: spring(style.y2.val, springConfig)
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          lines = _this$props2.lines,
+          animate = _this$props2.animate,
+          motionStiffness = _this$props2.motionStiffness,
+          motionDamping = _this$props2.motionDamping,
+          theme = _this$props2.theme;
+      if (!animate) {
+        return React.createElement("g", null, lines.map(function (line) {
+          return React.createElement(GridLine, _extends$3({
+            key: line.key
+          }, line, theme.grid.line));
+        }));
+      }
+      var springConfig = {
+        stiffness: motionStiffness,
+        damping: motionDamping
+      };
+      return React.createElement(TransitionMotion, {
+        willEnter: this.willEnter,
+        willLeave: this.willLeave,
+        styles: lines.map(function (line) {
+          return {
+            key: line.key,
+            style: {
+              opacity: spring(1, springConfig),
+              x1: spring(line.x1 || 0, springConfig),
+              x2: spring(line.x2 || 0, springConfig),
+              y1: spring(line.y1 || 0, springConfig),
+              y2: spring(line.y2 || 0, springConfig)
+            }
+          };
+        })
+      }, function (interpolatedStyles) {
+        return React.createElement("g", null, interpolatedStyles.map(function (interpolatedStyle) {
+          var key = interpolatedStyle.key,
+              style = interpolatedStyle.style;
+          return React.createElement(GridLine, _extends$3({
+            key: key
+          }, theme.grid.line, style));
+        }));
+      });
+    }
+  }]);
+  return GridLines;
+}(Component);
+_defineProperty$4(GridLines, "propTypes", {
+  type: PropTypes.oneOf(['x', 'y']).isRequired,
+  lines: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string.isRequired,
+    x1: PropTypes.number,
+    x2: PropTypes.number,
+    y1: PropTypes.number,
+    y2: PropTypes.number
+  })).isRequired,
+  theme: PropTypes.object.isRequired,
+  animate: PropTypes.bool.isRequired,
+  motionStiffness: PropTypes.number.isRequired,
+  motionDamping: PropTypes.number.isRequired
+});
+
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$5(target, key, source[key]); }); } return target; }
+function _defineProperty$5(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var Grid = function Grid(_ref) {
+  var width = _ref.width,
+      height = _ref.height,
+      xScale = _ref.xScale,
+      yScale = _ref.yScale,
+      xValues = _ref.xValues,
+      yValues = _ref.yValues,
+      theme = _ref.theme,
+      animate = _ref.animate,
+      motionStiffness = _ref.motionStiffness,
+      motionDamping = _ref.motionDamping;
+  var xLines = xScale ? computeGridLines({
+    width: width,
+    height: height,
+    scale: xScale,
+    axis: 'x',
+    values: xValues
+  }) : false;
+  var yLines = yScale ? computeGridLines({
+    width: width,
+    height: height,
+    scale: yScale,
+    axis: 'y',
+    values: yValues
+  }) : false;
+  return React.createElement("g", null, xLines && React.createElement(GridLines, {
+    type: "x",
+    lines: xLines,
+    theme: theme,
+    animate: animate,
+    motionStiffness: motionStiffness,
+    motionDamping: motionDamping
+  }), yLines && React.createElement(GridLines, {
+    type: "y",
+    lines: yLines,
+    theme: theme,
+    animate: animate,
+    motionStiffness: motionStiffness,
+    motionDamping: motionDamping
+  }));
+};
+Grid.propTypes = _objectSpread$3({
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  xScale: PropTypes.func,
+  yScale: PropTypes.func,
+  xValues: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)]))]),
+  yValues: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)]))]),
+  theme: PropTypes.object.isRequired
+}, motionPropTypes);
+Grid.defaultProps = {};
+var Grid$1 = pure(Grid);
+
 var degreesToRadians = function degreesToRadians(degrees) {
@@ -555,4 +755,4 @@ return degrees * Math.PI / 180;
 
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$4(target, key, source[key]); }); } return target; }
-function _defineProperty$4(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$6(target, key, source[key]); }); } return target; }
+function _defineProperty$6(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 var renderAxisToCanvas = function renderAxisToCanvas(ctx, _ref) {
@@ -575,2 +775,7 @@ var axis = _ref.axis,
       format = _ref.format,
+      legend = _ref.legend,
+      _ref$legendPosition = _ref.legendPosition,
+      legendPosition = _ref$legendPosition === void 0 ? 'end' : _ref$legendPosition,
+      _ref$legendOffset = _ref.legendOffset,
+      legendOffset = _ref$legendOffset === void 0 ? 0 : _ref$legendOffset,
       theme = _ref.theme;
@@ -595,17 +800,21 @@ var _computeCartesianTick = computeCartesianTicks({
   ctx.font = "".concat(theme.axis.ticks.text.fontSize, "px ").concat(theme.axis.ticks.text.fontFamily);
-  ctx.lineWidth = theme.axis.domain.line.strokeWidth;
-  ctx.lineCap = 'square';
-  ctx.strokeStyle = theme.axis.domain.line.stroke;
-  ctx.beginPath();
-  ctx.moveTo(0, 0);
-  ctx.lineTo(axis === 'x' ? length : 0, axis === 'x' ? 0 : length);
-  ctx.stroke();
-  ticks.forEach(function (tick) {
-    ctx.lineWidth = theme.axis.ticks.line.strokeWidth;
+  if (theme.axis.domain.line.strokeWidth > 0) {
+    ctx.lineWidth = theme.axis.domain.line.strokeWidth;
     ctx.lineCap = 'square';
-    ctx.strokeStyle = theme.axis.ticks.line.stroke;
+    ctx.strokeStyle = theme.axis.domain.line.stroke;
     ctx.beginPath();
-    ctx.moveTo(tick.x, tick.y);
-    ctx.lineTo(tick.x + tick.lineX, tick.y + tick.lineY);
+    ctx.moveTo(0, 0);
+    ctx.lineTo(axis === 'x' ? length : 0, axis === 'x' ? 0 : length);
     ctx.stroke();
+  }
+  ticks.forEach(function (tick) {
+    if (theme.axis.ticks.line.strokeWidth > 0) {
+      ctx.lineWidth = theme.axis.ticks.line.strokeWidth;
+      ctx.lineCap = 'square';
+      ctx.strokeStyle = theme.axis.ticks.line.stroke;
+      ctx.beginPath();
+      ctx.moveTo(tick.x, tick.y);
+      ctx.lineTo(tick.x + tick.lineX, tick.y + tick.lineY);
+      ctx.stroke();
+    }
     var value = format !== undefined ? format(tick.value) : tick.value;
@@ -619,2 +828,39 @@ ctx.save();
   });
+  if (legend !== undefined) {
+    var legendX = 0;
+    var legendY = 0;
+    var legendRotation = 0;
+    var _textAlign;
+    if (axis === 'y') {
+      legendRotation = -90;
+      legendX = legendOffset;
+      if (legendPosition === 'start') {
+        _textAlign = 'start';
+        legendY = length;
+      } else if (legendPosition === 'middle') {
+        _textAlign = 'center';
+        legendY = length / 2;
+      } else if (legendPosition === 'end') {
+        _textAlign = 'end';
+      }
+    } else {
+      legendY = legendOffset;
+      if (legendPosition === 'start') {
+        _textAlign = 'start';
+      } else if (legendPosition === 'middle') {
+        _textAlign = 'center';
+        legendX = length / 2;
+      } else if (legendPosition === 'end') {
+        _textAlign = 'end';
+        legendX = length;
+      }
+    }
+    ctx.translate(legendX, legendY);
+    ctx.rotate(degreesToRadians(legendRotation));
+    ctx.font = "".concat(theme.axis.legend.text.fontWeight ? "".concat(theme.axis.legend.text.fontWeight, " ") : '').concat(theme.axis.legend.text.fontSize, "px ").concat(theme.axis.legend.text.fontFamily);
+    ctx.fillStyle = theme.axis.legend.text.fill;
+    ctx.textAlign = _textAlign;
+    ctx.textBaseline = 'middle';
+    ctx.fillText(legend, 0, 0);
+  }
   ctx.restore();
@@ -646,3 +892,3 @@ };
     var format = getFormatter(axis.format, scale);
-    renderAxisToCanvas(ctx, _objectSpread$3({}, axis, {
+    renderAxisToCanvas(ctx, _objectSpread$4({}, axis, {
       axis: isXAxis ? 'x' : 'y',
@@ -659,3 +905,23 @@ x: position === 'right' ? width : 0,
 };
+var renderGridLinesToCanvas = function renderGridLinesToCanvas(ctx, _ref3) {
+  var width = _ref3.width,
+      height = _ref3.height,
+      scale = _ref3.scale,
+      axis = _ref3.axis,
+      values = _ref3.values;
+  var lines = computeGridLines({
+    width: width,
+    height: height,
+    scale: scale,
+    axis: axis,
+    values: values
+  });
+  lines.forEach(function (line) {
+    ctx.beginPath();
+    ctx.moveTo(line.x1, line.y1);
+    ctx.lineTo(line.x2, line.y2);
+    ctx.stroke();
+  });
+};
 
-export { Axes, Axis$1 as Axis, axisPropType, axisPropTypes, renderAxesToCanvas, renderAxisToCanvas };
+export { Axes, Axis$1 as Axis, Grid$1 as Grid, axisPropType, axisPropTypes, renderAxesToCanvas, renderAxisToCanvas, renderGridLinesToCanvas };

dist/nivo-axes.umd.js

@@ -120,2 +120,36 @@ (function (global, factory) {
     };
+    var computeGridLines = function computeGridLines(_ref2) {
+      var width = _ref2.width,
+          height = _ref2.height,
+          scale = _ref2.scale,
+          axis = _ref2.axis,
+          _values = _ref2.values;
+      var lineValues = isArray(_values) ? _values : undefined;
+      var lineCount = isNumber(_values) ? _values : undefined;
+      var values = lineValues || getScaleTicks(scale, lineCount);
+      var position = scale.bandwidth ? centerScale(scale) : scale;
+      var lines;
+      if (axis === 'x') {
+        lines = values.map(function (v) {
+          return {
+            key: "".concat(v),
+            x1: position(v),
+            x2: position(v),
+            y1: 0,
+            y2: height
+          };
+        });
+      } else if (axis === 'y') {
+        lines = values.map(function (v) {
+          return {
+            key: "".concat(v),
+            x1: 0,
+            x2: width,
+            y1: position(v),
+            y2: position(v)
+          };
+        });
+      }
+      return lines;
+    };
 
@@ -215,13 +249,4 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-    function _typeof$1(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$1 = function _typeof(obj) { return typeof obj; }; } else { _typeof$1 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$1(obj); }
     function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
     function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$2(target, key, source[key]); }); } return target; }
-    function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-    function _defineProperties$1(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-    function _createClass$1(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$1(Constructor.prototype, protoProps); if (staticProps) _defineProperties$1(Constructor, staticProps); return Constructor; }
-    function _possibleConstructorReturn$1(self, call) { if (call && (_typeof$1(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized$1(self); }
-    function _assertThisInitialized$1(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-    function _getPrototypeOf$1(o) { _getPrototypeOf$1 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf$1(o); }
-    function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf$1(subClass, superClass); }
-    function _setPrototypeOf$1(o, p) { _setPrototypeOf$1 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf$1(o, p); }
     function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -253,164 +278,151 @@ var willEnter = function willEnter() {
     };
-    var Axis =
-    function (_Component) {
-      _inherits$1(Axis, _Component);
-      function Axis() {
-        _classCallCheck$1(this, Axis);
-        return _possibleConstructorReturn$1(this, _getPrototypeOf$1(Axis).apply(this, arguments));
-      }
-      _createClass$1(Axis, [{
-        key: "render",
-        value: function render() {
-          var _this$props = this.props,
-              axis = _this$props.axis,
-              scale = _this$props.scale,
-              x = _this$props.x,
-              y = _this$props.y,
-              length = _this$props.length,
-              ticksPosition = _this$props.ticksPosition,
-              tickValues = _this$props.tickValues,
-              tickSize = _this$props.tickSize,
-              tickPadding = _this$props.tickPadding,
-              tickRotation = _this$props.tickRotation,
-              format = _this$props.format,
-              renderTick = _this$props.renderTick,
-              legend = _this$props.legend,
-              legendPosition = _this$props.legendPosition,
-              legendOffset = _this$props.legendOffset,
-              theme = _this$props.theme,
-              animate = _this$props.animate,
-              motionStiffness = _this$props.motionStiffness,
-              motionDamping = _this$props.motionDamping,
-              onClick = _this$props.onClick;
-          var _computeCartesianTick = computeCartesianTicks({
-            axis: axis,
-            scale: scale,
-            ticksPosition: ticksPosition,
-            tickValues: tickValues,
-            tickSize: tickSize,
-            tickPadding: tickPadding,
-            tickRotation: tickRotation
-          }),
-              ticks = _computeCartesianTick.ticks,
-              textAlign = _computeCartesianTick.textAlign,
-              textBaseline = _computeCartesianTick.textBaseline;
-          var legendNode = null;
-          if (legend !== undefined) {
-            var legendX = 0;
-            var legendY = 0;
-            var legendRotation = 0;
-            var textAnchor;
-            if (axis === 'y') {
-              legendRotation = -90;
-              legendX = legendOffset;
-              if (legendPosition === 'start') {
-                textAnchor = 'start';
-                legendY = length;
-              } else if (legendPosition === 'middle') {
-                textAnchor = 'middle';
-                legendY = length / 2;
-              } else if (legendPosition === 'end') {
-                textAnchor = 'end';
-              }
-            } else {
-              legendY = legendOffset;
-              if (legendPosition === 'start') {
-                textAnchor = 'start';
-              } else if (legendPosition === 'middle') {
-                textAnchor = 'middle';
-                legendX = length / 2;
-              } else if (legendPosition === 'end') {
-                textAnchor = 'end';
-                legendX = length;
-              }
-            }
-            legendNode = React__default.createElement("text", {
-              transform: "translate(".concat(legendX, ", ").concat(legendY, ") rotate(").concat(legendRotation, ")"),
-              textAnchor: textAnchor,
-              style: _objectSpread$1({
-                alignmentBaseline: 'middle'
-              }, theme.axis.legend.text)
-            }, legend);
+    var Axis = function Axis(_ref2) {
+      var axis = _ref2.axis,
+          scale = _ref2.scale,
+          x = _ref2.x,
+          y = _ref2.y,
+          length = _ref2.length,
+          ticksPosition = _ref2.ticksPosition,
+          tickValues = _ref2.tickValues,
+          tickSize = _ref2.tickSize,
+          tickPadding = _ref2.tickPadding,
+          tickRotation = _ref2.tickRotation,
+          format = _ref2.format,
+          renderTick = _ref2.renderTick,
+          legend = _ref2.legend,
+          legendPosition = _ref2.legendPosition,
+          legendOffset = _ref2.legendOffset,
+          theme = _ref2.theme,
+          animate = _ref2.animate,
+          motionStiffness = _ref2.motionStiffness,
+          motionDamping = _ref2.motionDamping,
+          onClick = _ref2.onClick;
+      var _computeCartesianTick = computeCartesianTicks({
+        axis: axis,
+        scale: scale,
+        ticksPosition: ticksPosition,
+        tickValues: tickValues,
+        tickSize: tickSize,
+        tickPadding: tickPadding,
+        tickRotation: tickRotation
+      }),
+          ticks = _computeCartesianTick.ticks,
+          textAlign = _computeCartesianTick.textAlign,
+          textBaseline = _computeCartesianTick.textBaseline;
+      var legendNode = null;
+      if (legend !== undefined) {
+        var legendX = 0;
+        var legendY = 0;
+        var legendRotation = 0;
+        var textAnchor;
+        if (axis === 'y') {
+          legendRotation = -90;
+          legendX = legendOffset;
+          if (legendPosition === 'start') {
+            textAnchor = 'start';
+            legendY = length;
+          } else if (legendPosition === 'middle') {
+            textAnchor = 'middle';
+            legendY = length / 2;
+          } else if (legendPosition === 'end') {
+            textAnchor = 'end';
           }
-          if (animate !== true) {
-            return React__default.createElement("g", {
-              transform: "translate(".concat(x, ",").concat(y, ")")
-            }, ticks.map(function (tick, tickIndex) {
-              return renderTick(_objectSpread$1({
-                tickIndex: tickIndex,
-                format: format,
-                rotate: tickRotation,
-                textBaseline: textBaseline,
-                textAnchor: textAlign,
-                theme: theme
-              }, tick, onClick ? {
-                onClick: onClick
-              } : {}));
-            }), React__default.createElement("line", {
-              style: theme.axis.domain.line,
-              x1: 0,
-              x2: axis === 'x' ? length : 0,
-              y1: 0,
-              y2: axis === 'x' ? 0 : length
-            }), legendNode);
+        } else {
+          legendY = legendOffset;
+          if (legendPosition === 'start') {
+            textAnchor = 'start';
+          } else if (legendPosition === 'middle') {
+            textAnchor = 'middle';
+            legendX = length / 2;
+          } else if (legendPosition === 'end') {
+            textAnchor = 'end';
+            legendX = length;
           }
-          var springConfig = {
-            stiffness: motionStiffness,
-            damping: motionDamping
-          };
-          return React__default.createElement(reactMotion.Motion, {
-            style: {
-              x: reactMotion.spring(x, springConfig),
-              y: reactMotion.spring(y, springConfig)
-            }
-          }, function (xy) {
-            return React__default.createElement("g", {
-              transform: "translate(".concat(xy.x, ",").concat(xy.y, ")")
-            }, React__default.createElement(reactMotion.TransitionMotion, {
-              willEnter: willEnter,
-              willLeave: willLeave(springConfig),
-              styles: ticks.map(function (tick) {
-                return {
-                  key: "".concat(tick.key),
-                  data: tick,
-                  style: {
-                    opacity: reactMotion.spring(1, springConfig),
-                    x: reactMotion.spring(tick.x, springConfig),
-                    y: reactMotion.spring(tick.y, springConfig),
-                    rotate: reactMotion.spring(tickRotation, springConfig)
-                  }
-                };
-              })
-            }, function (interpolatedStyles) {
-              return React__default.createElement(React.Fragment, null, interpolatedStyles.map(function (_ref2, tickIndex) {
-                var style = _ref2.style,
-                    tick = _ref2.data;
-                return renderTick(_objectSpread$1({
-                  tickIndex: tickIndex,
-                  format: format,
-                  textBaseline: textBaseline,
-                  textAnchor: textAlign,
-                  theme: theme
-                }, tick, style, onClick ? {
-                  onClick: onClick
-                } : {}));
-              }));
-            }), React__default.createElement(reactMotion.Motion, {
+        }
+        legendNode = React__default.createElement("text", {
+          transform: "translate(".concat(legendX, ", ").concat(legendY, ") rotate(").concat(legendRotation, ")"),
+          textAnchor: textAnchor,
+          style: _objectSpread$1({
+            alignmentBaseline: 'middle'
+          }, theme.axis.legend.text)
+        }, legend);
+      }
+      if (animate !== true) {
+        return React__default.createElement("g", {
+          transform: "translate(".concat(x, ",").concat(y, ")")
+        }, ticks.map(function (tick, tickIndex) {
+          return renderTick(_objectSpread$1({
+            tickIndex: tickIndex,
+            format: format,
+            rotate: tickRotation,
+            textBaseline: textBaseline,
+            textAnchor: textAlign,
+            theme: theme
+          }, tick, onClick ? {
+            onClick: onClick
+          } : {}));
+        }), React__default.createElement("line", {
+          style: theme.axis.domain.line,
+          x1: 0,
+          x2: axis === 'x' ? length : 0,
+          y1: 0,
+          y2: axis === 'x' ? 0 : length
+        }), legendNode);
+      }
+      var springConfig = {
+        stiffness: motionStiffness,
+        damping: motionDamping
+      };
+      return React__default.createElement(reactMotion.Motion, {
+        style: {
+          x: reactMotion.spring(x, springConfig),
+          y: reactMotion.spring(y, springConfig)
+        }
+      }, function (xy) {
+        return React__default.createElement("g", {
+          transform: "translate(".concat(xy.x, ",").concat(xy.y, ")")
+        }, React__default.createElement(reactMotion.TransitionMotion, {
+          willEnter: willEnter,
+          willLeave: willLeave(springConfig),
+          styles: ticks.map(function (tick) {
+            return {
+              key: "".concat(tick.key),
+              data: tick,
               style: {
-                x2: reactMotion.spring(axis === 'x' ? length : 0, springConfig),
-                y2: reactMotion.spring(axis === 'x' ? 0 : length, springConfig)
+                opacity: reactMotion.spring(1, springConfig),
+                x: reactMotion.spring(tick.x, springConfig),
+                y: reactMotion.spring(tick.y, springConfig),
+                rotate: reactMotion.spring(tickRotation, springConfig)
               }
-            }, function (values) {
-              return React__default.createElement("line", _extends$1({
-                style: theme.axis.domain.line,
-                x1: 0,
-                y1: 0
-              }, values));
-            }), legendNode);
-          });
-        }
-      }]);
-      return Axis;
-    }(React.Component);
-    _defineProperty$2(Axis, "propTypes", _objectSpread$1({
+            };
+          })
+        }, function (interpolatedStyles) {
+          return React__default.createElement(React.Fragment, null, interpolatedStyles.map(function (_ref3, tickIndex) {
+            var style = _ref3.style,
+                tick = _ref3.data;
+            return renderTick(_objectSpread$1({
+              tickIndex: tickIndex,
+              format: format,
+              textBaseline: textBaseline,
+              textAnchor: textAlign,
+              theme: theme
+            }, tick, style, onClick ? {
+              onClick: onClick
+            } : {}));
+          }));
+        }), React__default.createElement(reactMotion.Motion, {
+          style: {
+            x2: reactMotion.spring(axis === 'x' ? length : 0, springConfig),
+            y2: reactMotion.spring(axis === 'x' ? 0 : length, springConfig)
+          }
+        }, function (values) {
+          return React__default.createElement("line", _extends$1({
+            style: theme.axis.domain.line,
+            x1: 0,
+            y1: 0
+          }, values));
+        }), legendNode);
+      });
+    };
+    Axis.propTypes = _objectSpread$1({
       axis: PropTypes.oneOf(['x', 'y']).isRequired,
@@ -434,4 +446,4 @@ scale: PropTypes.func.isRequired,
       }).isRequired
-    }, core.motionPropTypes));
-    _defineProperty$2(Axis, "defaultProps", {
+    }, core.motionPropTypes);
+    Axis.defaultProps = {
       x: 0,
@@ -445,6 +457,6 @@ y: 0,
       legendOffset: 0
-    });
-    var enhance = compose(core.withMotion(), withPropsOnChange(['format', 'scale'], function (_ref3) {
-      var format = _ref3.format,
-          scale = _ref3.scale;
+    };
+    var enhance = compose(core.withMotion(), withPropsOnChange(['format', 'scale'], function (_ref4) {
+      var format = _ref4.format,
+          scale = _ref4.scale;
       return {
@@ -471,12 +483,12 @@ format: getFormatter(format, scale)
     function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$3(target, key, source[key]); }); } return target; }
-    function _typeof$2(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$2 = function _typeof(obj) { return typeof obj; }; } else { _typeof$2 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$2(obj); }
+    function _typeof$1(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$1 = function _typeof(obj) { return typeof obj; }; } else { _typeof$1 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$1(obj); }
     function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-    function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-    function _defineProperties$2(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-    function _createClass$2(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$2(Constructor.prototype, protoProps); if (staticProps) _defineProperties$2(Constructor, staticProps); return Constructor; }
-    function _possibleConstructorReturn$2(self, call) { if (call && (_typeof$2(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized$2(self); }
-    function _assertThisInitialized$2(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-    function _getPrototypeOf$2(o) { _getPrototypeOf$2 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf$2(o); }
-    function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf$2(subClass, superClass); }
-    function _setPrototypeOf$2(o, p) { _setPrototypeOf$2 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf$2(o, p); }
+    function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+    function _defineProperties$1(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+    function _createClass$1(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$1(Constructor.prototype, protoProps); if (staticProps) _defineProperties$1(Constructor, staticProps); return Constructor; }
+    function _possibleConstructorReturn$1(self, call) { if (call && (_typeof$1(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized$1(self); }
+    function _assertThisInitialized$1(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+    function _getPrototypeOf$1(o) { _getPrototypeOf$1 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf$1(o); }
+    function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf$1(subClass, superClass); }
+    function _setPrototypeOf$1(o, p) { _setPrototypeOf$1 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf$1(o, p); }
     function _defineProperty$3(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -486,8 +498,8 @@ var positions = ['top', 'right', 'bottom', 'left'];
     function (_PureComponent) {
-      _inherits$2(Axes, _PureComponent);
+      _inherits$1(Axes, _PureComponent);
       function Axes() {
-        _classCallCheck$2(this, Axes);
-        return _possibleConstructorReturn$2(this, _getPrototypeOf$2(Axes).apply(this, arguments));
+        _classCallCheck$1(this, Axes);
+        return _possibleConstructorReturn$1(this, _getPrototypeOf$1(Axes).apply(this, arguments));
       }
-      _createClass$2(Axes, [{
+      _createClass$1(Axes, [{
         key: "render",
@@ -552,2 +564,190 @@ value: function render() {
 
+    var GridLine = function GridLine(props) {
+      return React__default.createElement("line", props);
+    };
+    GridLine.propTypes = {
+      x1: PropTypes.number.isRequired,
+      x2: PropTypes.number.isRequired,
+      y1: PropTypes.number.isRequired,
+      y2: PropTypes.number.isRequired
+    };
+    GridLine.defaultProps = {
+      x1: 0,
+      x2: 0,
+      y1: 0,
+      y2: 0
+    };
+
+    function _typeof$2(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$2 = function _typeof(obj) { return typeof obj; }; } else { _typeof$2 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$2(obj); }
+    function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+    function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+    function _defineProperties$2(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+    function _createClass$2(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$2(Constructor.prototype, protoProps); if (staticProps) _defineProperties$2(Constructor, staticProps); return Constructor; }
+    function _possibleConstructorReturn$2(self, call) { if (call && (_typeof$2(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized$2(self); }
+    function _getPrototypeOf$2(o) { _getPrototypeOf$2 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf$2(o); }
+    function _assertThisInitialized$2(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+    function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf$2(subClass, superClass); }
+    function _setPrototypeOf$2(o, p) { _setPrototypeOf$2 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf$2(o, p); }
+    function _defineProperty$4(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+    var GridLines =
+    function (_Component) {
+      _inherits$2(GridLines, _Component);
+      function GridLines(props) {
+        var _this;
+        _classCallCheck$2(this, GridLines);
+        _this = _possibleConstructorReturn$2(this, _getPrototypeOf$2(GridLines).call(this, props));
+        _this.willEnter = _this.willEnter.bind(_assertThisInitialized$2(_this));
+        _this.willLeave = _this.willLeave.bind(_assertThisInitialized$2(_this));
+        return _this;
+      }
+      _createClass$2(GridLines, [{
+        key: "willEnter",
+        value: function willEnter(_ref) {
+          var style = _ref.style;
+          var type = this.props.type;
+          return {
+            opacity: 0,
+            x1: type === 'x' ? 0 : style.x1.val,
+            x2: type === 'x' ? 0 : style.x2.val,
+            y1: type === 'y' ? 0 : style.y1.val,
+            y2: type === 'y' ? 0 : style.y2.val
+          };
+        }
+      }, {
+        key: "willLeave",
+        value: function willLeave(_ref2) {
+          var style = _ref2.style;
+          var _this$props = this.props,
+              motionStiffness = _this$props.motionStiffness,
+              motionDamping = _this$props.motionDamping;
+          var springConfig = {
+            stiffness: motionStiffness,
+            damping: motionDamping
+          };
+          return {
+            opacity: reactMotion.spring(0, springConfig),
+            x1: reactMotion.spring(style.x1.val, springConfig),
+            x2: reactMotion.spring(style.x2.val, springConfig),
+            y1: reactMotion.spring(style.y1.val, springConfig),
+            y2: reactMotion.spring(style.y2.val, springConfig)
+          };
+        }
+      }, {
+        key: "render",
+        value: function render() {
+          var _this$props2 = this.props,
+              lines = _this$props2.lines,
+              animate = _this$props2.animate,
+              motionStiffness = _this$props2.motionStiffness,
+              motionDamping = _this$props2.motionDamping,
+              theme = _this$props2.theme;
+          if (!animate) {
+            return React__default.createElement("g", null, lines.map(function (line) {
+              return React__default.createElement(GridLine, _extends$3({
+                key: line.key
+              }, line, theme.grid.line));
+            }));
+          }
+          var springConfig = {
+            stiffness: motionStiffness,
+            damping: motionDamping
+          };
+          return React__default.createElement(reactMotion.TransitionMotion, {
+            willEnter: this.willEnter,
+            willLeave: this.willLeave,
+            styles: lines.map(function (line) {
+              return {
+                key: line.key,
+                style: {
+                  opacity: reactMotion.spring(1, springConfig),
+                  x1: reactMotion.spring(line.x1 || 0, springConfig),
+                  x2: reactMotion.spring(line.x2 || 0, springConfig),
+                  y1: reactMotion.spring(line.y1 || 0, springConfig),
+                  y2: reactMotion.spring(line.y2 || 0, springConfig)
+                }
+              };
+            })
+          }, function (interpolatedStyles) {
+            return React__default.createElement("g", null, interpolatedStyles.map(function (interpolatedStyle) {
+              var key = interpolatedStyle.key,
+                  style = interpolatedStyle.style;
+              return React__default.createElement(GridLine, _extends$3({
+                key: key
+              }, theme.grid.line, style));
+            }));
+          });
+        }
+      }]);
+      return GridLines;
+    }(React.Component);
+    _defineProperty$4(GridLines, "propTypes", {
+      type: PropTypes.oneOf(['x', 'y']).isRequired,
+      lines: PropTypes.arrayOf(PropTypes.shape({
+        key: PropTypes.string.isRequired,
+        x1: PropTypes.number,
+        x2: PropTypes.number,
+        y1: PropTypes.number,
+        y2: PropTypes.number
+      })).isRequired,
+      theme: PropTypes.object.isRequired,
+      animate: PropTypes.bool.isRequired,
+      motionStiffness: PropTypes.number.isRequired,
+      motionDamping: PropTypes.number.isRequired
+    });
+
+    function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$5(target, key, source[key]); }); } return target; }
+    function _defineProperty$5(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+    var Grid = function Grid(_ref) {
+      var width = _ref.width,
+          height = _ref.height,
+          xScale = _ref.xScale,
+          yScale = _ref.yScale,
+          xValues = _ref.xValues,
+          yValues = _ref.yValues,
+          theme = _ref.theme,
+          animate = _ref.animate,
+          motionStiffness = _ref.motionStiffness,
+          motionDamping = _ref.motionDamping;
+      var xLines = xScale ? computeGridLines({
+        width: width,
+        height: height,
+        scale: xScale,
+        axis: 'x',
+        values: xValues
+      }) : false;
+      var yLines = yScale ? computeGridLines({
+        width: width,
+        height: height,
+        scale: yScale,
+        axis: 'y',
+        values: yValues
+      }) : false;
+      return React__default.createElement("g", null, xLines && React__default.createElement(GridLines, {
+        type: "x",
+        lines: xLines,
+        theme: theme,
+        animate: animate,
+        motionStiffness: motionStiffness,
+        motionDamping: motionDamping
+      }), yLines && React__default.createElement(GridLines, {
+        type: "y",
+        lines: yLines,
+        theme: theme,
+        animate: animate,
+        motionStiffness: motionStiffness,
+        motionDamping: motionDamping
+      }));
+    };
+    Grid.propTypes = _objectSpread$3({
+      width: PropTypes.number.isRequired,
+      height: PropTypes.number.isRequired,
+      xScale: PropTypes.func,
+      yScale: PropTypes.func,
+      xValues: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)]))]),
+      yValues: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)]))]),
+      theme: PropTypes.object.isRequired
+    }, core.motionPropTypes);
+    Grid.defaultProps = {};
+    var Grid$1 = pure(Grid);
+
     var degreesToRadians = function degreesToRadians(degrees) {
@@ -557,4 +757,4 @@ return degrees * Math.PI / 180;
 
-    function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$4(target, key, source[key]); }); } return target; }
-    function _defineProperty$4(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+    function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$6(target, key, source[key]); }); } return target; }
+    function _defineProperty$6(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
     var renderAxisToCanvas = function renderAxisToCanvas(ctx, _ref) {
@@ -577,2 +777,7 @@ var axis = _ref.axis,
           format = _ref.format,
+          legend = _ref.legend,
+          _ref$legendPosition = _ref.legendPosition,
+          legendPosition = _ref$legendPosition === void 0 ? 'end' : _ref$legendPosition,
+          _ref$legendOffset = _ref.legendOffset,
+          legendOffset = _ref$legendOffset === void 0 ? 0 : _ref$legendOffset,
           theme = _ref.theme;
@@ -597,17 +802,21 @@ var _computeCartesianTick = computeCartesianTicks({
       ctx.font = "".concat(theme.axis.ticks.text.fontSize, "px ").concat(theme.axis.ticks.text.fontFamily);
-      ctx.lineWidth = theme.axis.domain.line.strokeWidth;
-      ctx.lineCap = 'square';
-      ctx.strokeStyle = theme.axis.domain.line.stroke;
-      ctx.beginPath();
-      ctx.moveTo(0, 0);
-      ctx.lineTo(axis === 'x' ? length : 0, axis === 'x' ? 0 : length);
-      ctx.stroke();
-      ticks.forEach(function (tick) {
-        ctx.lineWidth = theme.axis.ticks.line.strokeWidth;
+      if (theme.axis.domain.line.strokeWidth > 0) {
+        ctx.lineWidth = theme.axis.domain.line.strokeWidth;
         ctx.lineCap = 'square';
-        ctx.strokeStyle = theme.axis.ticks.line.stroke;
+        ctx.strokeStyle = theme.axis.domain.line.stroke;
         ctx.beginPath();
-        ctx.moveTo(tick.x, tick.y);
-        ctx.lineTo(tick.x + tick.lineX, tick.y + tick.lineY);
+        ctx.moveTo(0, 0);
+        ctx.lineTo(axis === 'x' ? length : 0, axis === 'x' ? 0 : length);
         ctx.stroke();
+      }
+      ticks.forEach(function (tick) {
+        if (theme.axis.ticks.line.strokeWidth > 0) {
+          ctx.lineWidth = theme.axis.ticks.line.strokeWidth;
+          ctx.lineCap = 'square';
+          ctx.strokeStyle = theme.axis.ticks.line.stroke;
+          ctx.beginPath();
+          ctx.moveTo(tick.x, tick.y);
+          ctx.lineTo(tick.x + tick.lineX, tick.y + tick.lineY);
+          ctx.stroke();
+        }
         var value = format !== undefined ? format(tick.value) : tick.value;
@@ -621,2 +830,39 @@ ctx.save();
       });
+      if (legend !== undefined) {
+        var legendX = 0;
+        var legendY = 0;
+        var legendRotation = 0;
+        var _textAlign;
+        if (axis === 'y') {
+          legendRotation = -90;
+          legendX = legendOffset;
+          if (legendPosition === 'start') {
+            _textAlign = 'start';
+            legendY = length;
+          } else if (legendPosition === 'middle') {
+            _textAlign = 'center';
+            legendY = length / 2;
+          } else if (legendPosition === 'end') {
+            _textAlign = 'end';
+          }
+        } else {
+          legendY = legendOffset;
+          if (legendPosition === 'start') {
+            _textAlign = 'start';
+          } else if (legendPosition === 'middle') {
+            _textAlign = 'center';
+            legendX = length / 2;
+          } else if (legendPosition === 'end') {
+            _textAlign = 'end';
+            legendX = length;
+          }
+        }
+        ctx.translate(legendX, legendY);
+        ctx.rotate(degreesToRadians(legendRotation));
+        ctx.font = "".concat(theme.axis.legend.text.fontWeight ? "".concat(theme.axis.legend.text.fontWeight, " ") : '').concat(theme.axis.legend.text.fontSize, "px ").concat(theme.axis.legend.text.fontFamily);
+        ctx.fillStyle = theme.axis.legend.text.fill;
+        ctx.textAlign = _textAlign;
+        ctx.textBaseline = 'middle';
+        ctx.fillText(legend, 0, 0);
+      }
       ctx.restore();
@@ -648,3 +894,3 @@ };
         var format = getFormatter(axis.format, scale);
-        renderAxisToCanvas(ctx, _objectSpread$3({}, axis, {
+        renderAxisToCanvas(ctx, _objectSpread$4({}, axis, {
           axis: isXAxis ? 'x' : 'y',
@@ -661,5 +907,26 @@ x: position === 'right' ? width : 0,
     };
+    var renderGridLinesToCanvas = function renderGridLinesToCanvas(ctx, _ref3) {
+      var width = _ref3.width,
+          height = _ref3.height,
+          scale = _ref3.scale,
+          axis = _ref3.axis,
+          values = _ref3.values;
+      var lines = computeGridLines({
+        width: width,
+        height: height,
+        scale: scale,
+        axis: axis,
+        values: values
+      });
+      lines.forEach(function (line) {
+        ctx.beginPath();
+        ctx.moveTo(line.x1, line.y1);
+        ctx.lineTo(line.x2, line.y2);
+        ctx.stroke();
+      });
+    };
 
     exports.Axes = Axes;
     exports.Axis = Axis$1;
+    exports.Grid = Grid$1;
     exports.axisPropType = axisPropType;
@@ -669,2 +936,3 @@ exports.axisPropTypes = axisPropTypes;
     exports.renderAxisToCanvas = renderAxisToCanvas;
+    exports.renderGridLinesToCanvas = renderGridLinesToCanvas;
 
@@ -671,0 +939,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

index.d.ts

@@ -15,2 +15,4 @@ import * as React from 'react'
     }
+
+    export type Axis = any
 }

package.json

 {
   "name": "@nivo/axes",
-  "version": "0.55.0",
+  "version": "0.56.0",
   "license": "MIT",
@@ -24,6 +24,6 @@ "author": {
   "dependencies": {
-    "@nivo/core": "0.55.0",
+    "@nivo/core": "0.56.0",
     "d3-format": "^1.3.2",
     "d3-time-format": "^2.1.3",
-    "lodash": "^4.17.4",
+    "lodash": "^4.17.11",
     "react-motion": "^0.5.2",
@@ -39,3 +39,3 @@ "recompose": "^0.30.0"
   },
-  "gitHead": "4c4cbde54f3a954016a0d6a417a9a25a6e18e8f1"
+  "gitHead": "99c7f6bd886d517f12fa04441b1102d082a1bf26"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

128684

increased by27.68%

Lines of code

2799

increased by40.02%

Dependency changes

• + Added@nivo/core@0.56.0(transitive)

• + Addedd3-array@2.12.1(transitive)

• + Addedd3-scale@3.3.0(transitive)

• + Addedd3-time@2.1.1(transitive)

• + Addedinternmap@1.0.1(transitive)

• - Removed@nivo/core@0.55.0(transitive)

• - Removedd3-array@1.2.4(transitive)

• - Removedd3-collection@1.0.7(transitive)

• - Removedd3-scale@2.2.2(transitive)

• Updated@nivo/core@0.56.0

• Updatedlodash@^4.17.11