Chart with DataPoint's Legend - CanvasJS JavaScript Chart

Chart with DataPoint's Legend - CanvasJS JavaScript Chart

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",
    {    
      data: [
      { 
      	name:"Used",
        showInLegend: true,
        color: "orange",
        type: "column",
        
        dataPoints: [
          { label: "avb0", y: 100, color: "orange" },
          { label: "avb1", y: 100, color: "green" },
          { label: "avb2", y: 100, color: "orange" },
          { label: "avb3", y: 100, color: "blue" },
          { label: "avb4", y: 100, color: "orange" },
          { label: "avb5", y: 100, color: "green" },
          { label: "avb6", y: 100, color: "red" },
          { label: "avb7", y: 100, color: "orange" },
          { label: "avb8", y: 100, color: "orange" },
          { label: "avb9", y: 100, color: "blue" },
          { label: "avb10", y: 100, color: "green" },
          { label: "avb11", y: 100, color: "orange" },
          { label: "avb12", y: 100, color: "red" },
          { label: "avb13", y: 100, color: "blue" },
          { label: "avb14", y: 100, color: "orange" },
          { label: "avb15", y: 100, color: "orange" },
				]
      },
      { 
      	name:"Free",
        showInLegend: true,
        color: "green",
        type: "column",
        dataPoints: []
      },
      { 
        name:"Faulty",
        showInLegend: true,
        color: "blue",
        type: "column",
        dataPoints: []
      },
      {  
      	name: "Not Available",
        showInLegend: true,
        color: "red",
        type: "column",
        dataPoints: []
      }
      ]
    });

    chart.render();