Resumen de Problema y Solución: Eliminación de Espacios en Gráficos de Barras

Al utilizar Chart.js versión 2.7.2 con Angular Chart.js versión 1, se ha identificado un problema donde existen espacios no deseados entre las etiquetas Q1 y Q2 en un gráfico de barras, incluso cuando los valores correspondientes son 0. A pesar de que los valores de 0 no se muestran visualmente, Chart.js reserva espacio para ellos, lo que causa estos huecos innecesarios. Aquí se presenta la solución para eliminar estos espacios.

Problema

Los valores 0 generan gaps en el gráfico debido a que Chart.js los considera en el espacio entre las categorías. Intentos previos con valores como null, undefined y NaN no llevaron a la solución del problema.

Solución Propuesta

1. Filtrado de Datos: Filtrar los datos de modo que se eliminen los conjuntos que solo contengan valores 0. Esto asegura que no se consideren en el renderizado del gráfico.

   $scope.chartJsProps.data = $scope.chartJsProps.data.filter(dataSet => 
      dataSet.some(value => value !== 0)
   );

2. Configuración de Ejes: Modificar las opciones de los ejes para evitar que se muestren los valores en 0.

   $scope.chartJsProps.options.scales.yAxes[0].ticks = {
      suggestedMin: 1, // Asegura que el mínimo no sea cero
      callback: function (value) {
          return value !== 0 ? value : null; // Oculta los valores cero
      }
   };

3. Ajustes en Conjuntos de Datos: Activar spanGaps en los conjuntos de datos, lo que ayuda a mantener la continuidad en la visualización de los datos.

   $scope.chartJsProps.datasetOverride.forEach(dataset => {
      dataset.spanGaps = true;
   });

Ejemplo de Implementación

A continuación se muestra el código relevante que aborda la cuestión:

var app = angular.module("chartApp", ["chart.js"]);

app.controller("ChartController", function ($scope) {
    $scope.chartJsProps = {
        // Datos previos
        data: [
            [100, null], [110, null], [200, null], [210, null], [210, null], [220, 0],
            [0, 300], [null, 290], [null, 320], [null, 340], [null, 350], [null, 370]
        ],
        // Configuraciones adicionales
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        suggestedMin: 1, 
                        callback: function (value) {
                            return value !== 0 ? value : null; // Ocultar ceros
                        }
                    }
                }]
            }
        }
    };

    // Filtrar datos para eliminar conjuntos con solo ceros
    $scope.chartJsProps.data = $scope.chartJsProps.data.filter(dataSet => 
        dataSet.some(value => value !== 0)
    );

    // Aplicar ajustes a los dataset
    $scope.chartJsProps.datasetOverride.forEach(dataset => {
        dataset.spanGaps = true;
    });
});

Con estas implementaciones, se asegura que Q1 y Q2 se visualicen sin espacios innecesarios, logrando un gráfico compacto y limpio.