Chart.js html legend

by akmiecik

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<canvas id="myChart" width="600" height="300"></canvas>
<table id="settlements_constants">
        <thead>
        <tr>
            <th>Unique ID</th>		
            <th>User</th>
            <th>Request Date</th>
            <th>Region</th>
            <th>Months Out</th>
            <th>Quarter</th>
            <th>Low</th>
            <th>High</th>
        </tr>
      </thead><tbody><tr id="2Q23gulf" class="a_row">
    <td>110</td>
    <td>jbharrison2</td>
    <td>2022-02-28</td>
    <td>gulf</td>
    <td>6</td>			
    <td>2Q23</td>
    <td>570</td>
    <td>610</td>
    </tr><tr id="1Q22gulf" class="a_row">
    <td>111</td>
    <td>jbharrison2</td>
    <td>2022-02-28</td>
    <td>gulf</td>
    <td>1</td>			
    <td>1Q22</td>
    <td>490</td>
    <td>530</td>
    </tr><tr id="2Q22gulf" class="a_row">
    <td>112</td>
    <td>jbharrison2</td>
    <td>2022-02-28</td>
    <td>gulf</td>
    <td>2</td>			
    <td>2Q22</td>
    <td>550</td>
    <td>590</td>
    </tr><tr id="1Q22gulf" class="a_row">
    <td>118</td>
    <td>jbharrison2</td>
    <td>2022-02-28</td>
    <td>gulf</td>
    <td>1</td>			
    <td>1Q22</td>
    <td>490</td>
    <td>530</td>
    </tr><tr id="2Q22gulf" class="a_row">
    <td>120</td>
    <td>jbharrison2</td>
    <td>2022-02-28</td>
    <td>gulf</td>
    <td>2</td>			
    <td>2Q22</td>
    <td>550</td>
    <td>590</td>
    </tr><tr id="3Q22gulf" class="a_row">
    <td>121</td>
    <td>jbharrison2</td>
    <td>2022-02-28</td>
    <td>gulf</td>
    <td>3</td>			
    <td>3Q22</td>
    <td>580</td>
    <td>620</td>
    </tr><tr id="3Q22gulf" class="a_row">
    <td>122</td>
    <td>jbharrison2</td>
    <td>2022-02-28</td>
    <td>gulf</td>
    <td>3</td>			
    <td>3Q22</td>
    <td>580</td>
    <td>620</td>
    </tr><tr id="4Q22gulf" class="a_row">
    <td>124</td>
    <td>jbharrison2</td>
   ...

CSS

.chart-legend {position: absolute; top: 0vh;}
.chart-legend li span {
   display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    margin-left: 20px;
}

.chart-legend ul {
	list-style-type: none;
}

.chart-legend ul li {
	float:left;
  cursor: pointer;
}

.inactive {
  opacity: .5;
}

JavaScript

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: 'Region A',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: '#1F699C',
        }, {
            label: 'Region B',
            data: [4, 5, 7, 15, 6, 4],
            backgroundColor: '#C6C6C6',
        }]
    },
    options: {
    	  legend: {
				    display: false        
        }
    }
});

document.getElementById('js-legend').innerHTML = myChart.generateLegend();