title: How to add labels for regions in c3.js line chart or detail chart?
body: <p>I am using <strong>c3.js</strong> to plot <strong>linechart with region</strong> referred <a href="https://c3js.org/samples/region.html" rel="nofollow noreferrer">this link</a>. </p>
  
  <p>I need to show the label for regions.
  I searched quite a lot but could not fond any solution.</p>
  
  <p><strong>Existing code:</strong></p>
  
  <p><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 chart = c3.generate({
      bindto: '#detail_chart',
      data: {
          columns: [
              ['data1', 30, 200, 100, 400, 150, 250, 400],
              ['data2', 830, 1200, 1100, 1400, 1150, 1250, 1500],
          ],
          axes: {
              data2: 'y2'
          }
      },
      axis: {
          y2: {
              show: true
          }
      },
      regions: [
          {axis: 'x', end: 1, class: 'regionX'},
          {axis: 'x', start: 2, end: 4, class: 'regionX'},
          {axis: 'x', start: 5, class: 'regionX'},
          {axis: 'y', end: 50, class: 'regionY'},
          {axis: 'y', start: 80, end: 140, class: 'regionY'},
          {axis: 'y', start: 400, class: 'regionY'},
          {axis: 'y2', end: 900, class: 'regionY2'},
          {axis: 'y2', start: 1150, end: 1250, class: 'regionY2'},
          {axis: 'y2', start: 1300, class: 'regionY2'},
      ]
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.c3-region.regionY {
    fill: blue;
  }
  .c3-region.regionY2 {
    fill: yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Load c3.css --&gt;
  &lt;link href=" https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.css
  " rel="stylesheet"&gt;
  
  &lt;!-- Load d3.js and c3.js --&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js" charset="utf-8"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.min.js"&gt;&lt;/script&gt;
   &lt;div id="detail_chart"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>My requirement is:</strong></p>
  
  <pre><code>regions: [
              {axis: 'x', end: 1, class: 'regionX',label:'label1'},
              {axis: 'x', start: 2, end: 4, class: 'regionZ',label:'label3'},
              {axis: 'x', start: 5, class: 'regionY',label:'label2'},
            ]
  </code></pre>
  
  <p><strong>Expected Result:</strong><a href="https://i.stack.imgur.com/1aXX2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1aXX2.png" alt="enter image description here"></a>
  How to achieve it using c3.js or d3.js. If anyone has idea share with me. Thanks in advance.</p>