Wrap Long Axis Labels in Chart - CanvasJS

Wrap Long Axis Labels in Chart using labelMaxWidth property

by Nayana Das

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.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 colors = new Array();

    	colors[0] = "#AA5A4B";
    	colors[1] = "#DC5A4B";
    	colors[2] = "#E6918C";
    	colors[3] = "#505050";
    	colors[4] = "#32465F";
    	colors[5] = "#8C9196";
    	colors[6] = "#DCD2C8";

    	var line_graph = new CanvasJS.Chart("chartContainer",
    	{
    		        backgroundColor: "rgba(0,0,0,0)",
        axisX:{
        	intervalType: "day",
            interval: 1,
        	lineThickness: 0,
        	valueFormatString: "MMM DD"
        },
        axisY:{
        	gridThickness: 0.5,
        	gridColor: "#EAEAEA",
        	lineThickness: 0
        },
        legend:{
        	fontFamily:"Open Sans",
        	verticalAlign: "top",
        	horizontalAlign: "center",
        	fontSize: 13
        },					
        data: [
        {
        	type: "line",
        	color: ""+colors[Math.floor((Math.random()*6))],
        	markerSize: 0,
        	dataPoints: [
        	        	{x: new Date("2013-09-21"), y: 21 },
        	        	{x: new Date("2013-09-22"), y: 24 },
        	        	{x: new Date("2013-09-23"), y: 22 }

        	        	]
        },
        ]
    });
    
line_graph.render();