diff --git a/packages/calendar/package.json b/packages/calendar/package.json
index 186f9b6fe..885383f7f 100644
--- a/packages/calendar/package.json
+++ b/packages/calendar/package.json
@@ -29,7 +29,6 @@
     "d3-time": "^1.0.10",
     "d3-time-format": "^2.1.3",
     "lodash": "^4.17.4",
-    "react-spring": "^8.0.18",
     "recompose": "^0.30.0"
   },
   "peerDependencies": {
diff --git a/packages/calendar/src/Calendar.js b/packages/calendar/src/Calendar.js
index f0e5cf0a9..de7068502 100644
--- a/packages/calendar/src/Calendar.js
+++ b/packages/calendar/src/Calendar.js
@@ -111,6 +111,7 @@ const Calendar = ({
     )
 }
 
+Calendar.displayName = 'Calendar'
 Calendar.propTypes = CalendarPropTypes
 
 export default setDisplayName('Calendar')(enhance(Calendar))
diff --git a/packages/calendar/src/CalendarCanvas.js b/packages/calendar/src/CalendarCanvas.js
new file mode 100644
index 000000000..5316d5811
--- /dev/null
+++ b/packages/calendar/src/CalendarCanvas.js
@@ -0,0 +1,235 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React, { Component } from 'react'
+import setDisplayName from 'recompose/setDisplayName'
+import {
+    isCursorInRect,
+    getRelativeCursor,
+    Container,
+    degreesToRadians,
+    BasicTooltip,
+} from '@nivo/core'
+import { renderLegendToCanvas } from '@nivo/legends'
+import enhance from './enhance'
+import { CalendarCanvasPropTypes } from './props'
+
+const findDayUnderCursor = (days, size, spacing, margin, x, y) => {
+    return days.find(day => {
+        return (
+            day.value !== undefined &&
+            isCursorInRect(
+                day.x + margin.left - spacing / 2,
+                day.y + margin.top - spacing / 2,
+                size + spacing,
+                size + spacing,
+                x,
+                y
+            )
+        )
+    })
+}
+
+class CalendarCanvas extends Component {
+    static propTypes = CalendarCanvasPropTypes
+
+    componentDidMount() {
+        this.ctx = this.surface.getContext('2d')
+        this.draw(this.props)
+    }
+
+    shouldComponentUpdate(props) {
+        if (
+            this.props.outerWidth !== props.outerWidth ||
+            this.props.outerHeight !== props.outerHeight ||
+            this.props.isInteractive !== props.isInteractive ||
+            this.props.theme !== props.theme
+        ) {
+            return true
+        } else {
+            this.draw(props)
+            return false
+        }
+    }
+
+    componentDidUpdate() {
+        this.ctx = this.surface.getContext('2d')
+        this.draw(this.props)
+    }
+
+    draw(props) {
+        const {
+            pixelRatio,
+
+            margin,
+            width,
+            height,
+            outerWidth,
+            outerHeight,
+
+            colorScale,
+
+            yearLegends,
+            yearLegend,
+
+            monthLegends,
+            monthLegend,
+
+            days,
+            dayBorderWidth,
+            dayBorderColor,
+
+            legends,
+
+            theme,
+        } = props
+
+        this.surface.width = outerWidth * pixelRatio
+        this.surface.height = outerHeight * pixelRatio
+
+        this.ctx.scale(pixelRatio, pixelRatio)
+        this.ctx.fillStyle = theme.background
+        this.ctx.fillRect(0, 0, outerWidth, outerHeight)
+        this.ctx.translate(margin.left, margin.top)
+
+        days.forEach(day => {
+            this.ctx.fillStyle = day.color
+            if (dayBorderWidth > 0) {
+                this.ctx.strokeStyle = dayBorderColor
+                this.ctx.lineWidth = dayBorderWidth
+            }
+
+            this.ctx.beginPath()
+            this.ctx.rect(day.x, day.y, day.size, day.size)
+            this.ctx.fill()
+
+            if (dayBorderWidth > 0) {
+                this.ctx.stroke()
+            }
+        })
+
+        this.ctx.textAlign = 'center'
+        this.ctx.textBaseline = 'middle'
+        this.ctx.fillStyle = theme.labels.text.fill
+        this.ctx.font = `${theme.labels.text.fontSize}px ${theme.labels.text.fontFamily}`
+
+        monthLegends.forEach(month => {
+            this.ctx.save()
+            this.ctx.translate(month.x, month.y)
+            this.ctx.rotate(degreesToRadians(month.rotation))
+            this.ctx.fillText(monthLegend(month.year, month.month, month.date), 0, 0)
+            this.ctx.restore()
+        })
+
+        yearLegends.forEach(year => {
+            this.ctx.save()
+            this.ctx.translate(year.x, year.y)
+            this.ctx.rotate(degreesToRadians(year.rotation))
+            this.ctx.fillText(yearLegend(year.year), 0, 0)
+            this.ctx.restore()
+        })
+
+        legends.forEach(legend => {
+            const legendData = colorScale.ticks(legend.itemCount).map(value => ({
+                id: value,
+                label: value,
+                color: colorScale(value),
+            }))
+
+            renderLegendToCanvas(this.ctx, {
+                ...legend,
+                data: legendData,
+                containerWidth: width,
+                containerHeight: height,
+                theme,
+            })
+        })
+    }
+
+    handleMouseHover = (showTooltip, hideTooltip) => event => {
+        const {
+            isInteractive,
+            margin,
+            theme,
+            days,
+            daySpacing,
+            tooltipFormat,
+            tooltip,
+        } = this.props
+
+        if (!isInteractive || !days || days.length === 0) return
+
+        const [x, y] = getRelativeCursor(this.surface, event)
+        const currentDay = findDayUnderCursor(days, days[0].size, daySpacing, margin, x, y)
+
+        if (currentDay !== undefined) {
+            showTooltip(
+                <BasicTooltip
+                    id={`${currentDay.day}`}
+                    value={currentDay.value}
+                    enableChip={true}
+                    color={currentDay.color}
+                    theme={theme}
+                    format={tooltipFormat}
+                    renderContent={
+                        typeof tooltip === 'function' ? tooltip.bind(null, currentDay) : null
+                    }
+                />,
+                event
+            )
+        } else {
+            hideTooltip()
+        }
+    }
+
+    handleMouseLeave = hideTooltip => () => {
+        if (this.props.isInteractive !== true) return
+
+        hideTooltip()
+    }
+
+    handleClick = event => {
+        const { isInteractive, margin, onClick, days, daySpacing } = this.props
+
+        if (!isInteractive || !days || days.length === 0) return
+
+        const [x, y] = getRelativeCursor(this.surface, event)
+        const currentDay = findDayUnderCursor(days, days[0].size, daySpacing, margin, x, y)
+        if (currentDay !== undefined) onClick(currentDay, event)
+    }
+
+    render() {
+        const { outerWidth, outerHeight, pixelRatio, isInteractive, theme } = this.props
+
+        return (
+            <Container isInteractive={isInteractive} theme={theme}>
+                {({ showTooltip, hideTooltip }) => (
+                    <canvas
+                        ref={surface => {
+                            this.surface = surface
+                        }}
+                        width={outerWidth * pixelRatio}
+                        height={outerHeight * pixelRatio}
+                        style={{
+                            width: outerWidth,
+                            height: outerHeight,
+                        }}
+                        onMouseEnter={this.handleMouseHover(showTooltip, hideTooltip)}
+                        onMouseMove={this.handleMouseHover(showTooltip, hideTooltip)}
+                        onMouseLeave={this.handleMouseLeave(hideTooltip)}
+                        onClick={this.handleClick}
+                    />
+                )}
+            </Container>
+        )
+    }
+}
+
+CalendarCanvas.displayName = 'CalendarCanvas'
+
+export default setDisplayName(CalendarCanvas.displayName)(enhance(CalendarCanvas))
diff --git a/packages/calendar/src/CalendarDay.js b/packages/calendar/src/CalendarDay.js
index 9d91c46ce..7bdc8f7a3 100644
--- a/packages/calendar/src/CalendarDay.js
+++ b/packages/calendar/src/CalendarDay.js
@@ -8,11 +8,8 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import compose from 'recompose/compose'
-import withPropsOnChange from 'recompose/withPropsOnChange'
-import pure from 'recompose/pure'
-import { noop } from '@nivo/core'
-import { BasicTooltip } from '@nivo/core'
+import { compose, withPropsOnChange, pure } from 'recompose'
+import { BasicTooltip, noop } from '@nivo/core'
 
 const CalendarDay = ({
     x,
diff --git a/packages/calendar/src/CalendarYearLegends.js b/packages/calendar/src/CalendarYearLegends.js
index bc2357b67..68e5abad3 100644
--- a/packages/calendar/src/CalendarYearLegends.js
+++ b/packages/calendar/src/CalendarYearLegends.js
@@ -34,6 +34,6 @@ CalendarYearLegends.propTypes = {
     theme: PropTypes.object.isRequired,
 }
 
-CalendarYearLegends.setDisplayName = 'CalendarYearLegends'
+CalendarYearLegends.displayName = 'CalendarYearLegends'
 
 export default CalendarYearLegends
diff --git a/packages/calendar/src/ResponsiveCalendarCanvas.js b/packages/calendar/src/ResponsiveCalendarCanvas.js
new file mode 100644
index 000000000..560356eb1
--- /dev/null
+++ b/packages/calendar/src/ResponsiveCalendarCanvas.js
@@ -0,0 +1,19 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React from 'react'
+import { ResponsiveWrapper } from '@nivo/core'
+import CalendarCanvas from './CalendarCanvas'
+
+const ResponsiveCalendarCanvas = props => (
+    <ResponsiveWrapper>
+        {({ width, height }) => <CalendarCanvas width={width} height={height} {...props} />}
+    </ResponsiveWrapper>
+)
+
+export default ResponsiveCalendarCanvas
diff --git a/packages/calendar/src/computeCalendar.js b/packages/calendar/src/computeCalendar.js
index 54240562c..aed1dfbdd 100644
--- a/packages/calendar/src/computeCalendar.js
+++ b/packages/calendar/src/computeCalendar.js
@@ -10,7 +10,6 @@ import memoize from 'lodash/memoize'
 import isDate from 'lodash/isDate'
 import range from 'lodash/range'
 import max from 'lodash/max'
-import assign from 'lodash/assign'
 import { timeFormat } from 'd3-time-format'
 import { timeDays, timeWeek, timeWeeks, timeMonths, timeYear } from 'd3-time'
 
@@ -233,16 +232,14 @@ export const computeLayout = ({ width, height, from, to, direction, yearSpacing,
         const yearEnd = new Date(year + 1, 0, 1)
 
         days = days.concat(
-            timeDays(yearStart, yearEnd).map(dayDate =>
-                assign(
-                    {
-                        date: dayDate,
-                        day: dayFormat(dayDate),
-                        size: cellSize,
-                    },
-                    cellPosition(dayDate, i)
-                )
-            )
+            timeDays(yearStart, yearEnd).map(dayDate => {
+                return {
+                    date: dayDate,
+                    day: dayFormat(dayDate),
+                    size: cellSize,
+                    ...cellPosition(dayDate, i),
+                }
+            })
         )
 
         const yearMonths = timeMonths(yearStart, yearEnd).map(monthDate => ({
diff --git a/packages/calendar/src/enhance.js b/packages/calendar/src/enhance.js
index dc1dad946..315fd3dee 100644
--- a/packages/calendar/src/enhance.js
+++ b/packages/calendar/src/enhance.js
@@ -12,7 +12,7 @@ import withPropsOnChange from 'recompose/withPropsOnChange'
 import pure from 'recompose/pure'
 import { scaleQuantize } from 'd3-scale'
 import { withTheme, withDimensions } from '@nivo/core'
-import { CalendarDefaultProps } from './props'
+import { CalendarDefaultProps, CalendarCanvasDefaultProps } from './props'
 import {
     computeDomain,
     computeLayout,
@@ -21,77 +21,90 @@ import {
     computeMonthLegendPositions,
 } from './computeCalendar'
 
-export default Component =>
-    compose(
-        defaultProps(CalendarDefaultProps),
-        withTheme(),
-        withDimensions(),
-        withPropsOnChange(
-            ['data', 'minValue', 'maxValue', 'colors'],
-            ({ data, minValue, maxValue, colors }) => {
-                const domain = computeDomain(data, minValue, maxValue)
+const commonEnhancers = [
+    withTheme(),
+    withDimensions(),
+    withPropsOnChange(
+        ['data', 'minValue', 'maxValue', 'colors'],
+        ({ data, minValue, maxValue, colors }) => {
+            const domain = computeDomain(data, minValue, maxValue)
 
-                const colorScale = scaleQuantize()
-                    .domain(domain)
-                    .range(colors)
+            const colorScale = scaleQuantize()
+                .domain(domain)
+                .range(colors)
 
-                return { colorScale }
-            }
-        ),
-        withPropsOnChange(
-            ['width', 'height', 'from', 'to', 'direction', 'yearSpacing', 'daySpacing'],
-            ({ width, height, from, to, direction, yearSpacing, daySpacing }) => {
-                const { years, months, days } = computeLayout({
-                    width,
-                    height,
-                    from,
-                    to,
-                    direction,
-                    yearSpacing,
-                    daySpacing,
-                })
+            return { colorScale }
+        }
+    ),
+    withPropsOnChange(
+        ['width', 'height', 'from', 'to', 'direction', 'yearSpacing', 'daySpacing'],
+        ({ width, height, from, to, direction, yearSpacing, daySpacing }) => {
+            const { years, months, days } = computeLayout({
+                width,
+                height,
+                from,
+                to,
+                direction,
+                yearSpacing,
+                daySpacing,
+            })
 
-                return { years, months, days }
-            }
-        ),
-        withPropsOnChange(
-            ['years', 'direction', 'yearLegendPosition', 'yearLegendOffset'],
-            ({ years, direction, yearLegendPosition, yearLegendOffset }) => {
-                return {
-                    yearLegends: computeYearLegendPositions({
-                        years,
-                        direction,
-                        position: yearLegendPosition,
-                        offset: yearLegendOffset,
-                    }),
-                }
+            return { years, months, days }
+        }
+    ),
+    withPropsOnChange(
+        ['years', 'direction', 'yearLegendPosition', 'yearLegendOffset'],
+        ({ years, direction, yearLegendPosition, yearLegendOffset }) => {
+            return {
+                yearLegends: computeYearLegendPositions({
+                    years,
+                    direction,
+                    position: yearLegendPosition,
+                    offset: yearLegendOffset,
+                }),
             }
-        ),
-        withPropsOnChange(
-            ['months', 'direction', 'monthLegendPosition', 'monthLegendOffset'],
-            ({ months, direction, monthLegendPosition, monthLegendOffset }) => {
-                return {
-                    monthLegends: computeMonthLegendPositions({
-                        months,
-                        direction,
-                        position: monthLegendPosition,
-                        offset: monthLegendOffset,
-                    }),
-                }
+        }
+    ),
+    withPropsOnChange(
+        ['months', 'direction', 'monthLegendPosition', 'monthLegendOffset'],
+        ({ months, direction, monthLegendPosition, monthLegendOffset }) => {
+            return {
+                monthLegends: computeMonthLegendPositions({
+                    months,
+                    direction,
+                    position: monthLegendPosition,
+                    offset: monthLegendOffset,
+                }),
             }
-        ),
-        withPropsOnChange(
-            ['days', 'data', 'colorScale', 'emptyColor'],
-            ({ days, data, colorScale, emptyColor }) => {
-                return {
-                    days: bindDaysData({
-                        days,
-                        data,
-                        colorScale,
-                        emptyColor,
-                    }),
-                }
+        }
+    ),
+    withPropsOnChange(
+        ['days', 'data', 'colorScale', 'emptyColor'],
+        ({ days, data, colorScale, emptyColor }) => {
+            return {
+                days: bindDaysData({
+                    days,
+                    data,
+                    colorScale,
+                    emptyColor,
+                }),
             }
-        ),
-        pure
-    )(Component)
+        }
+    ),
+]
+
+export default Component => {
+    switch (Component.displayName) {
+        case 'Calendar':
+            return compose(...[defaultProps(CalendarDefaultProps), ...commonEnhancers, pure])(
+                Component
+            )
+
+        case 'CalendarCanvas':
+            return compose(...[defaultProps(CalendarCanvasDefaultProps), ...commonEnhancers, pure])(
+                Component
+            )
+    }
+
+    return Component
+}
diff --git a/packages/calendar/src/index.js b/packages/calendar/src/index.js
index 5be5d8124..fe5bd5f82 100644
--- a/packages/calendar/src/index.js
+++ b/packages/calendar/src/index.js
@@ -8,4 +8,6 @@
  */
 export { default as Calendar } from './Calendar'
 export { default as ResponsiveCalendar } from './ResponsiveCalendar'
+export { default as CalendarCanvas } from './CalendarCanvas'
+export { default as ResponsiveCalendarCanvas } from './ResponsiveCalendarCanvas'
 export * from './props'
diff --git a/packages/calendar/src/props.js b/packages/calendar/src/props.js
index 96493ccf3..623d80820 100644
--- a/packages/calendar/src/props.js
+++ b/packages/calendar/src/props.js
@@ -13,7 +13,7 @@ import { LegendPropShape } from '@nivo/legends'
 
 const monthLabelFormat = timeFormat('%b')
 
-export const CalendarPropTypes = {
+const commonPropTypes = {
     from: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]).isRequired,
     to: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]).isRequired,
     data: PropTypes.arrayOf(
@@ -60,7 +60,14 @@ export const CalendarPropTypes = {
     ).isRequired,
 }
 
-export const CalendarDefaultProps = {
+export const CalendarPropTypes = commonPropTypes
+
+export const CalendarCanvasPropTypes = {
+    ...commonPropTypes,
+    pixelRatio: PropTypes.number.isRequired,
+}
+
+const commonDefaultProps = {
     colors: ['#61cdbb', '#97e3d5', '#e8c1a0', '#f47560'],
 
     direction: 'horizontal',
@@ -78,7 +85,7 @@ export const CalendarDefaultProps = {
     monthBorderColor: '#000',
     monthLegend: (year, month, date) => monthLabelFormat(date),
     monthLegendPosition: 'before',
-    monthLegendOffset: -6,
+    monthLegendOffset: 10,
 
     weekdayLegend: d => d,
     daySpacing: 0,
@@ -90,3 +97,11 @@ export const CalendarDefaultProps = {
 
     legends: [],
 }
+
+export const CalendarDefaultProps = commonDefaultProps
+
+export const CalendarCanvasDefaultProps = {
+    ...commonDefaultProps,
+    pixelRatio:
+        global.window && global.window.devicePixelRatio ? global.window.devicePixelRatio : 1,
+}
diff --git a/website/src/SiteMap.js b/website/src/SiteMap.js
index 13bbf3fd7..b4b15bb74 100644
--- a/website/src/SiteMap.js
+++ b/website/src/SiteMap.js
@@ -55,7 +55,8 @@ import TreeMapCanvas from './components/charts/treemap/TreeMapCanvas'
 import TreeMapAPI from './components/charts/treemap/TreeMapAPI'
 import CalendarPage from './components/charts/calendar/CalendarPage'
 import Calendar from './components/charts/calendar/Calendar'
-import CalendarAPI from './components/charts/calendar/CalendarAPI'
+import CalendarCanvas from './components/charts/calendar/CalendarCanvas'
+// import CalendarAPI from './components/charts/calendar/CalendarAPI'
 import ChordPage from './components/charts/chord/ChordPage'
 import Chord from './components/charts/chord/Chord'
 import ChordCanvas from './components/charts/chord/ChordCanvas'
@@ -179,12 +180,20 @@ const SITEMAP = [
                         tags: ['svg', 'isomorphic'],
                     },
                     {
-                        className: 'api',
-                        path: '/api',
-                        label: 'Calendar API',
-                        component: CalendarAPI,
-                        tags: ['api'],
+                        className: 'canvas',
+                        path: '/canvas',
+                        label: 'CalendarCanvas',
+                        component: CalendarCanvas,
+                        tags: ['canvas'],
                     },
+                    // @todo: update calendar API
+                    // {
+                    //     className: 'api',
+                    //     path: '/api',
+                    //     label: 'Calendar API',
+                    //     component: CalendarAPI,
+                    //     tags: ['api'],
+                    // },
                 ],
             },
             {
diff --git a/website/src/components/charts/calendar/Calendar.js b/website/src/components/charts/calendar/Calendar.js
index 50e47600f..f2dce3cb9 100644
--- a/website/src/components/charts/calendar/Calendar.js
+++ b/website/src/components/charts/calendar/Calendar.js
@@ -18,14 +18,12 @@ import ComponentPropsDocumentation from '../../properties/ComponentPropsDocument
 import nivoTheme from '../../../nivoTheme'
 import properties from './props'
 import propsMapper from './propsMapper'
-import config from '../../../config'
+// import config from '../../../config'
 
 const Tooltip = data => {
     /* return custom tooltip */
 }
 
-const colors = ['#61cdbb', '#97e3d5', '#e8c1a0', '#f47560']
-
 export default class Calendar extends Component {
     state = {
         settings: {
@@ -33,7 +31,7 @@ export default class Calendar extends Component {
             to: '2016-07-12',
 
             emptyColor: '#eeeeee',
-            colors,
+            colors: ['#61cdbb', '#97e3d5', '#e8c1a0', '#f47560'],
             minValue: 0,
             maxValue: 'auto',
 
@@ -64,7 +62,7 @@ export default class Calendar extends Component {
 
             legends: [
                 {
-                    anchor: 'bottom-right',
+                    anchor: 'bottom',
                     direction: 'row',
                     translateY: 36,
                     itemCount: 4,
@@ -105,7 +103,7 @@ export default class Calendar extends Component {
         )
 
         const header = (
-            <ChartHeader chartClass="Calendar" tags={['calendar', 'react', 'isomorphic']} />
+            <ChartHeader chartClass="Calendar" tags={['calendar', 'svg', 'isomorphic']} />
         )
 
         const description = (
@@ -113,18 +111,15 @@ export default class Calendar extends Component {
                 <p className="description">
                     This component is heavily inspired by{' '}
                     <a
-                        href="https://bl.ocks.org/mbostock/4063318"
+                        href="https://observablehq.com/@d3/calendar-view"
                         target="_blank"
                         rel="noopener noreferrer"
                     >
-                        this block
+                        this demo
                     </a>
                     .
                 </p>
-                <p>
-                    This component is suitable for isomorphic rendering but require to use the{' '}
-                    <code>Calendar</code> component not the <code>ResponsiveCalendar</code> one.
-                </p>
+                {/*
                 <p className="description">
                     This component is available in the{' '}
                     <a
@@ -145,6 +140,12 @@ export default class Calendar extends Component {
                     </a>
                     .
                 </p>
+                */}
+                <p className="description">
+                    The responsive alternative of this component is <code>ResponsiveCalendar</code>,
+                    it also offers a canvas implementations, see{' '}
+                    <Link to="/calendar/canvas">CalendarCanvas</Link>.
+                </p>
                 <p className="description">
                     See the <Link to="/guides/legends">dedicated guide</Link> on how to setup
                     legends for this component.
diff --git a/website/src/components/charts/calendar/CalendarCanvas.js b/website/src/components/charts/calendar/CalendarCanvas.js
new file mode 100644
index 000000000..413763e73
--- /dev/null
+++ b/website/src/components/charts/calendar/CalendarCanvas.js
@@ -0,0 +1,166 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import MediaQuery from 'react-responsive'
+import ChartHeader from '../../ChartHeader'
+import ChartTabs from '../../ChartTabs'
+import generateCode from '../../../lib/generateChartCode'
+import CalendarControls from './CalendarControls'
+import { ResponsiveCalendarCanvas, CalendarCanvasDefaultProps } from '@nivo/calendar'
+import ComponentPropsDocumentation from '../../properties/ComponentPropsDocumentation'
+import nivoTheme from '../../../nivoTheme'
+import properties from './props'
+import propsMapper from './propsMapper'
+
+const Tooltip = data => {
+    /* return custom tooltip */
+}
+
+export default class CalendarCanvas extends Component {
+    state = {
+        settings: {
+            pixelRatio: window && window.devicePixelRatio ? window.devicePixelRatio : 1,
+
+            from: '2013-03-01',
+            to: '2019-07-12',
+
+            emptyColor: '#eeeeee',
+            colors: ['#61cdbb', '#97e3d5', '#e8c1a0', '#f47560'],
+            minValue: 0,
+            maxValue: 'auto',
+
+            margin: {
+                top: 40,
+                right: 40,
+                bottom: 50,
+                left: 40,
+            },
+            direction: 'vertical',
+
+            yearSpacing: 30,
+            yearLegendPosition: 'before',
+            yearLegendOffset: 10,
+
+            monthBorderWidth: 2,
+            monthBorderColor: '#ffffff',
+            monthLegendPosition: 'before',
+            monthLegendOffset: 10,
+
+            daySpacing: 0,
+            dayBorderWidth: 2,
+            dayBorderColor: '#ffffff',
+
+            isInteractive: true,
+            'custom tooltip example': false,
+            tooltip: null,
+
+            legends: [
+                {
+                    anchor: 'bottom',
+                    direction: 'row',
+                    translateY: 40,
+                    itemCount: 4,
+                    itemWidth: 34,
+                    itemHeight: 36,
+                    itemDirection: 'top-to-bottom',
+                },
+            ],
+
+            theme: {
+                ...nivoTheme,
+                labels: {
+                    ...nivoTheme.labels,
+                    text: {
+                        ...nivoTheme.labels.text,
+                        fontSize: 10,
+                    },
+                },
+            },
+        },
+    }
+
+    handleSettingsUpdate = settings => {
+        this.setState({ settings })
+    }
+
+    handleNodeClick = (node, event) => {
+        alert(`${node.day}: ${node.value}\nclicked at x: ${event.clientX}, y: ${event.clientY}`)
+    }
+
+    render() {
+        const { data } = this.props
+        const { settings } = this.state
+
+        const mappedSettings = propsMapper(settings)
+
+        const code = generateCode(
+            'ResponsiveCalendarCanvas',
+            {
+                ...mappedSettings,
+                tooltip: mappedSettings.tooltip ? Tooltip : undefined,
+            },
+            {
+                pkg: '@nivo/calendar',
+                defaults: CalendarCanvasDefaultProps,
+            }
+        )
+
+        const header = <ChartHeader chartClass="CalendarCanvas" tags={['calendar', 'canvas']} />
+
+        const description = (
+            <div className="chart-description">
+                <p className="description">
+                    A variation around the <Link to="/calendar">Calendar</Link> component. Well
+                    suited for large data sets as it does not impact DOM tree depth, however you'll
+                    lose the isomorphic rendering ability.
+                </p>
+                <p className="description">
+                    The responsive alternative of this component is{' '}
+                    <code>ResponsiveCalendarCanvas</code>.
+                </p>
+            </div>
+        )
+
+        return (
+            <div className="page_content grid">
+                <div className="chart-page_main">
+                    <MediaQuery query="(max-width: 1000px)">
+                        {header}
+                        {description}
+                    </MediaQuery>
+                    <ChartTabs chartClass="calendar" code={code} data={data}>
+                        <ResponsiveCalendarCanvas
+                            from={settings.from}
+                            to={settings.to}
+                            data={data}
+                            onClick={this.handleNodeClick}
+                            {...mappedSettings}
+                        />
+                    </ChartTabs>
+                    <CalendarControls
+                        scope="CalendarCanvas"
+                        settings={settings}
+                        onChange={this.handleSettingsUpdate}
+                    />
+                    <ComponentPropsDocumentation
+                        chartClass="CalendarCanvas"
+                        properties={properties}
+                    />
+                </div>
+                <div className="chart-page_aside">
+                    <MediaQuery query="(min-width: 1000px)">
+                        {header}
+                        {description}
+                    </MediaQuery>
+                </div>
+            </div>
+        )
+    }
+}
diff --git a/website/src/components/charts/calendar/CalendarControls.js b/website/src/components/charts/calendar/CalendarControls.js
index 42c7389f3..95d6a6983 100644
--- a/website/src/components/charts/calendar/CalendarControls.js
+++ b/website/src/components/charts/calendar/CalendarControls.js
@@ -14,6 +14,7 @@ import properties from './props'
 
 const groupsByScope = {
     Calendar: getPropertiesGroupsControls(properties, 'Calendar'),
+    CalendarCanvas: getPropertiesGroupsControls(properties, 'CalendarCanvas'),
     api: getPropertiesGroupsControls(properties, 'api'),
 }
 
diff --git a/website/src/components/charts/calendar/CalendarPage.js b/website/src/components/charts/calendar/CalendarPage.js
index ff708515d..40fb0e421 100644
--- a/website/src/components/charts/calendar/CalendarPage.js
+++ b/website/src/components/charts/calendar/CalendarPage.js
@@ -15,7 +15,7 @@ class CalendarPage extends Component {
         super(props)
 
         const from = new Date(2015, 3, 1)
-        const to = new Date(2016, 7, 12)
+        const to = new Date(2018, 7, 12)
 
         this.state = {
             from,
diff --git a/website/src/components/charts/calendar/props.js b/website/src/components/charts/calendar/props.js
index b642c48e4..301cc3fea 100644
--- a/website/src/components/charts/calendar/props.js
+++ b/website/src/components/charts/calendar/props.js
@@ -49,8 +49,8 @@ export default [
         docScopes: '*',
         description: (
             <span>
-                not required if using&nbsp;
-                <code>&lt;ResponsiveCalendar&nbsp;/&gt;</code>.
+                not required if using responsive alternative of the component{' '}
+                <code>&lt;Responsive*/&gt;</code>.
             </span>
         ),
         help: 'Chart width.',
@@ -71,8 +71,8 @@ export default [
         docScopes: '*',
         description: (
             <span>
-                not required if using&nbsp;
-                <code>&lt;ResponsiveCalendar&nbsp;/&gt;</code>.
+                not required if using responsive alternative of the component{' '}
+                <code>&lt;Responsive*/&gt;</code>.
             </span>
         ),
         help: 'Chart height.',
@@ -176,6 +176,20 @@ export default [
         controlType: 'colorPicker',
         controlGroup: 'Base',
     },
+    {
+        key: 'pixelRatio',
+        scopes: ['CalendarCanvas'],
+        description: `Adjust pixel ratio, useful for HiDPI screens.`,
+        required: false,
+        default: 'Depends on device',
+        type: `{number}`,
+        controlType: 'range',
+        controlGroup: 'Base',
+        controlOptions: {
+            min: 1,
+            max: 2,
+        },
+    },
     // Years
     {
         key: 'yearSpacing',
@@ -227,6 +241,7 @@ export default [
     // Months
     {
         key: 'monthBorderWidth',
+        scopes: ['Calendar', 'api'],
         description: 'width of month borders.',
         type: '{number}',
         required: false,
@@ -241,6 +256,7 @@ export default [
     },
     {
         key: 'monthBorderColor',
+        scopes: ['Calendar', 'api'],
         description: 'color to use for months border.',
         type: '{string}',
         required: false,
@@ -321,7 +337,7 @@ export default [
     ...marginProperties,
     {
         key: 'isInteractive',
-        scopes: ['Calendar'],
+        scopes: ['Calendar', 'CalendarCanvas'],
         description: 'Enable/disable interactivity.',
         type: '{boolean}',
         required: false,
@@ -331,14 +347,14 @@ export default [
     },
     {
         key: 'onClick',
-        scopes: ['Calendar'],
+        scopes: ['Calendar', 'CalendarCanvas'],
         description: 'onClick handler, it receives clicked day data and mouse event.',
         type: '{Function}',
         required: false,
     },
     {
         key: 'custom tooltip example',
-        scopes: ['Calendar'],
+        scopes: ['Calendar', 'CalendarCanvas'],
         excludeFromDoc: true,
         description: (
             <span>
@@ -352,7 +368,7 @@ export default [
     },
     {
         key: 'tooltip',
-        scopes: ['Calendar'],
+        scopes: ['Calendar', 'CalendarCanvas'],
         type: '{Function}',
         required: false,
         description: (
diff --git a/website/src/components/charts/waffle/WaffleCanvas.js b/website/src/components/charts/waffle/WaffleCanvas.js
index 5fa1d22fa..b28da7240 100644
--- a/website/src/components/charts/waffle/WaffleCanvas.js
+++ b/website/src/components/charts/waffle/WaffleCanvas.js
@@ -198,7 +198,7 @@ export default class WaffleCanvas extends Component {
                 </p>
                 <p className="description">
                     The responsive alternative of this component is{' '}
-                    <code>ResponsiveWaffleHtml</code>, it also offers other implementations, see{' '}
+                    <code>ResponsiveWaffleCanvas</code>, it also offers other implementations, see{' '}
                     <Link to="/waffle">Waffle</Link> and <Link to="/waffle/html">WaffleHtml</Link>.
                 </p>
             </div>
diff --git a/website/src/nivoTheme.js b/website/src/nivoTheme.js
index 192dd3fd5..7704f3741 100644
--- a/website/src/nivoTheme.js
+++ b/website/src/nivoTheme.js
@@ -77,7 +77,7 @@ export const lightTheme = {
     legends: {
         text: {
             fill: '#6a7c89',
-            fontSize: '12px',
+            fontSize: 12,
         },
     },
     tooltip: {