¿Cómo convertir una leyenda de barras en una leyenda de líneas en chart.js 2.7.2?

davy.ai

July 26, 2023 at 7:17 pm

Para cambiar la leyenda y mostrar una línea en lugar de una barra en un gráfico de línea de Chart.js v2.7.2, puedes modificar las propiedades de la leyenda utilizando el objeto legend en las opciones de configuración del gráfico.

Agrega el objeto legend al objeto de configuración y establece la propiedad display en false para ocultar la leyenda predeterminada. Luego, crea un elemento de leyenda personalizado agregando un nuevo elemento span al documento HTML con el estilo deseado para la línea de la leyenda.

Luego, utiliza la biblioteca chartjs-plugin-legend-symbol para personalizar el elemento de la leyenda y mostrar una línea. Agrega la biblioteca a tu archivo HTML utilizando el siguiente enlace CDN:

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-legend-symbol@1.0.2/dist/chartjs-plugin-legend-symbol.min.js"></script>

Luego, agrega el complemento chartjs-plugin-legend-symbol a las opciones del gráfico agregando un nuevo objeto plugins al objeto de configuración con las siguientes propiedades:

plugins: {
  legend: {
    position: 'bottom',
    labels: {
      usePointStyle: true,
      generateLabels: function(chart) {
        var legendItem = Chart.defaults.global.legend.labels.generateLabels(chart)[0];

        legendItem.lineCap = 'butt';
        legendItem.lineDash = [5, 5];
        legendItem.lineWidth = 2;

        return [legendItem];
      }
    }
  },
  legendSymbol: {
    type: 'line',
    labels: {
      usePointStyle: false
    }
  }
}

Esto establecerá la posición de la leyenda en la parte inferior del gráfico, usará el estilo de punto para la etiqueta de la leyenda y generará un elemento de leyenda personalizado con un estilo de extremo de línea ‘butt’, una línea punteada con un patrón de 5px encendido/apagado y un ancho de línea de 2px. El complemento legendSymbol está configurado para usar un tipo de línea como símbolo de la leyenda y no usar el estilo de punto para la etiqueta de la leyenda.

Aquí tienes cómo se vería el código modificado:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    const labels = [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
    ];
    const data = {
      labels: labels,
      datasets: [{
        label: 'My First dataset',
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: [0, 10, 5, 2, 20, 30, 45],
      }]
    };


    const config = {
      type: 'line',
      data: data,
      options: {
        plugins: {
          legend: {
            position: 'bottom',
            display: false,
            labels: {
              usePointStyle: true,
              generateLabels: function(chart) {
                var legendItem = Chart.defaults.global.legend.labels.generateLabels(chart)[0];

                legendItem.lineCap = 'butt';
                legendItem.lineDash = [5, 5];
                legendItem.lineWidth = 2;

                return [legendItem];
              }
            }
          },
          legendSymbol: {
            type: 'line',
            labels: {
              usePointStyle: false
            }
          }
        }
      }
    };

    const myChart = new Chart(
        document.getElementById('myChart'),
        config
      );


<!-- language: lang-html -->

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-legend-symbol@1.0.2/dist/chartjs-plugin-legend-symbol.min.js"></script>
    </head>

    <body>
      <div>
        <canvas id="myChart"></canvas>
        <span style="display: inline-block; width: 15px; height: 15px; border: 2px dashed rgb(255, 99, 132); margin-right: 5px;"></span>My First Dataset
      </div>
    </body>

    </html>

<!-- end snippet -->

Ten en cuenta que hemos agregado un elemento span con el estilo de la línea de la leyenda justo después del elemento canvas y hemos modificado la propiedad display de la leyenda predeterminada para que sea false.

El resultado será un gráfico de línea con un elemento de leyenda personalizado que muestra una línea en lugar de una barra.

Aquí tienes el JS Bin modificado: https://jsbin.com/pipewufoca/edit?html,js,output

es.davy.ai

¿Tienes una pregunta?

¿Cómo convertir una leyenda de barras en una leyenda de líneas en chart.js 2.7.2?

Answer

davy.ai