How do remove the bottom scale on a Chart.js bar chart

Question

I'm using Chart.js to create the following chart:

The issue is that I want to make the scale at the bottom only show 0 and the maximum number (here being 12).

JavaScript:

<script> new Chart(document.getElementById("leads-bar"), { type: 'horizontalBar', data: { labels: ["Hot", "Warm", "Cold"], datasets: [ { backgroundColor: ["#d23232", "#ff9347", "#bbbbbb"], data: [7, 9, 11] } ] }, options: { legend: { display: false }, tooltips: { display: false }, title: { display: false }, scales: { xAxes: [{ stacked: true, gridLines: { display: false, drawBorder: false, }, scaleShowLabels: false, }], yAxes: [{ stacked: false, gridLines: { color: ["#eeeeee"] } }] } } });

Answer 1

 var dataArr = [154.23, 203.21, 429.01, 637.41]; var chart = new Chart(ctx, { type: 'horizontalBar', data: { labels: [154.23, 203.21, 429.01, 637.41], datasets: [{ label: 'LINE', data: dataArr, backgroundColor: 'rgba(0, 119, 290, 0.2)', borderColor: 'rgba(0, 119, 290, 0.6)', fill: false, tension: 0 }] }, options: { scales: { xAxes: [{ ticks: { min: Math.min.apply(this, dataArr), max: Math.max.apply(this, dataArr), callback: function(value, index, values) { if (index === values.length - 1) return Math.min.apply(this, dataArr); else if (index === 0) return Math.max.apply(this, dataArr); else return ''; } } }] } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> <canvas id="ctx"></canvas>