Horizontal Bar Chart creation - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Horizontal Bar Chart creation

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.1.6/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//  w w  w. ja v a 2  s.c  o  m
Chart.pluginService.register({
    beforeRender: function(chart) {
        for (var i = 0; i < chart.config.data.datasets[0]._meta[0].data.length; i++) {
            // Change both `3` values to change the height & width of the point
            chart.config.data.datasets[0]._meta[0].data[i]._model["base"] = chart.config.data.datasets[0]._meta[0].data[i]._model["x"] + 3;
            chart.config.data.datasets[0]._meta[0].data[i]._model["height"] = 3;
        }
    }
});
var timelineDaysData = {
    labels: ["Kansas City, KS-current-2013-03-01", "Kansas City, MO-current-2013-03-01", "Austin, TX-current-2013-11-09", "Provo, UT-current-2015-08-01", "Charlotte, NC-current-2016-07-01", "Atlanta, GA-current-2016-07-12", "Nashville, TN-current-2016-08-01", "San Antonio, TX-upcoming-2016-10-17", "San Francisco, CA-upcoming-2017-01-01", "Salt Lake City, UT-upcoming-2017-01-01", "Raleigh-Durham, NC-upcoming-2017-01-01", "Huntsville, AL-upcoming-2017-01-01", "Oklahoma City, OK-potential-2018-01-01", "Phoenix, AZ-potential-2018-01-01", "Portland, OR-potential-2018-01-01", "Chicago, IL-potential-2018-01-01", "San Jose, CA-potential-2018-01-01", "Tampa, FL-potential-2018-01-01", "San Diego, CA-potential-2018-01-01", "Dallas, TX-potential-2018-01-01", "Irvine, TX-potential-2018-01-01", "Jacksonville, FL-potential-2018-01-01", "Los Angeles, CA-potential-2018-01-01", "Louisville, KY-potential-2018-01-01"],
    datasets: [{
        label: '# City status and start date',
        backgroundColor: "rgba(220,220,220,0.5)",
        data: [-1236, -1236, -983, -353, -18, -7, 13, 90, 166, 166, 166, 166, 531, 531, 531, 531, 531, 531, 531, 531, 531, 531, 531, 531],
    }, ]
};
var timelineDaysOptions = {
    elements: {
        rectangle: {
            borderWidth: 2,
            borderColor: 'rgb(0, 0, 0)',
        }
    },
    responsive: true,
    legend: {
        display: false,
    },
    title: {
        display: true,
        text: 'Chart.js Horizontal Bar Chart'
    }
};
var ctx = document.getElementById("timelineDaysChart").getContext("2d");
var my2Bar = new Chart(ctx, {
    type: 'horizontalBar',
    data: timelineDaysData,
    options: timelineDaysOptions,
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="timelineDaysChart" width="600" height="600"></canvas>  
   </body>
</html>

Related Tutorials