title: d3 pie chart text label wrap
body: <p>I'm using <a href="http://d3pie.org/#about" rel="nofollow noreferrer">d3pie.js</a> to create a d3 pie chart. 
  This is the configuration that I'm using.</p>
  
  <pre><code> var pie = new d3pie("shpPie", {
          "size": {
              "canvasHeight": 350,
              "canvasWidth": 350,
              "pieOuterRadius": "50%",
              "pieInnerRadius": "50%"
          },
          "data": {
              "sortOrder": "value-asc",
              "content": [
                    {"label":"Total Foreign","value":3.55},
                    {"label":"Total Institutions","value":0.89},
                    {"label":"Total Govt Holding","value":0},
                    {"label":"Total Non Promoter Corporate Holding","value":0.20},
                    {"label":"Total Promoters","value":12.13},
                    {"label":"Total Public &amp; Others","value":3.20}
                  ]
          },
          "labels": {
              "outer": {
                  "pieDistance": 20
              },
              "inner": {
                  "hideWhenLessThanPercentage": 3
              },
              "mainLabel": {
                  "fontSize": 11
              },
              "percentage": {
                  "color": "#ffffff",
                  "decimalPlaces": 0
              },
              "value": {
                  "color": "#adadad",
                  "fontSize": 11
              },
              "lines": {
                  "enabled": true
              },
              "truncation": {
                  "enabled": true,
                  "truncateLength": 20
              }
          },
          "tooltips": {
              "enabled": true,
              "type": "placeholder",
              "string": "{label}: {percentage}%"
          },
          "effects": {
              "pullOutSegmentOnClick": {
                  "effect": "linear",
                  "speed": 400,
                  "size": 8
              }
          },
          "misc": {
              "gradient": {
                  "enabled": true,
                  "percentage": 100
              }
          },
          "callbacks": {}
      });
  </code></pre>
  
  <p>My problem is, the label text that I'm getting in is long. The data is going beyond the canvas boundaries. I cannot go bigger than the defined size because its a piece of website that I'm working on right now. Is there anyway that I can wrap the label text.
  Any help would be appreciated.</p>