Tengo algunas dificultades para que la leyenda se muestre en varios de mis gráficos en mi panel de reacción. Estoy usando React-Chartjs-2. Las leyendas funcionaban originalmente, luego probé desactivar las leyendas en las propiedades de Chart.default y cuando intenté volver a activarlas, no volvieron a aparecer.

La configuración de mi carta global es la siguiente:

// React-Chartjs-2 Global Styling 
defaults.global.elements.point.radius = 1;
defaults.global.elements.line.tension = 0.1;
defaults.global.elements.point.hoverRadius = 10;
defaults.global.elements.point.hitRadius = 12;

// Font
defaults.global.defaultFontSize = 12;
defaults.global.defaultFontColor = "#838383";

// Legend
defaults.global.legend.display = true;
defaults.global.legend.align = "start";
defaults.global.legend.position = "bottom";
defaults.global.legend.labels = {
  padding: 30,
  boxWidth: 15,
};

Las propiedades de mi gráfico local para mis gráficos de líneas, barras y anillos siguen un diseño similar, siendo:

        <Line
          data={props.graph.data}
          height={300}
          options={{
            maintainAspectRatio: false,
            legend: {
              display: true,
            },
            scales: {
              xAxes: [{
                gridLines: {
                  display: false
                }
              }],
              yAxes: [{
                gridLines: {
                  drawBorder: false,
                },
                ticks: {
                  beginAtZero:true,
                  // Include a kwh sign in the ticks
                  callback: function(value, index, values) {
                      return value + 'kWh';
                  }
                },
              }]
            }
          }}
        />

Como puede ver, las leyendas están activadas tanto en la configuración global como local. Actualmente, solo el gráfico de anillos muestra su leyenda. Alternar la pantalla: el valor verdadero solo desplaza la parte inferior del gráfico de líneas / barras hacia arriba y hacia abajo una pequeña cantidad.

¿Alguien encontró un problema similar?

0
luke.mas 22 ene. 2021 a las 13:12

1 respuesta

La mejor respuesta

Parece que los valores predeterminados no pueden manejar que se le pase un objeto, si define los valores predeterminados para el relleno de la etiqueta de la leyenda y boxWidth por separado, se representará su leyenda.

Ejemplo normal, pero el problema era el mismo que si usara react wrapper:

const defaults = Chart.defaults;

defaults.global.elements.point.radius = 1;
defaults.global.elements.line.tension = 0.1;
defaults.global.elements.point.hoverRadius = 10;
defaults.global.elements.point.hitRadius = 12;

// Font
defaults.global.defaultFontSize = 12;
defaults.global.defaultFontColor = "#838383";

// Legend
defaults.global.legend.display = true;
defaults.global.legend.align = "start";
defaults.global.legend.position = "bottom";
defaults.global.legend.labels.padding = 30;
defaults.global.legend.labels.boxWidth = 15;

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
        {
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
        },  
            {
                label: '# of Points',
                data: [7, 11, 5, 8, 3, 7],
                borderWidth: 1
            }
        ]
  },
  options: {
    scales: {
        yAxes: [{
        ticks: {
                    reverse: false
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
canvas { 
 background-color : #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
1
luke.mas 25 ene. 2021 a las 08:56