diff --git a/packages/nivo-line/src/canvas/LineChartCanvas.js b/packages/nivo-line/src/canvas/LineChartCanvas.js
index 253491d64..b9019f950 100644
--- a/packages/nivo-line/src/canvas/LineChartCanvas.js
+++ b/packages/nivo-line/src/canvas/LineChartCanvas.js
@@ -115,12 +115,7 @@ class LineChartCanvas extends Component {
         })
     }
 
-    renderLegends(ctx, {
-        lines,
-        legends,
-        width,
-        height,
-    }) {
+    renderLegends(ctx, { lines, legends, width, height }) {
         const legendData = lines.map(line => ({
             label: line.id,
             fill: line.color,
@@ -204,13 +199,14 @@ class LineChartCanvas extends Component {
             axisLeft,
         })
 
-        enableArea && this.renderAreas(this.ctx, {
-            lines,
-            generator: areaGenerator,
-            xScale,
-            yScale,
-            opacity: areaOpacity,
-        })
+        enableArea &&
+            this.renderAreas(this.ctx, {
+                lines,
+                generator: areaGenerator,
+                xScale,
+                yScale,
+                opacity: areaOpacity,
+            })
 
         this.renderLines(this.ctx, {
             lines,
diff --git a/packages/nivo-line/src/compute.js b/packages/nivo-line/src/compute.js
index 42fd9babb..3f08b8d93 100644
--- a/packages/nivo-line/src/compute.js
+++ b/packages/nivo-line/src/compute.js
@@ -20,8 +20,8 @@ import { scalePoint, scaleLinear } from 'd3-scale'
  */
 export const getXScale = (data, width, type) => {
     if (type === 'linear') {
-        const minX = min(data.map(({data}) => min(data.map(d => d.x))))
-        const maxX = max(data.map(({data}) => max(data.map(d => d.x))))
+        const minX = min(data.map(({ data }) => min(data.map(d => d.x))))
+        const maxX = max(data.map(({ data }) => max(data.map(d => d.x))))
 
         return scaleLinear()
             .range([0, width])
diff --git a/packages/nivo-line/src/svg/LineChartSvg.js b/packages/nivo-line/src/svg/LineChartSvg.js
index cec69acd3..8d2dc242e 100644
--- a/packages/nivo-line/src/svg/LineChartSvg.js
+++ b/packages/nivo-line/src/svg/LineChartSvg.js
@@ -152,7 +152,7 @@ const LineChartSvg = ({
                             xScale={xScale}
                             yScale={yScale}
                             curve={curve}
-                            size={lineWidth}
+                            lineWidth={lineWidth}
                             style={{
                                 stroke: line.color,
                             }}
diff --git a/packages/nivo-line/src/svg/LineSvg.js b/packages/nivo-line/src/svg/LineSvg.js
index 3f66c4fdb..fe36423f3 100644
--- a/packages/nivo-line/src/svg/LineSvg.js
+++ b/packages/nivo-line/src/svg/LineSvg.js
@@ -29,7 +29,7 @@ const LineSvg = ({
     generator,
     xScale,
     yScale,
-    size,
+    lineWidth,
     animate,
     motionDamping,
     motionStiffness,
@@ -43,7 +43,7 @@ const LineSvg = ({
     )
 
     if (animate !== true) {
-        return <path d={pathDef} fill="none" strokeWidth={size} {...props} />
+        return <path d={pathDef} fill="none" strokeWidth={lineWidth} {...props} />
     }
 
     const springConfig = {
@@ -57,7 +57,7 @@ const LineSvg = ({
                 d: spring(pathDef, springConfig),
             })}
         >
-            {style => <path d={style.d} fill="none" strokeWidth={size} {...props} />}
+            {style => <path d={style.d} fill="none" strokeWidth={lineWidth} {...props} />}
         </SmartMotion>
     )
 }
@@ -76,7 +76,7 @@ LineSvg.propTypes = {
     curve: curvePropType.isRequired,
 
     // style
-    size: PropTypes.number.isRequired,
+    lineWidth: PropTypes.number.isRequired,
 
     // motion
     ...motionPropTypes,
@@ -87,7 +87,7 @@ const enhance = compose(
         curve: 'linear',
 
         // style
-        size: 2,
+        lineWidth: 2,
 
         // motion
         animate: defaultAnimate,
diff --git a/website/src/SiteMap.js b/website/src/SiteMap.js
index db59181a8..86ed5e33a 100644
--- a/website/src/SiteMap.js
+++ b/website/src/SiteMap.js
@@ -20,6 +20,7 @@ import HeatMapAPI from './components/charts/heatmap/HeatMapAPI'
 import LinePage from './components/charts/line/LinePage'
 import Line from './components/charts/line/Line'
 import LineCanvas from './components/charts/line/LineCanvas'
+import LineComponents from './components/charts/line/Components'
 import LineAPI from './components/charts/line/LineAPI'
 import StreamPage from './components/charts/stream/StreamPage'
 import Stream from './components/charts/stream/Stream'
@@ -237,10 +238,17 @@ const SITEMAP = [
                     {
                         className: 'canvas',
                         path: '/canvas',
-                        label: 'LineCanvas',
+                        label: 'LineChartCanvas',
                         component: LineCanvas,
                         tags: ['canvas'],
                     },
+                    {
+                        className: 'line',
+                        path: '/components',
+                        label: 'Components',
+                        component: LineComponents,
+                        tags: [],
+                    },
                     {
                         className: 'api',
                         path: '/api',
diff --git a/website/src/components/charts/line/Components/LineAreaSvg.js b/website/src/components/charts/line/Components/LineAreaSvg.js
new file mode 100644
index 000000000..c02da2b7d
--- /dev/null
+++ b/website/src/components/charts/line/Components/LineAreaSvg.js
@@ -0,0 +1,59 @@
+/*
+ * 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, { PureComponent } from 'react'
+import ComponentPropsDocumentation from '../../../properties/ComponentPropsDocumentation'
+
+const properties = [
+    {
+        key: 'xScale',
+        type: '{Function}',
+        required: true,
+    },
+    {
+        key: 'yScale',
+        type: '{Function}',
+        required: true,
+    },
+    {
+        key: 'height',
+        type: '{number}',
+        required: true,
+    },
+    {
+        key: 'curve',
+        type: '{string}',
+        required: true,
+    },
+    {
+        key: 'animate',
+        type: '{boolean}',
+        required: true,
+    },
+    {
+        key: 'motionDamping',
+        type: '{number}',
+        required: true,
+    },
+    {
+        key: 'motionStiffness',
+        type: '{number}',
+        required: true,
+    },
+]
+
+export default class LineAreaSvg extends PureComponent {
+    render() {
+        return (
+            <div>
+                <h2>LineAreaSvg</h2>
+                <ComponentPropsDocumentation chartClass="LineAreaSvg" properties={properties} />
+            </div>
+        )
+    }
+}
diff --git a/website/src/components/charts/line/Components/LineSvg.js b/website/src/components/charts/line/Components/LineSvg.js
new file mode 100644
index 000000000..593600fac
--- /dev/null
+++ b/website/src/components/charts/line/Components/LineSvg.js
@@ -0,0 +1,59 @@
+/*
+ * 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, { PureComponent } from 'react'
+import ComponentPropsDocumentation from '../../../properties/ComponentPropsDocumentation'
+
+const properties = [
+    {
+        key: 'xScale',
+        type: '{Function}',
+        required: true,
+    },
+    {
+        key: 'yScale',
+        type: '{Function}',
+        required: true,
+    },
+    {
+        key: 'curve',
+        type: '{string}',
+        required: true,
+    },
+    {
+        key: 'lineWidth',
+        type: '{number}',
+        required: true,
+    },
+    {
+        key: 'animate',
+        type: '{boolean}',
+        required: true,
+    },
+    {
+        key: 'motionDamping',
+        type: '{number}',
+        required: true,
+    },
+    {
+        key: 'motionStiffness',
+        type: '{number}',
+        required: true,
+    },
+]
+
+export default class LineSvg extends PureComponent {
+    render() {
+        return (
+            <div>
+                <h2>LineSvg</h2>
+                <ComponentPropsDocumentation chartClass="LineSvg" properties={properties} />
+            </div>
+        )
+    }
+}
diff --git a/website/src/components/charts/line/Components/index.js b/website/src/components/charts/line/Components/index.js
new file mode 100644
index 000000000..9a5a3d783
--- /dev/null
+++ b/website/src/components/charts/line/Components/index.js
@@ -0,0 +1,29 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * (c) 2016 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 Helmet from 'react-helmet'
+import LineSvg from './LineSvg'
+import LineAreaSvg from './LineAreaSvg'
+
+const Components = () => (
+    <div className="inner-content">
+        <div className="page_content">
+            <Helmet title="@nivo/line low level components documentation" />
+            <div className="chart_header">
+                <h1 className="page_header">
+                    <strong>@nivo/line</strong> low level components
+                </h1>
+            </div>
+            <LineSvg />
+            <LineAreaSvg />
+        </div>
+    </div>
+)
+
+export default Components
diff --git a/website/src/components/charts/line/Line/index.js b/website/src/components/charts/line/Line/index.js
index 9c22d43e1..1d4929ecf 100644
--- a/website/src/components/charts/line/Line/index.js
+++ b/website/src/components/charts/line/Line/index.js
@@ -65,7 +65,8 @@ export default class LinePage extends Component {
                 </p>
                 <p className="description">
                     The responsive alternative of this component is{' '}
-                    <code>ResponsiveLineChartSvg</code>.
+                    <code>ResponsiveLineChartSvg</code>, it also offers another implementation, see{' '}
+                    <Link to="/line/canvas">LineChartCanvas</Link>.
                 </p>
                 <p className="description">
                     This component is available in the{' '}
@@ -93,6 +94,17 @@ export default class LinePage extends Component {
                         the storybook
                     </a>.
                 </p>
+                <p>
+                    For more advanced features (eg.{' '}
+                    <a
+                        href={`${config.storybookUrl}?selectedKind=Line&selectedStory=default`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        dual y axis
+                    </a>) or mixing with other chart types, you can also build your own chart using{' '}
+                    <code>@nivo/line</code> <Link to="/line/components">low level components</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/line/LineCanvas/index.js b/website/src/components/charts/line/LineCanvas/index.js
index c7daed8f8..a1bedac44 100644
--- a/website/src/components/charts/line/LineCanvas/index.js
+++ b/website/src/components/charts/line/LineCanvas/index.js
@@ -40,14 +40,14 @@ export default class LinePage extends Component {
 
         const mappedSettings = propsMapper(settings)
 
-        const code = generateCode('ResponsiveLine', mappedSettings, {
+        const code = generateCode('ResponsiveLineChartCanvas', mappedSettings, {
             pkg: '@nivo/line',
             defaults: LineDefaultProps,
         })
 
         const header = (
             <ChartHeader
-                chartClass="Line"
+                chartClass="LineChartCanvas"
                 tags={['basic', 'isomorphic', 'api']}
                 diceRoll={this.diceRoll}
             />
@@ -55,46 +55,15 @@ export default class LinePage extends Component {
 
         const description = (
             <div className="chart-description">
-                <p className="description">Line chart with stacking ability.</p>
-                <p>
-                    Given an array of data series having an id and a nested array of points (with x,
-                    y properties), it will compute the line for each data serie.&nbsp; If stacked is
-                    true, y values will be automatically aggregated.<br />
-                    This component also accept empty values, but please note that they must be
-                    explicitly <i>defined</i> though, eg. <code>{'{ x: 10, y: null }'}</code>.
-                </p>
-                <p className="description">
-                    The responsive alternative of this component is <code>ResponsiveLine</code>.
-                </p>
                 <p className="description">
-                    This component is available in the{' '}
-                    <a
-                        href="https://github.com/plouc/nivo-api"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        nivo-api
-                    </a>, see{' '}
-                    <a
-                        href={`${config.nivoApiUrl}/samples/line.svg`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        sample
-                    </a>{' '}
-                    or <Link to="/line/api">try it using the API client</Link>. You can also see
-                    more example usages in{' '}
-                    <a
-                        href={`${config.storybookUrl}?selectedKind=Line&selectedStory=default`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        the storybook
-                    </a>.
+                    A variation around the <Link to="/line">LineChartSvg</Link> component. Well
+                    suited for large data sets as it does not impact DOM tree depth and does not
+                    involve React diffing stuff for children (not that useful when using canvas),
+                    however you'll lose the isomorphic ability and transitions.
                 </p>
                 <p className="description">
-                    See the <Link to="/guides/legends">dedicated guide</Link> on how to setup
-                    legends for this component.
+                    The responsive alternative of this component is{' '}
+                    <code>ResponsiveLineChartCanvas</code>.
                 </p>
             </div>
         )