Mostrar valores en la parte superior de las barras en chart.js

Haz todo lo posible por entender el código bien antes de usarlo a tu trabajo y si ttienes algo que aportar puedes comentarlo.

Solución:

Saqué los datos de la definición dentro de myChart de esa manera podría sacar el valor máximo del conjunto de datos. Luego, dentro de los yAxes, puede configurar los ticks máximos para que sean el valor máximo + 10 de su conjunto de datos. Esto garantiza que las barras superiores del gráfico no se salgan del borde del lienzo y no muestren su valor.

var ctx = document.getElementById("myChart");
debugger;
var data = 
  labels: ["2 Jan", "9 Jan", "16 Jan", "23 Jan", "30 Jan", "6 Feb", "13 Feb"],
  datasets: [
    data: [150, 87, 56, 50, 88, 60, 45],
    backgroundColor: "#4082c4"
  ]

var myChart = new Chart(ctx, 
  type: 'bar',
  data: data,
  options: 
    "hover": 
      "animationDuration": 0
    ,
    "animation": 
      "duration": 1,
      "onComplete": function() 
        var chartInstance = this.chart,
          ctx = chartInstance.ctx;

        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        this.data.datasets.forEach(function(dataset, i) 
          var meta = chartInstance.controller.getDatasetMeta(i);
          meta.data.forEach(function(bar, index) 
            var data = dataset.data[index];
            ctx.fillText(data, bar._model.x, bar._model.y - 5);
          );
        );
      
    ,
    legend: 
      "display": false
    ,
    tooltips: 
      "enabled": false
    ,
    scales: 
      yAxes: [
        display: false,
        gridLines: 
          display: false
        ,
        ticks: 
          max: Math.max(...data.datasets[0].data) + 10,
          display: false,
          beginAtZero: true
        
      ],
      xAxes: [
        gridLines: 
          display: false
        ,
        ticks: 
          beginAtZero: true
        
      ]
    
  
);

La forma más rápida que encontré para hacer esto fue usar este complemento: https://github.com/chartjs/chartjs-plugin-datalabels

Las etiquetas se pueden agregar a sus gráficos simplemente importando el complemento al archivo js, ​​por ejemplo:

import 'chartjs-plugin-datalabels'

Y si desea aplicar valores en la parte superior (globalmente), simplemente configure estas opciones en su código:

Chart.defaults.global.plugins.datalabels.anchor = 'end';
Chart.defaults.global.plugins.datalabels.align = 'end';

Se pueden encontrar más opciones aquí: https://chartjs-plugin-datalabels.netlify.com/options.html

Aquí hay una solución más robusta que mostrará el valor del punto de datos dentro de la barra para los casos en que la altura del eje esté cerca de la altura de la barra. En otras palabras, esto mostrará el valor sobre la barra y/o debajo de la barra si el texto se extenderá más allá del área visible del lienzo.

Chart.plugins.register(
  afterDraw: function(chartInstance) 
    if (chartInstance.config.options.showDatapoints) 
      var helpers = Chart.helpers;
      var ctx = chartInstance.chart.ctx;
      var fontColor = helpers.getValueOrDefault(chartInstance.config.options.showDatapoints.fontColor, chartInstance.config.options.defaultFontColor);

      // render the value of the chart above the bar
      ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
      ctx.textAlign = 'center';
      ctx.textBaseline = 'bottom';
      ctx.fillStyle = fontColor;

      chartInstance.data.datasets.forEach(function (dataset) 
        for (var i = 0; i < dataset.data.length; i++) 
          var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
          var scaleMax = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
          var yPos = (scaleMax - model.y) / scaleMax >= 0.93 ? model.y + 20 : model.y - 5;
          ctx.fillText(dataset.data[i], model.x, yPos);
        
      );
    
  
);

Puede habilitar su gráfico para usar el complemento agregando la propiedad a continuación en las opciones de su gráfico.

showDatapoints: true,

Te mostramos reseñas y valoraciones

Tienes la opción de añadir valor a nuestra información dando tu veteranía en las referencias.

---

---

Utiliza Nuestro Buscador