title: How to use eCharts to display a daily stock chart combined with a quarterly revenue data chart
body: <p>I have two datasets which I want to display on an eCharts canvas, as two separate line charts: </p>
  
  <ol>
  <li>a quarterly revenue chart, and </li>
  <li>a daily stock price chart. </li>
  </ol>
  
  <p>Using the code below, both line charts are displayed, but because the datasets have different array lengths, the revenues line chart is being squeezed into the left hand side of the canvas, while the stock price chart is displayed properly in full width. Also, the x-axes aren't aligned with each other, because the date-ranges don't overlap completely (the quarterly data starts earlier than the price data, see below example). </p>
  
  <p>The first, long dataset, containing <em>daily</em> stock prices, looks as follows:</p>
  
  <pre><code>    var dailyStockprices = [123,124,125, ... etc] // array length 600
      var dailyDates = ["2019-01-02","2019-01-03","2019-01-04", ... etc] // array length 600
  </code></pre>
  
  <p>The second, very short dataset, containing <em>quarterly</em> revenues, looks as follows:</p>
  
  <pre><code>    var quarterlyRevenues = [123,124,125, ... etc]  // array length 20
      var quarterlyDates = ["2018-09-30","2018-12-31","2019-03-31", ... etc] // array length 20
  </code></pre>
  
  <p>The eCharts code looks as follows:</p>
  
  <pre><code>    var myChart = echarts.init(document.getElementById('mainchart1'));
  
      option = {
        xAxis: [{
          type: 'category',
          data: dailyDates
        }, {
          type: 'category',
          data: quarterlyDates
        }],
        yAxis: [{
          type: 'value'
        }, {
          type: 'value'
        }],
        series: [{
          data: dailyStockprices,
          type: 'line',
          yAxisIndex: 0
        }, {
          data: quarterlyRevenues,
          type: 'line',
          yAxisIndex: 1
        }]
      };
      myChart.setOption(option);
  </code></pre>
  
  <p>Here's a <em>simplified</em> JSFiddle example: <a href="https://jsfiddle.net/frankmarks/szm1f20j/9/" rel="nofollow noreferrer">https://jsfiddle.net/frankmarks/szm1f20j/9/</a></p>
  
  <p>How can I make both line charts display properly, i.e. full width, on the same canvas, with both x-Axes being aligned?</p>