如何在chartjs中显示条形图

Question

I create a chart using chartjs, how do I display the pediactric to be visible horizontally bar?

<canvas id="myChart"></canvas>
      </div>
      <script>
        var ctx = document.getElementById("myChart").getContext('2d');
        var myChart = new Chart(ctx, {
          type: 'horizontalBar',
          data: {
            labels: ["Interna", "Pediatric", "Obygn", "Surgical"],
            datasets: [{
              label: '100% of Votes',
              data: [80, 55, 60, 70],
              backgroundColor: [
                'rgba(150, 99, 132, 0.6)',
                'rgba(180, 99, 132, 0.6)',
                'rgba(210, 99, 132, 0.6)',
                'rgba(240, 99, 132, 0.6)'
              ],
              borderColor: [
                'rgba(150, 99, 132, 1)',
                'rgba(180, 99, 132, 1)',
                'rgba(210, 99, 132, 1)',
                'rgba(240, 99, 132, 1)'
              ],
              borderWidth: 2,
              hoverBorderWidth: 0
            }]
          },
          options: {
          

Answer 1

The x-axis scale begins at 55. Since the value of Pediatric is 55 no bar is visible.

Set the following option to have the scale always begin at zero:

options: {
    scales: {
        xAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}