Vis.js - how to hide the gridlines

Question

Tech Details:

JS Framework: Aurelia

Charting Framework : vis.js (graph2D Library)

I am working on a grid layout for a dashboard view on a Aurelia based web site. The individual grids will display a small graph in the middle. Since I need only a basic line graph, I am using the Graph2D library.

After a few tries could get it to display the graph but it shows up with the grid lines and labels in the back, which in the small sized grid, looks hideous.

1) Can someone share the code piece to disable the gridlines and labels from showing.. my current option settings are:

    var options= {
    start : '2014-06-11',
    end : '2014-06-16',
    graphHeight: '45px',
    dataAxis:{
       showMinorLabels:false,
       showMajorLabels:false,
       visible:false
     }
    }

2) Also, my current item array is as follows (infact, I am using the one in the example) :

    var items = [
        {x: '2014-06-13', y: 30},
        {x: '2014-06-14', y: 10},
        {x: '2014-06-15', y: 15},
        {x: '2014-06-16', y: 30},
        {x: '2014-06-17', y: 10},
        {x: '2014-06-18', y: 15}
     ];

When I tried changing the "x:" values to something else (to display the time in my case ) like

    var items = [
        {x: '10:00', y: 30},
        {x: '10:30', y: 10},
        {x: '11:00', y: 15},
        {x: '11:30', y: 30},
        {x: '12:00', y: 10},
        {x: '12:30', y: 15}
        {x: '13:00', y: 30},
        {x: '13:30', y: 10}
    ];

It threw a 'X is NaN' error.. How can i change the values.. i have seen some suggestions of using a formatter..

Detailed code:

---

    import {BindingSignaler} from 'aurelia-templating-resource'
    import * as vis from 'vis'
    import * as _ from loadash 

    export class GraphDisplay{
     @bindable data : any;
     private graph= vis.Graph2D;
     private container = HTMLElement;

     attached()
      {
         this.drawGraph();
      }

     activate()
      {
       this.drawGraph();
      }

     private drawGraph()
     {
        if(!this.data)
        {
          return;
        }


      var items = [
             {x: '2014-06-13', y: 30},
             {x: '2014-06-14', y: 10},
             {x: '2014-06-15', y: 15},
             {x: '2014-06-16', y: 30},
             {x: '2014-06-17', y: 10},
             {x: '2014-06-18', y: 15}
           ];

       var dataset = new vis.Dataset(items);

       var options= {
            start : '2014-06-11',
            end : '2014-06-16',
            graphHeight: '45px',
            dataAxis:{
               showMinorLabels:false,
               showMajorLabels:false,
               visible:false
               }
         }

       if(this.container)
         {
           this.graph = new vis.Graph2D(this.container, dataset, groups, options);
         }
     else
         {
           console.log('No container found');
         }

      }

   }

---

The HTMLElement is bound through the ref attribute in the view

        <template>
           <div class="containerClass" id="graphContainer" ref="container" style="height:200px; width:200px;">
        </template> 

Answer 1

1) To hide the grid use CSS:

.vis-background {
  display: none;
}

2) To hide time axis move the options showMajorLabels and showMinorLabels to the upper level:

var options = {
  start: '2014-06-13 09:30',
  end: '2014-06-13 13:00',
  graphHeight: '45px',
  dataAxis: {
    visible: false
  },
  showMajorLabels: false,
  showMinorLabels: false
};

3) You can specify the minutes in the data:

var items = [{
    x: '2014-06-13 10:00',
    y: 30
  }, ...

Complete example: https://jsfiddle.net/atnnL13f/