0

Estoy realizando una grafica, usando Chart.js, funciona, ahora necesito ubicar el label que muestra la información dentro de la barra del grafico o arriba de este usando Chartjs-plugin-datalabels , uso la forma de la documentación, pero no me esta funcionando la configuración recomendada, de esta forma estoy construyendo el grafico:

new Chart("CostScrap_sf", {
                type: "bar",
                data: {
                    labels: records.map(function (e) { return e.fecha }),
                    datasets: [{
                        label: 'Sunroof',
                        backgroundColor: color,
                        data: records.map(function (e) { return e.total })
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        title: {
                            display: true,
                            text: 'Scrap Cost from ' + $datein.value + ' to ' + $dateout.value
                        },
                        datalabels: {
                            color: 'white',
                            display: function (context) {
                                return context.dataset.data[context.dataIndex] > 15;
                            },
                            font: {
                                weight: 'bold'
                            },
                            formatter: Math.round
                        }
                    }
                }
            });

Se supondría que el atributo datalabels funcionaria para configurarlo, el resultado que espero es algo como esto:

introducir la descripción de la imagen aquí

Actualmente tengo esto: introducir la descripción de la imagen aquí

7
  • No entiendo a cuál label te refieres ni a donde lo quieres ubicar
    – Yussef
    Commented el 5 ene. 2023 a las 19:23
  • Gracias @Yussef, agregue lo que tengo actualmente, espero ser mas claro
    – Robinson
    Commented el 5 ene. 2023 a las 19:37
  • Lo que está en rojo es lo que quieres reubicar y en donde?
    – Yussef
    Commented el 5 ene. 2023 a las 19:38
  • Lo que esta en el rectángulo amarillo quiero ubicarlo donde esta el rectángulo rojo
    – Robinson
    Commented el 5 ene. 2023 a las 19:39
  • Me mataste, entendí menos. El mismo valor que está en el amarillo está en el rojo. O ese todo el tooltip que quieres posicionarlo por sobre el gráfico?
    – Yussef
    Commented el 5 ene. 2023 a las 19:42

1 respuesta 1

1

Para Utilizar el plugin Datalabels, debes:

  1. agregarlo la librería despúes de la de chart.js
  2. Registrarla con Chart.register(ChartDataLabels);

Demo:

Chart.register(ChartDataLabels);
var ctx = document.getElementById("articulos").getContext('2d');
var ventas = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["RETEN DE EMBOLO", "RETEN DE EMPOLO"],
    datasets: [{
      label: 'Artículos más vendidos',
      data: [4,8],
      backgroundColor: [
        'rgba(0,166,149,255)'
      ],
      borderColor: [
        'rgba(0,166,149,255)'
      ],
      borderWidth: 1,
    }]
  },
  options: {
    plugins: {
        datalabels: { //esta es la configuración de pluggin datalabels
            anchor: 'end',
            align: 'top',
            formatter: Math.round,
            font: {
                weight: 'bold'
            }
        }
    }
}
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div style="width:600px;height:400px">
   <canvas id="articulos"></canvas>
</div>

7
  • como que algo extraño ocurre cuando pones el cursor en la barra... Commented el 5 ene. 2023 a las 20:13
  • Era la versión del chart.js ya la cambié y corregido
    – Yussef
    Commented el 5 ene. 2023 a las 20:17
  • Efectivamente!, me hacia falta la linea Chart.register(ChartDataLabels); , la agregue y funciono como se esperaba.
    – Robinson
    Commented el 5 ene. 2023 a las 20:19
  • @Yussef, acabo de darme cuenta de esto; tengo más gráficos en la misma pagina que el grafico que mencione en la pregunta, y cuando actualizo el grafico con el que me ayudaste, se dibuja (correctamente) pero lanza en la consola Uncaught TypeError: Cannot read properties of undefined (reading '_listened') y el resto de canvas quedan en blanco a pesar de que ya estaban dibujados seguí este hilo, pero creo que no lo han resuelto, ¿has presentado un problema similar?
    – Robinson
    Commented el 5 ene. 2023 a las 21:06
  • Acabo de probar con 2 gráficos y no tengo ese problemas. Cuando dices actualizar te refieres a que cambias los datos originales, y si es así, como lo estas haciendo?
    – Yussef
    Commented el 5 ene. 2023 a las 21:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.