Ярлык Chart.js не отображается сверху

Question

Я пытаюсь создать диаграмму с chart.js, и я использую этот плагин для отображения некоторых меток.Но когда больше всего ценят сверху, это не показ.Проверьте первое значение (5) , оно не отображается.Есть ли способ показать это?

Я пробовал заполнение для <canvas>, но не работает.

var ver = document.getElementById("chart").getContext('2d');

var chart = new Chart(ver, {
  type: 'bar',
  data: {
    labels: ['Val1', 'Val2', 'Val3', 'Val4'],
    datasets: [{
      label: "Value",
      borderColor: "#fff",
      backgroundColor: "rgba(248,66,113,.85)",
      hoverBackgroundColor: "#f84271",
      data: [5,3,1,2]
    }]
  },
  options: {
    legend: {
      display: false,
    },
    tooltips: {
      backgroundColor: 'rgba(47, 49, 66, 0.8)',
      titleFontSize: 13,
      titleFontColor: '#fff',
      caretSize: 0,
      cornerRadius: 4,
      xPadding: 10,
      displayColors: false,
      yPadding: 10
    },
    animation: {
      "duration": "1000"
    },
    scales: {
      xAxes: [{
        stacked: false,
        gridLines: {
          drawBorder: true,
          display: true
        },
        ticks: {
          display: true
        }
      }],
      yAxes: [{
        stacked: false,
        gridLines: {
          drawBorder: true,
          display: true
        },
        ticks: {
          display: true
        }
      }]
    },
    plugins: {
      labels: {
        render: 'value',
      }
    },

  }
});

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>

<canvas id="chart"></canvas>

Также здесь можно поиграть: https://jsfiddle.net/9o84ucny/

Answer 1

https://www.chartjs.org/docs/latest/configuration/layout.html

Использование свойства макета для объекта параметров:

layout: {
  padding: {
    top: 20
    }
  }

диаграмма var должна быть такой:

var chart = new Chart(ver, {
  type: 'bar',
  data: {
    labels: ['Val1', 'Val2', 'Val3', 'Val4'],
    datasets: [{
      label: "Value",
      borderColor: "#fff",
      backgroundColor: "rgba(248,66,113,.85)",
      hoverBackgroundColor: "#f84271",
      data: [5,10,1,2]
    }]
  },
  options: {
    layout: {
      padding: {                
        top: 20                
      }
    },
    legend: {
      display: false,
    },
    tooltips: {
      backgroundColor: 'rgba(47, 49, 66, 0.8)',
      titleFontSize: 13,
      titleFontColor: '#fff',
      caretSize: 0,
      cornerRadius: 4,
      xPadding: 10,
      displayColors: false,
      yPadding: 10
    },
    animation: {
      "duration": "1000"
    },
    scales: {
      xAxes: [{
        stacked: false,
        gridLines: {
          drawBorder: true,
          display: true
        },
        ticks: {
          display: true
        }
      }],
      yAxes: [{
        stacked: false,
        gridLines: {
          drawBorder: true,
          display: true
        },
        ticks: {
          display: true          
        }
      }]
    },
    plugins: {
      labels: {
        render: 'value',
      }
    },

  }
});

Answer 2

Это также показывает ясно, когда вы используете отображение заголовка true, установите этот параметр внутри

 options: {
            plugins: {
                labels: {
                    render: 'value',
                }
            },
            title: {
                display: true,
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        callback: function (value) { if (value % 1 === 0) { return value; } }
                    }
                }]
            }
        }