title: ECharts - set axisPointer positioning to vertical (time type)
body: <p>I am using <a href="https://web.archive.org/web/20180321222746/http://ecomfe.github.io:80/echarts/index-en.html" rel="nofollow noreferrer">ECharts</a> to plot a simple line graph that displays data about CPU usage over a period of time. I want the xAxis to only have 6 intervals, which are hourly; between each interval there are values for every half hour. I also want the axisPointer to be vertical, not horizontal.</p>
  
  <p>The problem is, that to do this I need to set the <strong>xAxis</strong> <em>type</em> to <em>time</em> and by doing this is makes the axisPointer change to horizontal, instead of vertical. In the image below you can see how the axisPointer looks in vertical orientation with the <em>category</em> type.</p>
  
  <p><a href="https://i.stack.imgur.com/91PSw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/91PSw.png" alt="vertical axisPointer"></a><br>
  <sub>(source: <a href="https://i.zips.me/212bzn5wd4d43Qe.png" rel="nofollow noreferrer">zips.me</a>)</sub>  </p>
  
  <p>Here you can see what my chart looks like and what I am trying to explain,
  <a href="https://i.stack.imgur.com/JqKF9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JqKF9.png" alt="myChart"></a></p>
  
  <p>Finally, this is the code used to make my graph.
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var myChart = echarts.init(document.getElementById('myChart'));
  var option = {
   grid: {
          x: 40,
          x2: 40,
          y: 35,
          y2: 25
      },
      // Add tooltip
      tooltip: {
          trigger: 'axis',
      },
  
      color: ['#EF5350', '#66BB6A'],
  
      calculable: false,
  
      // Horizontal axis
      xAxis: [{
          type: 'time',
      }],
  
      // Vertical axis
      yAxis: [{
          type: 'value',
          axisLabel: {
              formatter: '{value}%'
          }
      }],
  
      series: [
          {
              name: 'CPU',
              type: 'line',
              showAllSymbol: true,
     tooltip: {
     trigger: 'axis',
      padding: 15,
      formatter: function(params, ticket, callback){
       var res = '&lt;span style="font-weight: 600;"&gt;Today, ' + params[1].getHours() + ':' + params[1].getMinutes() + '&lt;/span&gt;&lt;br/&gt;&lt;hr&gt;CPU: &lt;span style="float: right;"&gt;' + params[2][1] + '%&lt;/span&gt;';
       return res;
      }
     },
              data: (function(){
                  var d = [];
                  var tme = 10;
                  var now = new Date();
                  var value;
                  while(tme++ &lt; 16){
                      d.push([
                          new Date(2017, 3, 15, tme, 0), Math.floor(Math.random() * 85) + 25
                      ]);
       if(tme !==16){
        for(i = 5; i &lt; 60; i+=5){
         d.push([
          new Date(2017, 3, 15, tme, i), Math.floor(Math.random() * 70) + 30
         ]);
        }
       }
                  }
                  return d;
              })()
          }
      ]
  };
  
  myChart.setOption(option);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#myChart {
    height: 400px;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/2.2.0/echarts-all.js"&gt;&lt;/script&gt;
  &lt;div id="myChart"&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>