title: Creating a Combination chart(line and bar) for same json data using c3js
body: <p>I want to create a combination chart (line and bar) for same json data so that the line touches the all the bars since datapoints are same.</p>
  
  <p>Here is the code</p>
  
  <pre><code>var graphdata=[
  { 'indicator': 'X', 'total': 100 },
              { 'indicator': 'Y', 'total': 200 },
              { 'indicator': 'Z', 'total': 300 }
  ];
  var g1=[
  { 'indicator': 'X', 'total': 150 },
              { 'indicator': 'Y', 'total': 220 },
              { 'indicator': 'Z', 'total': 330 }
  ];
  setTimeout(function () {
      chart.load({
            data: {
          type: 'line',
          json: g1,
          keys: {
              x: 'indicator',
              value: ['total']
          },
  
      },
      axis: {
              x: {
                  type: 'category'
              }
      },
      });
  }, 1000);
  var chart = c3.generate({
      data: {
          type: 'bar',
          json: graphdata,
          keys: {
              x: 'indicator',
              value: ['total']
          },
  
      },
      axis: {
              x: {
                  type: 'category'
              }
      },
      bar: {
          width: {
              ratio: 0.5
          }
      }
  });
  </code></pre>
  
  <p>The output of this is only bar chart,the line chart is not loading.</p>