title: How to Increase the width of C3 pie chart Legend only. Not for the whole graph
body: <p>I have a pie chart made with C3.js, I want to increase the width of the legends so that they can accommodate in one line. I do not want to increase the width size of Pie chart. Increasing the width of svg through size attiribute also increases the width of pie chart.</p>
  
  <p><a href="https://i.stack.imgur.com/GnyMg.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GnyMg.jpg" alt="enter image description here"></a></p>
  
  <p>The code I am using to make this is</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>function aliasAgeName(c) {
              return {"LESS_THAN_15": "&lt;15", "BETWEEN_15_25": "15-25", "BETWEEN_25_35": "25-35", "BETWEEN_35_45": "35-45", "BETWEEN_45_55": "45-55", "BETWEEN_55_65": "55-65", "MORE_THAN_65": "&gt;65", "NOT_DEFINED": "Not Defined"}[c];
          }
  var data = [
                  {sex: 'male', beaconKey: '121', userKey: '01', key:'k1', date: 'Wed Jul 06 06:26:59 UTC 2016', freq: 20, preferenceList: ['Fashion','Business','Sports'], ageGroup: 'LESS_THAN_15'}
                  , {sex: 'male', beaconKey: '122', userKey: '01', key:'k2', date: 'Tue Jul 05 11:59:28 UTC 2016', freq: 22, preferenceList: ['Business'], ageGroup: 'BETWEEN_25_35'}
                  , {sex: 'female', beaconKey: '123', userKey: '01', key:'k3', date: 'Tue Jul 05 11:59:28 UTC 2016', freq: 26, preferenceList: ['Housing'], ageGroup: 'BETWEEN_35_45'}
                  , {sex: 'male', beaconKey: '121', userKey: '03', key:'k4', date: 'Wed Jul 06 06:26:59 UTC 2016', freq: 38, preferenceList: ['Business','Housing','Sports'], ageGroup: 'BETWEEN_25_35'}
                  , {sex: 'female', beaconKey: '124', userKey: '03', key:'k5', date: 'Tue Jul 05 11:59:28 UTC 2016', freq: 20, preferenceList: ['Business','Housing','Sports'], ageGroup: 'BETWEEN_45_55'}
                  , {sex: 'male', beaconKey: '125', userKey: '01', key:'k6', date: 'Wed Jul 06 06:26:59 UTC 2016', freq: 42, preferenceList: ['Jewels','Kids'], ageGroup: 'LESS_THAN_15'}
                  , {sex: 'female', beaconKey: '123', userKey: '02', key:'k7', date: 'Tue Jul 05 06:26:59 UTC 2016', freq: 34, preferenceList: ['Movies'], ageGroup: 'BETWEEN_55_65'}
                  , {sex: 'female', beaconKey: '121', userKey: '04', key:'k8', date: 'Wed Jul 06 06:26:59 UTC 2016', freq: 22, preferenceList: ['Culture'], ageGroup: 'BETWEEN_25_35'}
                  , {sex: 'female', beaconKey: '124', userKey: '01', key:'k9', date: 'Tue Jul 05 11:59:28 UTC 2016', freq: 115, preferenceList: ['Kids'], ageGroup: 'BETWEEN_35_45'}
                  , {sex: 'male', beaconKey: '122', userKey: '02', key:'k10', date: 'Wed Jul 06 06:26:59 UTC 2016', freq: 19, preferenceList: [], ageGroup: 'BETWEEN_45_55'}
                  , {sex: 'female', beaconKey: '121',userKey: '01', key:'k11', date: 'Wed Jul 06 06:26:59 UTC 2016', freq: 24, preferenceList: [], ageGroup: 'BETWEEN_35_45'}
              ];
  
              var tally = {};
              var ageChartData = [];
  
              data.forEach(function (user) {
                  ageChartData.push(aliasAgeName(user.ageGroup));
                  tally[ aliasAgeName(user.ageGroup) ] = (tally[ aliasAgeName(user.ageGroup) ] || 0) + 1;
              });
  
              var chart = c3.generate({
                  bindto: '#ageChart',
                  width:{
  
                  },
                  size: {
                      height: 300,
                      width: 300
                  },
                  data: {
                      json: [ tally ],
                      keys: {
                          value: ageChartData,
                      },
                      type : 'pie'
                  }
              });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" /&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="ageChart"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>