Enable option grid in the top level configuration object.

Author: mauriciopoppe

site/js/site.js

@@ -6,8 +6,8 @@ function onSiteDependenciesLoaded() {
 
   functionPlot({
     target: '#description-sample',
-    x: { grid: true },
-    y: { domain: [-1, 9], grid: true },
+    y: { domain: [-1, 9] },
+    grid: true,
     tip: {
       renderer: function () {}
     },
@@ -119,7 +119,7 @@ function onSiteDependenciesLoaded() {
   /**
    * ### Grid
    *
-   * Set `grid: true` in the axis objects to draw a grid.
+   * Set `grid: true` in the top level object or the axis objects to draw a grid.
    */
   functionPlot({
     target: '#grid',
@@ -142,14 +142,9 @@ function onSiteDependenciesLoaded() {
    */
   functionPlot({
     target: '#sticky',
-    x: {
-      position: 'sticky',
-      grid: true
-    },
-    y: {
-      position: 'sticky',
-      grid: true
-    },
+    x: { position: 'sticky' },
+    y: { position: 'sticky' },
+    grid: true,
     data: [{ fn: 'cos(x)' }]
   })
 
@@ -279,13 +274,12 @@ function onSiteDependenciesLoaded() {
     target: '#logarithmic',
     x: {
       type: 'log',
-      domain: [0.01, 1],
-      grid: true
+      domain: [0.01, 1]
     },
     y: {
-      domain: [-100, 100],
-      grid: true
+      domain: [-100, 100]
     },
+    grid: true,
     data: [
       {
         fn: '1/x * cos(1/x)',
@@ -950,8 +944,8 @@ function onSiteDependenciesLoaded() {
    */
   functionPlot({
     target: '#vector',
-    x: { domain: [-3, 8], grid: true },
-    y: { grid: true },
+    x: { domain: [-3, 8] },
+    grid: true,
     data: [
       {
         vector: [2, 1],

site/partials/examples.html

@@ -49,7 +49,7 @@
     }
   ]
 })</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 axis objects to draw a grid.</p></div><div class="code"><pre><code class="javascript">functionPlot({
+<p>Set <code>grid: true</code> in the top level object or the axis objects to draw a grid.</p></div><div class="code"><pre><code class="javascript">functionPlot({
   target: '#grid',
   x: {
     label: 'real',
@@ -64,14 +64,9 @@
 <p>Set <code>position: 'sticky'</code> on an axis to keep it centered 
 in the screen and constrained to the viewport on pan and zoom.</p></div><div class="code"><pre><code class="javascript">functionPlot({
   target: '#sticky',
-  x: {
-    position: 'sticky',
-    grid: true
-  },
-  y: {
-    position: 'sticky',
-    grid: true
-  },
+  x: { position: 'sticky' },
+  y: { position: 'sticky' },
+  grid: true,
   data: [{ fn: 'cos(x)' }]
 })</code></pre></div></div><div class="col-md-6 center-block demos"><span class="graph" id="sticky"></span></div></div></div></div><div class="example"><div class="container"><div class="row"><div class="col-md-6"><div class="comment"><h3>Domain</h3>
 <p>The domains of both axes can be changed with the following configurations:</p>
@@ -167,13 +162,12 @@
   target: '#logarithmic',
   x: {
     type: 'log',
-    domain: [0.01, 1],
-    grid: true
+    domain: [0.01, 1]
   },
   y: {
-    domain: [-100, 100],
-    grid: true
+    domain: [-100, 100]
   },
+  grid: true,
   data: [
     {
       fn: '1/x * cos(1/x)',
@@ -673,8 +667,8 @@
 <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',
-  x: { domain: [-3, 8], grid: true },
-  y: { grid: true },
+  x: { domain: [-3, 8] },
+  grid: true,
   data: [
     {
       vector: [2, 1],

src/chart.ts

@@ -286,11 +286,11 @@ export class Chart extends EventEmitter.EventEmitter {
     if (!this.meta.xAxis) {
       this.meta.xAxis = d3AxisBottom(this.meta.xScale)
     }
-    this.meta.xAxis.tickSize(this.options.x.grid ? -this.meta.height : 0).tickFormat(formatter)
+    this.meta.xAxis.tickSize(this.options.grid || this.options.x.grid ? -this.meta.height : 0).tickFormat(formatter)
     if (!this.meta.yAxis) {
       this.meta.yAxis = d3AxisLeft(this.meta.yScale)
     }
-    this.meta.yAxis.tickSize(this.options.y.grid ? -this.meta.width : 0).tickFormat(formatter)
+    this.meta.yAxis.tickSize(this.options.grid || this.options.y.grid ? -this.meta.width : 0).tickFormat(formatter)
 
     this.line = d3Line()
       .x(function (d) {

src/types.ts

@@ -414,6 +414,11 @@ export interface FunctionPlotOptions {
    */
   disableZoom?: boolean
 
+  /**
+   * True to display a grid.
+   */
+  grid?: boolean
+
   /**
    * The functions to plot
    */