diff --git a/site/js/site.js b/site/js/site.js
index 1837bd4..450a219 100644
--- a/site/js/site.js
+++ b/site/js/site.js
@@ -6,7 +6,7 @@ function onSiteDependenciesLoaded() {
 
   functionPlot({
     target: '#description-sample',
-    yAxis: { domain: [-1, 9] },
+    y: { domain: [-1, 9] },
     tip: {
       renderer: function () {}
     },
@@ -24,8 +24,8 @@ function onSiteDependenciesLoaded() {
 
   functionPlot({
     target: '#description-sin-exp-x-naive',
-    yAxis: { domain: [-4, 4] },
-    xAxis: { domain: [-2, 6] },
+    y: { domain: [-4, 4] },
+    x: { domain: [-2, 6] },
     tip: {
       renderer: function () {}
     },
@@ -40,8 +40,8 @@ function onSiteDependenciesLoaded() {
 
   functionPlot({
     target: '#description-sin-exp-x',
-    yAxis: { domain: [-4, 4] },
-    xAxis: { domain: [-2, 6] },
+    y: { domain: [-4, 4] },
+    x: { domain: [-2, 6] },
     tip: {
       renderer: function () {}
     },
@@ -88,12 +88,12 @@ function onSiteDependenciesLoaded() {
    * - `title`: the title of the graph
    * - `width`: width of the graph
    * - `height`: height of the graph
-   * - `xAxis`:
+   * - `x`:
    *  - `type`: the type of scale for this axis, possible values `linear|log`
    *    (default value: `'linear'`)
    *  - `label`: x axis label
    *  - `domain`: x axis possible values (see examples below)
-   * - `yAxis`: same options as `xAxis`
+   * - `y`: same options as `x`
    * - `disableZoom`: true to disable translation/scaling on the graph
    */
   functionPlot({
@@ -102,11 +102,11 @@ function onSiteDependenciesLoaded() {
     width: 580,
     height: 400,
     disableZoom: true,
-    xAxis: {
+    x: {
       label: 'x - axis',
       domain: [-6, 6]
     },
-    yAxis: {
+    y: {
       label: 'y - axis'
     },
     data: [
@@ -123,10 +123,10 @@ function onSiteDependenciesLoaded() {
    */
   functionPlot({
     target: '#grid',
-    xAxis: {
+    x: {
       label: 'real'
     },
-    yAxis: {
+    y: {
       label: 'imaginary'
     },
     grid: true,
@@ -151,8 +151,8 @@ function onSiteDependenciesLoaded() {
    */
   functionPlot({
     target: '#domain',
-    yAxis: { domain: [-1, 1] },
-    xAxis: { domain: [8, 24] },
+    y: { domain: [-1, 1] },
+    x: { domain: [8, 24] },
     data: [
       {
         fn: 'sin(x)'
@@ -204,7 +204,7 @@ function onSiteDependenciesLoaded() {
    */
   functionPlot({
     target: '#annotations',
-    yAxis: { domain: [-1, 9] },
+    y: { domain: [-1, 9] },
     data: [
       {
         fn: 'x^2'
@@ -238,7 +238,7 @@ function onSiteDependenciesLoaded() {
    */
   functionPlot({
     target: '#closed',
-    xAxis: { domain: [-2, 12] },
+    x: { domain: [-2, 12] },
     data: [
       {
         fn: '3 + sin(x)',
@@ -252,16 +252,16 @@ function onSiteDependenciesLoaded() {
    * ### Logarithmic scales
    *
    * The type of each axis can be configured to be logarithmic by specifying the
-   * type of axis to `log` inside the  `xAxis` option, note how this
+   * type of axis to `log` inside the  `x` option, note how this
    * change affects the way the functions are sampled
    */
   functionPlot({
     target: '#logarithmic',
-    xAxis: {
+    x: {
       type: 'log',
       domain: [0.01, 1]
     },
-    yAxis: {
+    y: {
       domain: [-100, 100]
     },
     grid: true,
@@ -391,8 +391,8 @@ function onSiteDependenciesLoaded() {
    */
   functionPlot({
     target: '#secant',
-    yAxis: { domain: [-1, 9] },
-    xAxis: { domain: [-3, 3] },
+    y: { domain: [-1, 9] },
+    x: { domain: [-3, 3] },
     data: [
       {
         fn: 'x^2',
@@ -448,7 +448,7 @@ function onSiteDependenciesLoaded() {
    */
   functionPlot({
     target: '#derivative',
-    yAxis: { domain: [-1, 9] },
+    y: { domain: [-1, 9] },
     data: [
       {
         fn: 'x^2',
@@ -469,7 +469,7 @@ function onSiteDependenciesLoaded() {
    */
   functionPlot({
     target: '#derivative-update',
-    yAxis: { domain: [-1, 9] },
+    y: { domain: [-1, 9] },
     data: [
       {
         fn: 'x^2',
@@ -520,13 +520,13 @@ function onSiteDependenciesLoaded() {
   a = functionPlot({
     target: '#linked-a',
     height: 250,
-    xAxis: { domain: [-10, 10] },
+    x: { domain: [-10, 10] },
     data: [{ fn: 'x * x' }]
   })
   b = functionPlot({
     target: '#linked-b',
     height: 250,
-    xAxis: { domain: [-10, 10] },
+    x: { domain: [-10, 10] },
     data: [{ fn: '2 * x' }]
   })
   a.addLink(b)
@@ -546,19 +546,19 @@ function onSiteDependenciesLoaded() {
   a = functionPlot({
     target: '#linked-a-multiple',
     height: 250,
-    xAxis: { domain: [-10, 10] },
+    x: { domain: [-10, 10] },
     data: [{ fn: 'x * x' }]
   })
   b = functionPlot({
     target: '#linked-b-multiple',
     height: 250,
-    xAxis: { domain: [-10, 10] },
+    x: { domain: [-10, 10] },
     data: [{ fn: '2 * x' }]
   })
   c = functionPlot({
     target: '#linked-c-multiple',
     height: 250,
-    xAxis: { domain: [-10, 10] },
+    x: { domain: [-10, 10] },
     data: [{ fn: '2' }]
   })
   a.addLink(b, c)
@@ -675,8 +675,8 @@ function onSiteDependenciesLoaded() {
    */
   functionPlot({
     target: '#circle-explicit',
-    yAxis: { domain: [-1.897959183, 1.897959183] },
-    xAxis: { domain: [-3, 3] },
+    y: { domain: [-1.897959183, 1.897959183] },
+    x: { domain: [-3, 3] },
     data: [{ fn: 'sqrt(1 - x * x)' }, { fn: '-sqrt(1 - x * x)' }]
   })
 
@@ -708,8 +708,8 @@ function onSiteDependenciesLoaded() {
    */
   functionPlot({
     target: '#parametric-circle',
-    yAxis: { domain: [-1.897959183, 1.897959183] },
-    xAxis: { domain: [-3, 3] },
+    y: { domain: [-1.897959183, 1.897959183] },
+    x: { domain: [-3, 3] },
     data: [
       {
         x: 'cos(t)',
@@ -734,8 +734,8 @@ function onSiteDependenciesLoaded() {
    */
   functionPlot({
     target: '#butterfly-curve',
-    yAxis: { domain: [-4.428571429, 4.428571429] },
-    xAxis: { domain: [-7, 7] },
+    y: { domain: [-4.428571429, 4.428571429] },
+    x: { domain: [-7, 7] },
     data: [
       {
         x: 'sin(t) * (exp(cos(t)) - 2 cos(4t) - sin(t/12)^5)',
@@ -774,8 +774,8 @@ function onSiteDependenciesLoaded() {
    */
   functionPlot({
     target: '#polar-circle',
-    yAxis: { domain: [-1.897959183, 1.897959183] },
-    xAxis: { domain: [-3, 3] },
+    y: { domain: [-1.897959183, 1.897959183] },
+    x: { domain: [-3, 3] },
     data: [
       {
         r: 'r0 * cos(theta - gamma) + sqrt(a^2 - r0^2 * (sin(theta - gamma))^2)',
@@ -801,8 +801,8 @@ function onSiteDependenciesLoaded() {
    */
   functionPlot({
     target: '#polar-complex',
-    yAxis: { domain: [-1.897959183, 1.897959183] },
-    xAxis: { domain: [-3, 3] },
+    y: { domain: [-1.897959183, 1.897959183] },
+    x: { domain: [-3, 3] },
     data: [
       {
         r: '2 * sin(4 theta)',
@@ -838,8 +838,8 @@ function onSiteDependenciesLoaded() {
    */
   functionPlot({
     target: '#circle-implicit',
-    yAxis: { domain: [-1.897959183, 1.897959183] },
-    xAxis: { domain: [-3, 3] },
+    y: { domain: [-1.897959183, 1.897959183] },
+    x: { domain: [-3, 3] },
     data: [
       {
         fn: 'x * x + y * y - 1',
@@ -863,7 +863,7 @@ function onSiteDependenciesLoaded() {
   functionPlot({
     target: '#implicit-complex',
     yAxis: { domain: [-3.795918366, 3.795918366] },
-    xAxis: { domain: [-6, 6] },
+    x: { domain: [-6, 6] },
     disableZoom: true,
     data: [
       {
@@ -928,7 +928,7 @@ function onSiteDependenciesLoaded() {
    */
   functionPlot({
     target: '#vector',
-    xAxis: { domain: [-3, 8] },
+    x: { domain: [-3, 8] },
     grid: true,
     data: [
       {
diff --git a/site/partials/examples.html b/site/partials/examples.html
index 7bcb875..9c98f57 100644
--- a/site/partials/examples.html
+++ b/site/partials/examples.html
@@ -23,12 +23,12 @@
 <li><code>title</code>: the title of the graph</li>
 <li><code>width</code>: width of the graph</li>
 <li><code>height</code>: height of the graph</li>
-<li><code>xAxis</code>:</li>
+<li><code>x</code>:</li>
 <li><code>type</code>: the type of scale for this axis, possible values <code>linear|log</code> 
 (default value: <code>'linear'</code>)</li>
 <li><code>label</code>: x axis label</li>
 <li><code>domain</code>: x axis possible values (see examples below)</li>
-<li><code>yAxis</code>: same options as <code>xAxis</code></li>
+<li><code>y</code>: same options as <code>x</code></li>
 <li><code>disableZoom</code>: true to disable translation/scaling on the graph</li>
 </ul></div><div class="code"><pre><code class="javascript">functionPlot({
   title: 'y = x * x',
@@ -36,11 +36,11 @@
   width: 580,
   height: 400,
   disableZoom: true,
-  xAxis: {
+  x: {
     label: 'x - axis',
     domain: [-6, 6]
   },
-  yAxis: {
+  y: {
     label: 'y - axis'
   },
   data: [
@@ -51,10 +51,10 @@
 })</code></pre></div></div><div class="col-md-6 center-block demos"><span class="graph" id="quadratic-with-options"></span></div></div></div></div><div class="example"><div class="container"><div class="row"><div class="col-md-6"><div class="comment"><h3>Grid</h3>
 <p>Set <code>grid: true</code> in the options sent to function plot</p></div><div class="code"><pre><code class="javascript">functionPlot({
   target: '#grid',
-  xAxis: {
+  x: {
     label: 'real'
   },
-  yAxis: {
+  y: {
     label: 'imaginary'
   },
   grid: true,
@@ -72,8 +72,8 @@
 <p>NOTE: The origin is at the center of the graph by default so $yDiff$ is split in half and distributed 
 evenly to the $\pm y$ axis</p></div><div class="code"><pre><code class="javascript">functionPlot({
   target: '#domain',
-  yAxis: { domain: [-1, 1] },
-  xAxis: { domain: [8, 24] },
+  y: { domain: [-1, 1] },
+  x: { domain: [8, 24] },
   data: [
     {
       fn: 'sin(x)'
@@ -109,7 +109,7 @@
 <p>NOTE: either <code>x</code> or <code>y</code> need to be set on the object, setting both of them 
 will raise an exception</p></div><div class="code"><pre><code class="javascript">functionPlot({
   target: '#annotations',
-  yAxis: { domain: [-1, 9] },
+  y: { domain: [-1, 9] },
   data: [
     {
       fn: 'x^2'
@@ -138,7 +138,7 @@
 <li><code>closed</code>: true to render a closed path, <code>y0</code> will always be 0 and <code>y1</code> will be $fn(x)$</li>
 </ul></div><div class="code"><pre><code class="javascript">functionPlot({
   target: '#closed',
-  xAxis: { domain: [-2, 12] },
+  x: { domain: [-2, 12] },
   data: [
     {
       fn: '3 + sin(x)',
@@ -148,14 +148,14 @@
   ]
 })</code></pre></div></div><div class="col-md-6 center-block demos"><span class="graph" id="closed"></span></div></div></div></div><div class="example"><div class="container"><div class="row"><div class="col-md-6"><div class="comment"><h3>Logarithmic scales</h3>
 <p>The type of each axis can be configured to be logarithmic by specifying the 
-type of axis to <code>log</code> inside the  <code>xAxis</code> option, note how this 
+type of axis to <code>log</code> inside the  <code>x</code> option, note how this 
 change affects the way the functions are sampled</p></div><div class="code"><pre><code class="javascript">functionPlot({
   target: '#logarithmic',
-  xAxis: {
+  x: {
     type: 'log',
     domain: [0.01, 1]
   },
-  yAxis: {
+  y: {
     domain: [-100, 100]
   },
   grid: true,
@@ -252,8 +252,8 @@
 position of the mouse</li>
 </ul></div><div class="code"><pre><code class="javascript">functionPlot({
   target: '#secant',
-  yAxis: { domain: [-1, 9] },
-  xAxis: { domain: [-3, 3] },
+  y: { domain: [-1, 9] },
+  x: { domain: [-3, 3] },
   data: [
     {
       fn: 'x^2',
@@ -297,7 +297,7 @@
 position of the mouse</li>
 </ul></div><div class="code"><pre><code class="javascript">functionPlot({
   target: '#derivative',
-  yAxis: { domain: [-1, 9] },
+  y: { domain: [-1, 9] },
   data: [
     {
       fn: 'x^2',
@@ -312,7 +312,7 @@
 inside the canvas (let $x_0$ be the mouse's abscissa then the tangent line to the point 
 $(x_0, f(x_0))$ is computed whenever the position of the mouse changes)</p></div><div class="code"><pre><code class="javascript">functionPlot({
   target: '#derivative-update',
-  yAxis: { domain: [-1, 9] },
+  y: { domain: [-1, 9] },
   data: [
     {
       fn: 'x^2',
@@ -351,13 +351,13 @@
 performed on <code>b</code></p></div><div class="code"><pre><code class="javascript">a = functionPlot({
   target: '#linked-a',
   height: 250,
-  xAxis: { domain: [-10, 10] },
+  x: { domain: [-10, 10] },
   data: [{ fn: 'x * x' }]
 })
 b = functionPlot({
   target: '#linked-b',
   height: 250,
-  xAxis: { domain: [-10, 10] },
+  x: { domain: [-10, 10] },
   data: [{ fn: '2 * x' }]
 })
 a.addLink(b)</code></pre></div></div><div class="col-md-6 center-block demos"><span class="graph" id="linked-a"></span><span class="graph" id="linked-b"></span></div></div></div></div><div class="example"><div class="container"><div class="row"><div class="col-md-6"><div class="comment"><h3>Linked graphs <div class="small">Multiple</div></h3>
@@ -371,19 +371,19 @@
 </ul></div><div class="code"><pre><code class="javascript">a = functionPlot({
   target: '#linked-a-multiple',
   height: 250,
-  xAxis: { domain: [-10, 10] },
+  x: { domain: [-10, 10] },
   data: [{ fn: 'x * x' }]
 })
 b = functionPlot({
   target: '#linked-b-multiple',
   height: 250,
-  xAxis: { domain: [-10, 10] },
+  x: { domain: [-10, 10] },
   data: [{ fn: '2 * x' }]
 })
 c = functionPlot({
   target: '#linked-c-multiple',
   height: 250,
-  xAxis: { domain: [-10, 10] },
+  x: { domain: [-10, 10] },
   data: [{ fn: '2' }]
 })
 a.addLink(b, c)
@@ -467,8 +467,8 @@
 y = \sqrt{1 - x^2} \quad and \quad y = -\sqrt{1 - x^2} 
 $$</p></div><div class="code"><pre><code class="javascript">functionPlot({
   target: '#circle-explicit',
-  yAxis: { domain: [-1.897959183, 1.897959183] },
-  xAxis: { domain: [-3, 3] },
+  y: { domain: [-1.897959183, 1.897959183] },
+  x: { domain: [-3, 3] },
   data: [{ fn: 'sqrt(1 - x * x)' }, { fn: '-sqrt(1 - x * x)' }]
 })</code></pre></div></div><div class="col-md-6 center-block demos"><span class="graph" id="circle-explicit"></span></div></div></div></div><div class="example"><div class="container"><div class="row"><div class="col-md-6"><div class="comment"><h3>Parametric equations</h3>
 <p>The original equation of the circle $x^2 + y^2 = 1$ can be parametrized as</p>
@@ -491,8 +491,8 @@
 instead of rectangles generated by the interval-arithmetic sampler set 
 <code>graphType: 'polyline'</code> which uses the normal single point evaluation</p></div><div class="code"><pre><code class="javascript">functionPlot({
   target: '#parametric-circle',
-  yAxis: { domain: [-1.897959183, 1.897959183] },
-  xAxis: { domain: [-3, 3] },
+  y: { domain: [-1.897959183, 1.897959183] },
+  x: { domain: [-3, 3] },
   data: [
     {
       x: 'cos(t)',
@@ -509,8 +509,8 @@
 y = cos(t)(e^{cos(t)} - 2cos(4t) - sin(\tfrac{t}{12})^5) 
 $$</p></div><div class="code"><pre><code class="javascript">functionPlot({
   target: '#butterfly-curve',
-  yAxis: { domain: [-4.428571429, 4.428571429] },
-  xAxis: { domain: [-7, 7] },
+  y: { domain: [-4.428571429, 4.428571429] },
+  x: { domain: [-7, 7] },
   data: [
     {
       x: 'sin(t) * (exp(cos(t)) - 2 cos(4t) - sin(t/12)^5)',
@@ -540,8 +540,8 @@
 instead of rectangles generated by the interval-arithmetic sampler set 
 <code>graphType: 'polyline'</code> which uses the normal single point evaluation</p></div><div class="code"><pre><code class="javascript">functionPlot({
   target: '#polar-circle',
-  yAxis: { domain: [-1.897959183, 1.897959183] },
-  xAxis: { domain: [-3, 3] },
+  y: { domain: [-1.897959183, 1.897959183] },
+  x: { domain: [-3, 3] },
   data: [
     {
       r: 'r0 * cos(theta - gamma) + sqrt(a^2 - r0^2 * (sin(theta - gamma))^2)',
@@ -560,8 +560,8 @@
 r = 2 sin(4 \theta) 
 $$</p></div><div class="code"><pre><code class="javascript">functionPlot({
   target: '#polar-complex',
-  yAxis: { domain: [-1.897959183, 1.897959183] },
-  xAxis: { domain: [-3, 3] },
+  y: { domain: [-1.897959183, 1.897959183] },
+  x: { domain: [-3, 3] },
   data: [
     {
       r: '2 * sin(4 theta)',
@@ -587,8 +587,8 @@
 </ul>
 <p>NOTE: implicit functions can only be rendered with interval-arithmetic</p></div><div class="code"><pre><code class="javascript">functionPlot({
   target: '#circle-implicit',
-  yAxis: { domain: [-1.897959183, 1.897959183] },
-  xAxis: { domain: [-3, 3] },
+  y: { domain: [-1.897959183, 1.897959183] },
+  x: { domain: [-3, 3] },
   data: [
     {
       fn: 'x * x + y * y - 1',
@@ -604,7 +604,7 @@
 of functions, however for a finite region of the plane a finite number of functions suffice</p></div><div class="code"><pre><code class="javascript">functionPlot({
   target: '#implicit-complex',
   yAxis: { domain: [-3.795918366, 3.795918366] },
-  xAxis: { domain: [-6, 6] },
+  x: { domain: [-6, 6] },
   disableZoom: true,
   data: [
     {
@@ -658,7 +658,7 @@
 <li><code>graphType: 'polyline'</code> to render a nice segment from <code>offset</code> to <code>offset + vector</code></li>
 </ul></div><div class="code"><pre><code class="javascript">functionPlot({
   target: '#vector',
-  xAxis: { domain: [-3, 8] },
+  x: { domain: [-3, 8] },
   grid: true,
   data: [
     {
diff --git a/site/playground.html b/site/playground.html
index 60376a6..1d4cb17 100644
--- a/site/playground.html
+++ b/site/playground.html
@@ -12,10 +12,17 @@
         color: black;
         font-size: 14px;
       }
+      #playground-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
     </style>
   </head>
   <body>
-    <div id="playground"></div>
+    <div id="playground-wrapper">
+      <div id="playground"></div>
+    </div>
     <script src="./function-plot.js"></script>
     <script>
       functionPlot.withWebWorkers(8)
diff --git a/src/chart.ts b/src/chart.ts
index 3c2cc83..c312a7d 100644
--- a/src/chart.ts
+++ b/src/chart.ts
@@ -7,7 +7,7 @@ import { select as d3Select, pointer as d3Pointer } from 'd3-selection'
 import { interpolateRound as d3InterpolateRound } from 'd3-interpolate'
 import EventEmitter from 'events'
 
-import { FunctionPlotOptions, FunctionPlotDatum, FunctionPlotScale } from './types.js'
+import { FunctionPlotOptions, FunctionPlotDatum, FunctionPlotScale, FunctionPlotOptionsAxis } from './types.js'
 
 import annotations from './helpers/annotations.js'
 import mousetip from './tip.js'
@@ -128,7 +128,7 @@ export class Chart extends EventEmitter.EventEmitter {
     const n = Math.random()
     const letter = String.fromCharCode(Math.floor(n * 26) + 97)
     this.options = options
-    this.id = letter + n.toString(16).substr(2)
+    this.id = letter + n.toString(16).substring(2)
     this.options.id = this.id
     this.markerId = this.id + '-marker'
     Chart.cache[this.id] = this
@@ -208,13 +208,13 @@ export class Chart extends EventEmitter.EventEmitter {
       return (self.meta.height * xDiff) / self.meta.width
     }
 
-    this.options.xAxis = this.options.xAxis || {}
-    this.options.xAxis.type = this.options.xAxis.type || 'linear'
+    this.options.x = this.options.x || {}
+    this.options.x.type = this.options.x.type || 'linear'
 
-    this.options.yAxis = this.options.yAxis || {}
-    this.options.yAxis.type = this.options.yAxis.type || 'linear'
+    this.options.y = this.options.y || {}
+    this.options.y.type = this.options.y.type || 'linear'
 
-    const xDomain = (this.meta.xDomain = (function (axis) {
+    const xDomain = (this.meta.xDomain = (function (axis: FunctionPlotOptionsAxis) {
       if (axis.domain) {
         return axis.domain
       }
@@ -225,9 +225,9 @@ export class Chart extends EventEmitter.EventEmitter {
         return [1, 10]
       }
       throw Error('axis type ' + axis.type + ' unsupported')
-    })(this.options.xAxis))
+    })(this.options.x))
 
-    const yDomain = (this.meta.yDomain = (function (axis) {
+    const yDomain = (this.meta.yDomain = (function (axis: FunctionPlotOptionsAxis) {
       if (axis.domain) {
         return axis.domain
       }
@@ -238,23 +238,23 @@ export class Chart extends EventEmitter.EventEmitter {
         return [1, 10]
       }
       throw Error('axis type ' + axis.type + ' unsupported')
-    })(this.options.yAxis))
+    })(this.options.y))
 
     if (!this.meta.xScale) {
-      this.meta.xScale = getD3Scale(this.options.xAxis.type)()
+      this.meta.xScale = getD3Scale(this.options.x.type)()
     }
     this.meta.xScale
       .domain(xDomain)
       // @ts-ignore domain always returns typeof this.meta.xDomain
-      .range(this.options.xAxis.invert ? [this.meta.width, 0] : [0, this.meta.width])
+      .range(this.options.x.invert ? [this.meta.width, 0] : [0, this.meta.width])
 
     if (!this.meta.yScale) {
-      this.meta.yScale = getD3Scale(this.options.yAxis.type)()
+      this.meta.yScale = getD3Scale(this.options.y.type)()
     }
     this.meta.yScale
       .domain(yDomain)
       // @ts-ignore domain always returns typeof this.meta.yDomain
-      .range(this.options.yAxis.invert ? [0, this.meta.height] : [this.meta.height, 0])
+      .range(this.options.y.invert ? [0, this.meta.height] : [this.meta.height, 0])
 
     if (!this.meta.xAxis) {
       this.meta.xAxis = d3AxisBottom(this.meta.xScale)
@@ -421,7 +421,7 @@ export class Chart extends EventEmitter.EventEmitter {
       .merge(canvas.enter)
       .selectAll('text.x.axis-label')
       .data(function (d: FunctionPlotOptions) {
-        return [d.xAxis.label].filter(Boolean)
+        return [d.x.label].filter(Boolean)
       })
     // prettier-ignore
     const xLabelEnter = xLabel.enter().append('text')
@@ -442,7 +442,7 @@ export class Chart extends EventEmitter.EventEmitter {
       .merge(canvas.enter)
       .selectAll('text.y.axis-label')
       .data(function (d: FunctionPlotOptions) {
-        return [d.yAxis.label].filter(Boolean)
+        return [d.y.label].filter(Boolean)
       })
 
     const yLabelEnter = yLabel
@@ -490,7 +490,7 @@ export class Chart extends EventEmitter.EventEmitter {
       .attr('class', 'content')
 
     // helper line, x = 0
-    if (this.options.xAxis.type === 'linear') {
+    if (this.options.x.type === 'linear') {
       const yOrigin = content
         .merge(contentEnter)
         .selectAll(':scope > path.y.origin')
@@ -510,7 +510,7 @@ export class Chart extends EventEmitter.EventEmitter {
     }
 
     // helper line y = 0
-    if (this.options.yAxis.type === 'linear') {
+    if (this.options.y.type === 'linear') {
       const xOrigin = content
         .merge(contentEnter)
         .selectAll(':scope > path.x.origin')
@@ -636,15 +636,13 @@ export class Chart extends EventEmitter.EventEmitter {
     const instance = this
     const canvas = instance.canvas.merge(instance.canvas.enter)
 
-    // center the axes
+    // Draw the x-axis
     canvas.select('.x.axis').call(instance.meta.xAxis)
 
-    if (this.options.xAxis.position === 'sticky') {
+    if (this.options.x.position === 'sticky') {
       const yMin = this.meta.yScale.domain()[0]
       const yMax = this.meta.yScale.domain()[1]
-
       const yMid = (yMax + yMin) / 2
-
       const yScaleFactor = this.meta.height / (yMax - yMin)
 
       let yTranslation = yScaleFactor * yMid + this.meta.height / 2
@@ -658,18 +656,16 @@ export class Chart extends EventEmitter.EventEmitter {
         .attr('transform', 'translate(0,' + (this.meta.height / 2 - yTranslation + this.meta.height / 2) + ')')
     }
 
+    // Draw the y-axis
     canvas.select('.y.axis').call(instance.meta.yAxis)
 
-    if (this.options.yAxis.position === 'sticky') {
+    if (this.options.y.position === 'sticky') {
       const xMin = this.meta.xScale.domain()[0]
       const xMax = this.meta.xScale.domain()[1]
-
       const xMid = (xMax + xMin) / 2
-
       const xScaleFactor = this.meta.width / (xMin - xMax)
 
       let xTranslation = xScaleFactor * xMid + this.meta.width / 2
-
       xTranslation = xTranslation < 0 ? 0 : xTranslation
       xTranslation = xTranslation > this.meta.width ? this.meta.width : xTranslation
       canvas.select('.y.axis').attr('transform', 'translate(' + xTranslation + ',0)')
@@ -687,8 +683,8 @@ export class Chart extends EventEmitter.EventEmitter {
   syncOptions() {
     // update the original options yDomain and xDomain, this is done so that next calls to functionPlot()
     // with the same object preserve some of the computed state
-    this.options.xAxis.domain = [this.meta.xScale.domain()[0], this.meta.xScale.domain()[1]]
-    this.options.yAxis.domain = [this.meta.yScale.domain()[0], this.meta.yScale.domain()[1]]
+    this.options.x.domain = [this.meta.xScale.domain()[0], this.meta.xScale.domain()[1]]
+    this.options.y.domain = [this.meta.yScale.domain()[0], this.meta.yScale.domain()[1]]
   }
 
   getFontSize() {
diff --git a/src/evaluate-datum.test.js b/src/evaluate-datum.test.js
index 87c82b2..829a4b5 100644
--- a/src/evaluate-datum.test.js
+++ b/src/evaluate-datum.test.js
@@ -6,7 +6,7 @@ const height = 100
 const nSamples = 100
 const config = {
   options: {
-    xAxis: {
+    x: {
       type: 'linear'
     }
   },
diff --git a/src/evaluate-datum.ts b/src/evaluate-datum.ts
index 5b0ec35..6ac8650 100644
--- a/src/evaluate-datum.ts
+++ b/src/evaluate-datum.ts
@@ -33,8 +33,8 @@ function builtInEvaluate(chart: Chart, d: FunctionPlotDatum) {
     range: getRange(chart.meta.xScale, d),
     xScale: chart.meta.xScale,
     yScale: chart.meta.yScale,
-    xAxis: chart.options.xAxis,
-    yAxis: chart.options.yAxis,
+    xAxis: chart.options.x,
+    yAxis: chart.options.y,
     nSamples: getSamples(d.nSamples, chart.meta.width)
   })
   // NOTE: it's impossible to listen for the first eval event
@@ -49,8 +49,8 @@ function intervalEvaluate(chart: Chart, d: FunctionPlotDatum) {
     range: getRange(chart.meta.xScale, d),
     xScale: chart.meta.xScale,
     yScale: chart.meta.yScale,
-    xAxis: chart.options.xAxis,
-    yAxis: chart.options.yAxis,
+    xAxis: chart.options.x,
+    yAxis: chart.options.y,
     nSamples: getSamples(d.nSamples, chart.meta.width)
   })
   // NOTE: it's impossible to listen for the first eval event
@@ -65,8 +65,8 @@ async function asyncIntervalEvaluate(chart: Chart, d: FunctionPlotDatum) {
     range: getRange(chart.meta.xScale, d),
     xScale: chart.meta.xScale,
     yScale: chart.meta.yScale,
-    xAxis: chart.options.xAxis,
-    yAxis: chart.options.yAxis,
+    xAxis: chart.options.x,
+    yAxis: chart.options.y,
     nSamples: getSamples(d.nSamples, chart.meta.width)
   })
   // NOTE: it's impossible to listen for the first eval event
diff --git a/src/types.ts b/src/types.ts
index 78cf26d..0b4d85d 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -9,14 +9,14 @@ export type FunctionPlotScale = ScaleLinear<number, number> | ScaleLogarithmic<n
 
 export interface FunctionPlotOptionsAxis {
   /**
-   * Initial ends of the axis
+   * The type of axis
    */
-  domain?: [number, number]
+  type?: 'linear' | 'log'
 
   /**
-   * The type of axis
+   * Initial ends of the axis
    */
-  type?: 'linear' | 'log'
+  domain?: [number, number]
 
   /**
    * The label to display next to the axis
@@ -319,24 +319,14 @@ export interface FunctionPlotOptions {
   height?: number
 
   /**
-   * The x-axis configuration
-   */
-  xAxis?: FunctionPlotOptionsAxis
-
-  /**
-   * The y-axis configuration
-   */
-  yAxis?: FunctionPlotOptionsAxis
-
-  /**
-   * The x-axis domain, internally state used to preserve the x-domain across multiple calls to function plot
+   * x-axis configuration
    */
-  xDomain?: [number, number]
+  x?: FunctionPlotOptionsAxis
 
   /**
-   * The y-axis domain, internally state used to preserve the y-domain across multiple calls to function plot
+   * y-axis configuration
    */
-  yDomain?: [number, number]
+  y?: FunctionPlotOptionsAxis
 
   /**
    * The tip configuration
diff --git a/test/e2e/__image_snapshots__/graphs-test-ts-function-plot-should-render-with-different-position-of-the-axes-1-snap.png b/test/e2e/__image_snapshots__/graphs-test-ts-function-plot-should-render-with-different-position-of-the-axes-1-snap.png
new file mode 100644
index 0000000..c9ce249
Binary files /dev/null and b/test/e2e/__image_snapshots__/graphs-test-ts-function-plot-should-render-with-different-position-of-the-axes-1-snap.png differ
diff --git a/test/e2e/__image_snapshots__/graphs-test-ts-function-plot-should-render-with-different-postition-of-the-axes-1-snap.png b/test/e2e/__image_snapshots__/graphs-test-ts-function-plot-should-render-with-different-postition-of-the-axes-1-snap.png
deleted file mode 100644
index 50312be..0000000
Binary files a/test/e2e/__image_snapshots__/graphs-test-ts-function-plot-should-render-with-different-postition-of-the-axes-1-snap.png and /dev/null differ
diff --git a/test/e2e/snippets.ts b/test/e2e/snippets.ts
index 5fd11a6..b7adf22 100644
--- a/test/e2e/snippets.ts
+++ b/test/e2e/snippets.ts
@@ -23,11 +23,11 @@ const snippets = [
         width: 580,
         height: 400,
         disableZoom: true,
-        xAxis: {
+        x: {
           label: 'x - axis',
           domain: [-6, 6]
         },
-        yAxis: {
+        y: {
           label: 'y - axis'
         },
         data: [{
@@ -42,10 +42,10 @@ const snippets = [
       // prettier-ignore
       functionPlot({
         target: '#playground',
-        xAxis: {
+        x: {
           label: 'real'
         },
-        yAxis: {
+        y: {
           label: 'imaginary'
         },
         grid: true,
@@ -62,8 +62,8 @@ const snippets = [
       // prettier-ignore
       functionPlot({
         target: '#playground',
-        yAxis: { domain: [-1, 1] },
-        xAxis: { domain: [8, 24] },
+        y: { domain: [-1, 1] },
+        x: { domain: [8, 24] },
         data: [{
           fn: 'sin(x)'
         }]
@@ -90,7 +90,7 @@ const snippets = [
       // prettier-ignore
       functionPlot({
         target: '#playground',
-        yAxis: { domain: [-1, 9] },
+        y: { domain: [-1, 9] },
         data: [{
           fn: 'x^2'
         }],
@@ -112,7 +112,7 @@ const snippets = [
       // prettier-ignore
       functionPlot({
         target: '#playground',
-        xAxis: { domain: [-2, 12] },
+        x: { domain: [-2, 12] },
         data: [{
           fn: '3 + sin(x)',
           range: [2, 8],
@@ -126,11 +126,11 @@ const snippets = [
     fn: function () {
       functionPlot({
         target: '#playground',
-        xAxis: {
+        x: {
           type: 'log',
           domain: [0.01, 1]
         },
-        yAxis: {
+        y: {
           domain: [-100, 100]
         },
         grid: true,
@@ -208,7 +208,7 @@ const snippets = [
     }
   },
   {
-    testName: 'should render with different postition of the axes',
+    testName: 'should render with different position of the axes',
     fn: function () {
       // prettier-ignore
       functionPlot({
@@ -216,11 +216,11 @@ const snippets = [
         title: 'quadratic with different axes position',
         width: 580,
         height: 400,
-        xAxis: {
+        x: {
           position: 'sticky'
         },
-        yAxis: {
-          position: 'left'
+        y: {
+          position: 'sticky'
         },
         data: [{
           fn: 'x^2'