Multiseiries chart with aligned legends - CanvasJS Javascript Charts

Multiseiries chart with aligned legends - CanvasJS Javascript Charts

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",
    {
      legend: {
       	 itemWidth: 280       // Comment itemWidth to see the difference
      },
      data: [
      {      	
        type: "stackedArea",
        showInLegend: true,       
        legendText:"ARI: for Expert Advisor Vision",
        dataPoints: [
        { x: 10, y: 21 },
        { x: 20, y: 25 },
        { x: 30, y: 20 },
        { x: 40, y: 25 },
        { x: 50, y: 27 },
        { x: 60, y: 28 },
        { x: 70, y: 28 },
        { x: 80, y: 24 },
        { x: 90, y: 26 }      
        ]
      },
        {        
        type: "stackedArea",
        showInLegend: true,
         legendText:"ARI: for Sight Line",
        dataPoints: [
        { x: 10, y: 31 },
        { x: 20, y: 35 },
        { x: 30, y: 30 },
        { x: 40, y: 35 },
        { x: 50, y: 35 },
        { x: 60, y: 38 },
        { x: 70, y: 38 },
        { x: 80, y: 34 },
        { x: 90, y: 44 }      
        ]
      },
        {        
        type: "stackedArea",
        showInLegend: true,
         legendText:"ARI: for System Service",
        dataPoints: [
        { x: 10, y: 45 },
        { x: 20, y: 50 },
        { x: 30, y: 40 },
        { x: 40, y: 45 },
        { x: 50, y: 45 },
        { x: 60, y: 48 },
        { x: 70, y: 43 },
        { x: 80, y: 41 },
        { x: 90, y: 28 }      
        ]
      },
        {        
        type: "stackedArea",
        showInLegend: true,
        legendText:"ARI: for Java",
        dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55 },
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14 }      
        ]
      },
      {
      	showInLegend: true,       
        type: "stackedArea",
         legendText:"BRO: for system",
        dataPoints: [
        { x: 10, y: 21 },
        { x: 20, y: 25 },
        { x: 30, y: 20 },
        { x: 40,...