Wrap Long Axis Labels in Chart - CanvasJS
Wrap Long Axis Labels in Chart using labelMaxWidth property
HTML
<script src="http://canvasjs.com/wp-content/uploads/misc/int-builds/canvasjs-1.3.0-beta4.int.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<p class="description">Built using <a href="http://canvasjs.com" title="CanvasJS HTML5 Charts" target="_blank">CanvasJS HTML5 Charts</a>
</p>
CSS
.description {
margin-top: 50px;
text-align:left;
font-family: calibri;
font-size: 16px;
color: gray;
}
a:link, a:visited, a:active {
color: #4F81BC;
}
JavaScript
var chart = new CanvasJS.Chart("chartContainer", {
"data": [
{
"indexLabelFontSize": 16,
"indexLabelFontFamily": "Monospace",
"indexLabelFontColor": "darkgrey",
"indexLabelLineColor": "darkgrey",
"indexLabelPlacement": "outside",
"type": "pie",
"showInLegend": false,
"dataPoints": [
{
"y": 0.3333333333333333,
"name": "This is a really long label omg wtf bbq 33%",
"indexLabel": "This is a really long label omg wtf bbq 33%"
},
{
"y": 0.6666666666666666,
"name": "This is a really long label omg wtf bbq qq bbq 22 67%",
"indexLabel": "This is a really long label omg wtf bbq qq bbq 22 67%"
}
]
}
],
axisX: {
//labelAutoFit: true, //false by default.
labelWrap: false, // true by default.
labelMaxWidth: 100,
//indexLabelMaxWidth: 100,
prefix: "This is a very long label "
}
});
chart.render();