diff --git a/packages/vx-heatmap/package.json b/packages/vx-heatmap/package.json
index 19b3cdd59..421345674 100644
--- a/packages/vx-heatmap/package.json
+++ b/packages/vx-heatmap/package.json
@@ -64,7 +64,8 @@
   },
   "dependencies": {
     "@vx/group": "0.0.165",
-    "classnames": "^2.2.5"
+    "classnames": "^2.2.5",
+    "prop-types": "^15.6.1"
   },
   "jest": {
     "setupFiles": [
diff --git a/packages/vx-heatmap/src/heatmaps/circle.js b/packages/vx-heatmap/src/heatmaps/circle.js
index da38f0102..f2d864b3f 100644
--- a/packages/vx-heatmap/src/heatmaps/circle.js
+++ b/packages/vx-heatmap/src/heatmaps/circle.js
@@ -1,52 +1,70 @@
-import React from 'react';
-import cx from 'classnames';
-import { Group } from '@vx/group';
-import additionalProps from '../util/additionalProps';
-
-export default function HeatmapCircle({
-  className,
-  data,
-  gap = 1,
-  step = 0,
-  radius = 6,
-  xScale,
-  yScale,
-  colorScale,
-  opacityScale = d => 1,
-  bin = d => d.bin,
-  bins = d => d.bins,
-  count = d => d.count,
-  ...restProps
-}) {
-  const r = radius - gap;
-  return (
-    <Group>
-      {data.map((d, i) => {
-        return (
-          <Group key={`heatmap-${i}`} className="vx-heatmap-column" left={xScale(bin(d))}>
-            {bins(d).map((b, j) => {
-              return (
-                <circle
-                  key={`heatmap-tile-circle-${j}`}
-                  className={cx('vx-heatmap-circle', className)}
-                  fill={colorScale(count(b))}
-                  r={r}
-                  cx={radius}
-                  cy={yScale(bin(b) + step) + radius}
-                  fillOpacity={opacityScale(count(b))}
-                  {...additionalProps(restProps, {
-                    bin: b,
-                    index: j,
-                    datum: d,
-                    datumIndex: i,
-                    data
-                  })}
-                />
-              );
-            })}
-          </Group>
-        );
-      })}
-    </Group>
-  );
-}
+import { Group } from '@vx/group';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import additionalProps from '../util/additionalProps';
+
+HeatmapCircle.propTypes = {
+  data: PropTypes.func,
+  gap: PropTypes.number,
+  step: PropTypes.number,
+  radius: PropTypes.number,
+  xScale: PropTypes.func,
+  yScale: PropTypes.func,
+  colorScale: PropTypes.func,
+  opacityScale: PropTypes.func,
+  yBin: PropTypes.func,
+  bin: PropTypes.func,
+  bins: PropTypes.func,
+  count: PropTypes.func
+};
+
+export default function HeatmapCircle({
+  className,
+  data,
+  gap = 1,
+  step = 0,
+  radius = 6,
+  xScale,
+  yScale,
+  colorScale,
+  opacityScale = d => 1,
+  yBin,
+  bin = (d, i) => d.bin,
+  bins = (d, i) => d.bins,
+  count = d => d.count,
+  ...restProps
+}) {
+  yBin = yBin || bin;
+  const r = radius - gap;
+  return (
+    <Group>
+      {data.map((d, i) => {
+        return (
+          <Group key={`heatmap-${i}`} className="vx-heatmap-column" left={xScale(bin(d, i))}>
+            {bins(d, i).map((b, j) => {
+              return (
+                <circle
+                  key={`heatmap-tile-circle-${j}`}
+                  className={cx('vx-heatmap-circle', className)}
+                  fill={colorScale(count(b))}
+                  r={r}
+                  cx={radius}
+                  cy={yScale(yBin(b, j) + step) + radius}
+                  fillOpacity={opacityScale(count(b))}
+                  {...additionalProps(restProps, {
+                    bin: b,
+                    index: j,
+                    datum: d,
+                    datumIndex: i,
+                    data
+                  })}
+                />
+              );
+            })}
+          </Group>
+        );
+      })}
+    </Group>
+  );
+}
diff --git a/packages/vx-heatmap/src/heatmaps/rect.js b/packages/vx-heatmap/src/heatmaps/rect.js
index c72345231..23484ec31 100644
--- a/packages/vx-heatmap/src/heatmaps/rect.js
+++ b/packages/vx-heatmap/src/heatmaps/rect.js
@@ -1,56 +1,76 @@
-import React from 'react';
-import cx from 'classnames';
-import { Group } from '@vx/group';
-import additionalProps from '../util/additionalProps';
-
-export default function HeatmapRect({
-  className,
-  data,
-  binWidth,
-  binHeight,
-  x = 0,
-  gap = 1,
-  step = 0,
-  xScale,
-  yScale,
-  colorScale,
-  opacityScale = d => 1,
-  bin = d => d.bin,
-  bins = d => d.bins,
-  count = d => d.count,
-  ...restProps
-}) {
-  const width = binWidth - gap;
-  const height = binHeight - gap;
-  return (
-    <Group>
-      {data.map((d, i) => {
-        return (
-          <Group key={`heatmap-${i}`} className="vx-heatmap-column" left={xScale(bin(d))}>
-            {bins(d).map((b, j) => {
-              return (
-                <rect
-                  key={`heatmap-tile-rect-${j}`}
-                  className={cx('vx-heatmap-rect', className)}
-                  fill={colorScale(count(b))}
-                  width={width}
-                  height={height}
-                  x={x}
-                  y={yScale(bin(b) + step) + gap}
-                  fillOpacity={opacityScale(count(b))}
-                  {...additionalProps(restProps, {
-                    bin: b,
-                    index: j,
-                    datum: d,
-                    datumIndex: i,
-                    data
-                  })}
-                />
-              );
-            })}
-          </Group>
-        );
-      })}
-    </Group>
-  );
-}
+import { Group } from '@vx/group';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import additionalProps from '../util/additionalProps';
+
+HeatmapRect.propTypes = {
+  data: PropTypes.array,
+  binWidth: PropTypes.number,
+  binHeight: PropTypes.number,
+  x: PropTypes.number,
+  gap: PropTypes.number,
+  step: PropTypes.number,
+  xScale: PropTypes.func,
+  yScale: PropTypes.func,
+  colorScale: PropTypes.func,
+  opacityScale: PropTypes.func,
+  yBin: PropTypes.func,
+  bin: PropTypes.func,
+  bins: PropTypes.func,
+  count: PropTypes.func
+};
+
+export default function HeatmapRect({
+  className,
+  data,
+  binWidth,
+  binHeight,
+  x = 0,
+  gap = 1,
+  step = 0,
+  xScale,
+  yScale,
+  colorScale,
+  opacityScale = d => 1,
+  yBin,
+  bin = (d, i) => d.bin,
+  bins = (d, i) => d.bins,
+  count = d => d.count,
+  ...restProps
+}) {
+  yBin = yBin || bin;
+  const width = binWidth - gap;
+  const height = binHeight - gap;
+  return (
+    <Group>
+      {data.map((d, i) => {
+        return (
+          <Group key={`heatmap-${i}`} className="vx-heatmap-column" left={xScale(bin(d, i))}>
+            {bins(d, i).map((b, j) => {
+              return (
+                <rect
+                  key={`heatmap-tile-rect-${j}`}
+                  className={cx('vx-heatmap-rect', className)}
+                  fill={colorScale(count(b))}
+                  width={width}
+                  height={height}
+                  x={x}
+                  y={yScale(yBin(b, j) + step) + gap}
+                  fillOpacity={opacityScale(count(b))}
+                  {...additionalProps(restProps, {
+                    bin: b,
+                    index: j,
+                    datum: d,
+                    datumIndex: i,
+                    data
+                  })}
+                />
+              );
+            })}
+          </Group>
+        );
+      })}
+    </Group>
+  );
+}