title: Make a Histogram in Chart.js
body: <p>We use the <a href="https://www.chartjs.org/" rel="noreferrer">Chart.js</a> library in our codebase and I need to create a histogram, which is not one of their default chart types. So I'm attempting to override the x-axis tick marks on a bar chart so that they appear at the left and right corners of each bar instead of directly underneath.</p>
  
  <p>In the below example I've gotten the x-axis how I want it by adding an extra item in the <code>labels</code> array and displaying a second x-axis in the <code>options</code>. But, because there's now an extra label, the bars are taking up 4/5ths of the width, leaving space for a non-existent data point.</p>
  
  <p>Is there some way that I can specify to ignore the missing data point? Or offset the bars? Or am I barking up the wrong tree?</p>
  
  <p>The <a href="http://www.chartjs.org/docs/latest/" rel="noreferrer">documentation</a> is a little hard to parse through, so I'm not sure if there's something simple I'm missing.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var ctx = document.getElementById("myChart").getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: [0, 1, 2, 3, 4],
      datasets: [{
        label: 'Group A',
        data: [12, 19, 3, 5],
        backgroundColor: 'rgba(255, 99, 132, 1)',
      }]
    },
    options: {
      scales: {
        xAxes: [{
          display: false,
          barPercentage: 1.30,
        }, {
          display: true,
        }],
        yAxes: [{
          ticks: {
            beginAtZero:true
          }
        }]
      }
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>canvas { max-width: 200px; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"&gt;&lt;/script&gt;
  &lt;canvas id="myChart" width="20" height="20"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Edit: I realize there are other libraries that could achieve something similar and I am looking into other options. But, I've posted this just in case someone out there knows of a solution via Chart.js, which would be ideal.</p>
  
  <p>Here's an example of what the end result I'm going for is:</p>
  
  <p><a href="https://i.stack.imgur.com/BXF3C.png" rel="noreferrer"><img src="https://i.stack.imgur.com/BXF3C.png" alt="enter image description here"></a></p>