how to modify horizontal bar chart - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

how to modify horizontal bar chart

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Chart.js Rounded Bars</title> 
   </head> 
   <body translate="no" onload="onLoad()">   
      <title>Chart.js Rounded Bar Charts Demo</title> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script> 
      <script src="https://gitcdn.link/repo/jedtrow/Chart.js-Rounded-Bar-Charts/master/Chart.roundedBarCharts.js"></script>   
      <div style="height: 400px; width: 600px;"> 
         <canvas id="horizontal_bar_chart"></canvas> 
      </div> 
      <script>
            var data = {//from  w  ww .  j a va 2 s . c  o m
               labels: [["Dept1", 81], ["Dept2", 82], ["Dept3", 83]],
                    datasets: [{
                        label: '% change in support',
                        data: [12, -19, 5],
                        backgroundColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)'
                        ],
                     borderWidth: 0
                    }]
               };
            var options = {
                cornerRadius: 10,
                maintainAspectRatio: false
            };
            function onLoad(){
                // Horizontal Bar Chart
                var ctxHBar = document.getElementById("horizontal_bar_chart");
                var myHorizBarChart = new Chart(ctxHBar, {
                    type: 'horizontalBar',
                    data: data,
                    options: options
                });
            }
        
      </script>    
   </body>
</html>

Related Tutorials