Chart Legends width-height with overflow scroll in ChartJS - Javascript Chart.js

Javascript examples for Chart.js:Legend

  1. HOME
  2. Javascript
  3. Chart.js
  4. Legend

Description

Chart Legends width-height with overflow scroll in ChartJS

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
      <style id="compiled-css" type="text/css">

.chart-legend li span{
   display: inline-block;
   width: 12px;
   height: 12px;
   margin-right: 5px;
}
.chart-legend{/*ww  w.  j  av a  2  s  . c om*/
   height:250px;
   overflow:auto;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  options:{
     legend:{
      display:false
    }
  },
  data: {
    labels: ["lable_1", "lable_2", "lable_3", "lable_4", "lable_5", "lable_6", 
             "lable_7", "lable_8", "lable_9", "lable_10", "lable_11", "lable_12", 
             "lable_13", "lable_14", "lable_15", "lable_16", "lable_17", "lable_18", 
             "lable_19", "lable_20", "lable_21", "lable_22", "lable_23", "lable_24", 
             "lable_25", "lable_26", "lable_27", "lable_28", "lable_29", "lable_30", 
             "lable_31", "lable_32", "lable_33", "lable_34", "lable_35", "lable_36", 
             "lable_37", "lable_38", "lable_39", "lable_40", "lable_41", "lable_42", 
             "lable_43", "lable_44", "lable_45", "lable_46", "lable_47", "lable_48", 
             "lable_49", "lable_50"],
    datasets: [{
      backgroundColor: [
        "#2ecc71","#3498db","#95a5a6","#9b59b6","#f1c40f","#e74c3c","#34495e","#2ecc71","#3498db",
        "#95a5a6","#9b59b6","#f1c40f","#e74c3c","#34495e","#2ecc71","#3498db","#95a5a6",
        "#9b59b6",
        "#f1c40f",
        "#e74c3c",
        "#34495e",
        "#2ecc71",
        "#3498db",
        "#95a5a6",
        "#9b59b6",
        "#f1c40f",
        "#e74c3c",
        "#34495e",
        "#2ecc71",
        "#3498db",
        "#95a5a6",
        "#9b59b6",
        "#f1c40f",
        "#e74c3c",
        "#34495e",
        "#2ecc71",
        "#3498db",
        "#95a5a6",
        "#9b59b6",
        "#f1c40f",
        "#e74c3c",
        "#34495e",
        "#2ecc71",
        "#3498db",
        "#95a5a6",
        "#9b59b6",
        "#f1c40f",
        "#e74c3c",
        "#34495e",
        "#2ecc71",
        "#3498db",
        "#95a5a6",
        "#9b59b6",
        "#f1c40f",
        "#e74c3c",
        "#34495e"
      ],
      data: [74, 22, 77, 19, 72, 17, 55, 14, 64, 93, 99, 58, 6, 13, 31, 61, 19, 
      97, 25, 94, 50, 83, 13, 15, 54, 19, 60, 41, 37, 27, 51, 21, 36, 69, 80, 20, 
      64, 74, 79, 48, 66, 11, 94, 57, 15, 18, 83, 41, 64, 48]
    }]
  }
});
document.getElementById('js-legend').innerHTML = myChart.generateLegend();
    }

      </script> 
   </head> 
   <body> 
      <canvas id="myChart" width="500" height="300"></canvas> 
      <div id="js-legend" class="chart-legend"> 
      </div>  
   </body>
</html>

Related Tutorials