Canvasjs Legend Scroll

by nehamahajan

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 500px;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
{      
  data: [
         {
        type: "line",
        color: "#1aaf5d",
        markerSize: 0,
				showInLegend: true,
        legendText: "Lorem ipsum dolor sit - 1",
        dataPoints: [{y: 95.165}, {y: 95.541}, {y: 95.611}, {y: 95.594}, {y: 95.583}]
    }, {
        type: "line",
        color: "#f2c500",
        markerSize: 0,
				showInLegend: true,
        legendText: "Lorem ipsum dolor sit - 2",
        dataPoints: [{y: 100.0}, {y: 100.0}, {y: 100.0}, {y: 100.0}, {y: 99.966}]
    }, {
        type: "line",
        color: "#f45b00",
        markerSize: 0,
				showInLegend: true,
        legendText: "Lorem ipsum dolor sit - 3",
        dataPoints: [{y: 99.932}, {y: 99.967}, {y: 100.0}, {y: 100.0}, {y: 99.966}]
    }, {
        type: "line",
        color: "#8e0000",
        markerSize: 0,
				showInLegend: true,
        legendText: "Lorem ipsum dolor sit - 4",
        dataPoints: [{y: 100.0}, {y: 99.967}, {y: 99.966}, {y: 100.0}, {y: 100.0}]
    }, {
        type: "line",
        color: "#0e948c",
        markerSize: 0,
				showInLegend: true,
        legendText: "Lorem ipsum dolor sit - 5",
        dataPoints: [{y: 100.0}, {y: 99.967}, {y: 99.966}, {y: 99.967}, {y: 100.0}]
    }, {
        type: "line",
        color: "#8cbb2c",
        markerSize: 0,
				showInLegend: true,
        legendText: "Lorem ipsum dolor sit - 6",
        dataPoints: [{y: 99.966}, {y: 100.0}, {y: 100.0}, {y: 100.0}, {y: 100.0}]
    }, {
        type: "line",
        color: "#f3de00",
        markerSize: 0,
				showInLegend: true,
        legendText: "Lorem ipsum dolor sit - 7",
        dataPoints: [{y: 100.0}, {y: 100.0}, {y: 100.0}, {y: 100.0}, {y: 100.0}]
    }, {
        type: "line",
        color: "#c02d00",
        markerSize: 0,
				showInLegend: true,
        legendText: "Lorem ipsum dolor sit - 8",
        dataPoints: [{y: 98.206}, {y: 97.971}, {y: 99.526}, {y: 99.705}, {y: 98.138}]
    }, {
        type: "line",
     ...