Legend with maxWidth - CanvasJS

Legend with maxWidth - CanvasJS

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->

<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
		{
			toolTip: {
				shared: "true"  //disable here. 
			},	
			title:{
				text: "Temperature",
				fontSize: 15,
				padding : 10
			},
			animationEnabled: true,
			zoomEnabled:true,
			
			axisX:{
				gridDashType: "dash",
				gridThickness: 1,
				gridColor: "#B4B4B4",
				tickColor: "#B4B4B4",
				labelAngle: -80,
				labelFontColor : "#000000",
				labelFontSize : 12,
				interlacedColor: "#F0F8FF",
				valueFormatString: "DD.MM HH:mm"
				
			},
			theme: "theme2",
			axisY: {
				gridThickness: 1,
				gridColor: "#B4B4B4",				
				tickColor: "#B4B4B4",				
				labelFontColor : "#000000",
				labelFontSize : 15
			},
			legend:{
				verticalAlign: "center",
				horizontalAlign: "right",
				maxWidth: 85,
				fontSize : 10,
                cursor:"pointer",
                itemclick:function(e){
                    if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                        e.dataSeries.visible = false;
                    }
                    else{
                        e.dataSeries.visible = true;
                    }
                    chart.render();
                }
			},
			data: [
			{        
				type: "line",
				showInLegend: true,
				lineThickness: 1,
				name: "Temperature in ER6",
				color : "#FF0000",
                xValueType: "dateTime",
				dataPoints: [
      {
        "x": 1435726920000,
        "y": 19.2
      },
      {
        "x": 1435727220000,
        "y": 19.4
      },
      {
        "x": 1435727520000,
        "y": 19.2
      },
      {
        "x": 1435727820000,
        "y": 19.2
      },
      {
        "x": 1435728120000,
        "y": 19.4
      }]
			},{        
				type: "line",
				showInLegend: true,
				lineThickness: 1,
				name: "Temperature in ER7",
				//markerType: "square",
				color : "#000000",
                xValueType: "dateTime",
				dataPoints: [
      {
        "x": 1435726920000,
        "y": 20.2
      },
 ...