Custom Legends in a scrollable div - CanvasJS JavaScript Charts

Custom Legends in a scrollable div - 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>

<!--Custom Legends-->
<div id="legends">
    <ul id="legendList">      
    </ul>
</div>

CSS

#legends{
  overflow: scroll;
  height: 100px;
}

li { 
  list-style-type: "-";
  cursor: pointer;
  width: auto;
  float: left;
  margin-left: 25px;
  min-width: 100px;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
	{    
  		axisY:{
      	includeZero:false,
      },      
      data: [
         {
        type: "line",
        color: "#1aaf5d",
        markerSize: 0,

        dataPoints: [{y: 95.165}, {y: 95.541}, {y: 95.611}, {y: 95.594}, {y: 95.583}]
    }, {
        type: "line",
        color: "#f2c500",
        markerSize: 0,

        dataPoints: [{y: 100.0}, {y: 100.0}, {y: 100.0}, {y: 100.0}, {y: 99.966}]
    }, {
        type: "line",
        color: "#f45b00",
        markerSize: 0,

        dataPoints: [{y: 99.932}, {y: 99.967}, {y: 100.0}, {y: 100.0}, {y: 99.966}]
    }, {
        type: "line",
        color: "#8e0000",
        markerSize: 0,

        dataPoints: [{y: 100.0}, {y: 99.967}, {y: 99.966}, {y: 100.0}, {y: 100.0}]
    }, {
        type: "line",
        color: "#0e948c",
        markerSize: 0,

        dataPoints: [{y: 100.0}, {y: 99.967}, {y: 99.966}, {y: 99.967}, {y: 100.0}]
    }, {
        type: "line",
        color: "#8cbb2c",
        markerSize: 0,

        dataPoints: [{y: 99.966}, {y: 100.0}, {y: 100.0}, {y: 100.0}, {y: 100.0}]
    }, {
        type: "line",
        color: "#f3de00",
        markerSize: 0,

        dataPoints: [{y: 100.0}, {y: 100.0}, {y: 100.0}, {y: 100.0}, {y: 100.0}]
    }, {
        type: "line",
        color: "#c02d00",
        markerSize: 0,

        dataPoints: [{y: 98.206}, {y: 97.971}, {y: 99.526}, {y: 99.705}, {y: 98.138}]
    }, {
        type: "line",
        color: "#5b0101",
        markerSize: 0,
 
        dataPoints: [{y: 99.695}, {y: 99.803}, {y: 98.306}, {y: 98.165}, {y: 99.695}]
    }, {
        type: "line",
        color: "#0075c2",
        markerSize: 0,

        dataPoints: [{y: 99.797}, {y: 99.836}, {y: 99.898}, {y: 99.836}, {y: 99.864}]
    }, {
        type: "line",
        color: "#1aaf5d",
        markerSize: 0,

        dataPoints: [{y: 99.796}, {y: 99.869}, {y: 99.864}, {y: 99.836}, {y: 99.898}]
    },  {
        type: "line",
        color:...