1

tengo un problema al mostrar las labels horizontales en el chartjs, intente cambiando el tamaño de la letra y obviamente lo reduce, pero lo que quiero realmente es que aparte de que el tamaño se reduzca, también el label encaje en dos renglones de ser necesario. Y no únicamente uno como es por defecto (y como se ve en la imagen).

Como pueden ver en la imagen, deberian de haber 9 labels, pero solo esta mostrando el titulo de tres, ya logre rotarlo, porque me gusta mas horizontal, pero aun necesito reducir la letra y/o acomodarlo para que encaje en dos o tres renglones

La opcion que accede a los ejes horizontales es

xAxes: [{
              ticks: {
                fontSize: 10,
                maxRotation: 0 // angle in degrees
              }
            }],

Este es el codigo completo:

<script>

    var data = {
            labels: ["Cuidado Del Cabello", "Listerine - Aceite", "Cremas Corporales - Estuches", "Resto", "Jabon Adulto - Crema Liq. Baby", "Jabon Baby", "Carefree - Bano Liquido", "OB - Toallitas", "Stayfree - Desitin"],
            datasets: [

                    {"label" : "Cuota marzo","backgroundColor" :"#5DA5DA","data" : [195872263, 221779339, 161250805, 141306654, 175639549, 147123174, 251369895, 54415438, 199509073, ]},{"label" : "Venta marzo","backgroundColor" :"#FAA43A","data" : [12588888, 300000000, 1919191, 0, 91919113, 0, 9411191, 54000000, 0, ]}

            ]
        }

    var ctx = $("#grafico1").get(0).getContext("2d");       

    var myChart = new Chart(ctx, {
        type: 'bar',
        options: {
            scales: {
                xAxes: [{
                  ticks: {
                    fontSize: 10,
                    maxRotation: 0 // angle in degrees
                  }
                }],
                yAxes: [{
                    ticks: {
                        // Include a dollar sign in the ticks
                        callback: function(value, index, values) {
                            var formmatedvalue=formatMoneda(value);
                            return formmatedvalue;
                        }
                    }
                }]
            },
            responsive: true,
            maintainAspectRatio: false,
            animation: {
                animateScale: true
            },
            tooltips: {
                // enabled: false,
                intersect: 'false',
                mode: 'index',
                callbacks: {
                    label: function(tooltipItem, data) {
                        var allData = data.datasets[tooltipItem.datasetIndex].data;
                        var tooltipLabel = data.labels[tooltipItem.index];
                        var tooltipData = allData[tooltipItem.index];
                        var formmatedvalue=formatMoneda(tooltipData);
                        return formmatedvalue;
                    }
                }
            }
        },
        data: data,
    });
</script>

Gracias

Grafico ChartJs

1 respuesta 1

1

Navegando encontré la forma de hacerlo, Se debe pasar un sub array con el label (soportado despues de chartjs 2.x)

labels: [["etiqueta", "mas", "larga", "de", "todas"], "etiqueta 2"],

Para esto encontre la siguiente función la cual se pasa en el callback

function formatLabel(str, maxwidth){
var sections = [];
var words = str.split(" ");
var temp = "";

words.forEach(function(item, index){
    if(temp.length > 0)
    {
        var concat = temp + ' ' + item;

        if(concat.length > maxwidth){
            sections.push(temp);
            temp = "";
        }
        else{
            if(index == (words.length-1))
            {
                sections.push(concat);
                return;
            }
            else{
                temp = concat;
                return;
            }
        }
    }

    if(index == (words.length-1))
    {
        sections.push(item);
        return;
    }

    if(item.length < maxwidth) {
        temp = item;
    }
    else {
        sections.push(item);
    }

});

return sections;
}

Aqui el codigo de como se debe de pasar el label para que sea formateada

xAxes: [{
    ticks: {
        fontSize: 10,
        fontStyle: \'inherit\',
        maxRotation: 0,
        minRotation: 0,
        callback: function(value, index, values) {
            var formmatedvalue=formatLabel(value, 15);
            return formmatedvalue;
        }
    }
}],

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.