When the window I'm working on is big enough, the chart appears perfectly clear and visible, but when it's mobile-sized or narrowed somehow, the legend won't show the full text of some categories' titles. Unfortunately, I am not yet able to post pictures so I'm not sure if you get an image of what I'm trying to describe.
The code I'm working on is not mine and, to be completely honest, I had never worked with Javascript before. Any little bit of help would be appreciated.
$.ajax({
type: "POST",
url: "@Url.Action("Grafica_Resumen_Global")",
content: "application/json; charset=utf-8",
dataType: "json",
data: { __RequestVerificationToken: token, fdesde: $('#exp_fdesde').val(), fhasta: $('#exp_fhasta').val(), id_tipo: $('#exp_tipo').val() }
}).done(function (data) {
//Compruebo si hay error o no
if (data.hayerror.length != 0) {
//Tenemos un error
$('.errores_estadisticas').html(data.mensaje_error).removeClass("oculto");
} else {
//¿Sin datos?
if (data.datos_grafica.length == 0) {
$('.errores_estadisticas').html(data.mensaje_error).removeClass("oculto");
} else
{
var datos_grafica = '{"labels":[' + data.rotulos_ejeY + '],"datasets":[' + data.datos_grafica + ']}';
//No hay error y hay datos
$('#grafica').show();
graficar(data.titulo, JSON.parse(datos_grafica));
}
}
}).fail(function (xhr, textStatus, errorThrown) {
$('.errores_estadisticas').html(textStatus).removeClass("oculto");
});
My objective is to fix the vertical width of the bars so that you are able to type long legends such as "Servicio de Modernización Administrativa y TIC" in two or three different lines, maintaining the responsive design of the page.
