1

Estoy trabajando con Chart JS (https://www.chartjs.org) con un gráfico "line" y nesecito cambiar el tamaño de los números en la barra pero no he podido.

Agradezco cualquier aporte si alguien conoce como se aumenta.

Dejo mi Query introducir la descripción de la imagen aquíJavaScript y una imagen de lo que quiero que aumenta su tamaño

<script>
                    var Etiqueta1 = <%= Etiquetas1%>;
                    var Valor1 = <%= Valores1%>;
                    var Etiqueta2 = <%= Etiquetas2 %>;
                    var Valor2 = <%= valores2 %>;
                    var Etiqueta3 = <%= Etiquetas3 %>;
                    var Valor3 = <%= valores3 %>;
                    var ctx2 = document.getElementById("Graf3").getContext('2d');
                    Chart.defaults.global.defaultFontSize  = 10
                    var Graf3 = new Chart(ctx2, {
                        type: 'line',
                        responsive: true,
                        data: {
                            labels: Etiqueta2 ,
                            datasets: [{
                                label: "Total Solicitudes",
                                backgroundColor: ["#2ECC71"],
                                data: Valor1,
                            },
                                        {
                                            label: "En Trámite",
                                            backgroundColor: ["#F1C40F"],
                                            data: Valor2
                                        },
                                        {
                                            label: "Cerradas",
                                            backgroundColor: ["#FF5733"],
                                            data: Valor3
                                        }]
                        },
                        options: {
                            legend: { 
                                display: true,
                                position: 'bottom',
                                labels: {
                                    fontSize: 26,
                                }
                            },
                            scales: {
                                yAxes: [{
                                    ticks: { 
                                        beginAtZero: true,
                                        fontSize: 20
                                    }
                                }],
                                xAxes: [{
                                    ticks: { 
                                        beginAtZero: true,
                                        fontSize: 20
                                    }
                                }],
                            },
                            pointLabels: { 
                                fontSize: 30
                            },

                            title: {
                                display: true,
                                text: 'ESTADO DE LOS REQUERIMIENTOS MENSUALES',
                                fontSize: 30,
                                fontFamily: "candara",
                                fontColor: '#000',  
                                position: 'top',
                            },
                        }             
                    });
                </script>
<div class="grafico_linear">
                    <canvas id="Graf3" class="linear"></canvas>
                </div>

1 respuesta 1

1

Tienes que cambiar el valor en scales yAxes ticks fontSize. Ejemplo:

var Etiqueta2 = ['Total Solicitudes', 'En Tramite', 'Cerradas'];
                   
                    var ctx2 = document.getElementById("Graf3").getContext('2d');
                    Chart.defaults.global.defaultFontSize  = 10;
                    var Graf3 = new Chart(ctx2, {
                        type: 'line',
                        responsive: true,
                        
                        data: {
                            labels: Etiqueta2 ,
                            datasets: [{
                                label: "Total Solicitudes",
                                backgroundColor: ["#2ECC71"],
                                data: [10],
                                pointRadius: 10,
                            },
                                        {
                                            label: "En Trámite",
                                            backgroundColor: ["#F1C40F"],
                                            data: [20],
                                            pointRadius: 10,
                                        },
                                        {
                                            label: "Cerradas",
                                            backgroundColor: ["#FF5733"],
                                            data: [30],
                                            pointRadius: 10,
                                        }]
                        },
                        options: {
                            tooltips: {
                            titleFontSize: 15,
                            bodyFontSize: 15
                        },
                            legend: { 
                                display: true,
                                position: 'bottom',
                                labels: {
                                    fontSize: 26,
                                }
                            },
                            scales: {
                                yAxes: [{
                                    ticks: { 
                                        beginAtZero: true,
                                        fontSize: 40
                                    }
                                }],
                                xAxes: [{
                                    ticks: { 
                                        beginAtZero: true,
                                        fontSize: 20
                                    }
                                }],
                            },
                            pointLabels: { 
                                fontSize: 30
                            },

                            title: {
                                display: true,
                                text: 'ESTADO DE LOS REQUERIMIENTOS MENSUALES',
                                fontSize: 30,
                                fontFamily: "candara",
                                fontColor: '#000',  
                                position: 'top',
                            },
                        }             
                    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
<div class="grafico_linear">
                    <canvas id="Graf3" class="linear"></canvas>
                </div>

8
  • Gracias por tu respuesta, ese valor que me mencionas cambia es el tamaño de los valores de al lado 450 350 300, nesecito que cambie el tamaño de los valores de los puntos como muestro en la imagen. Commented el 29 ene. 2019 a las 23:19
  • En ese caso puedes usar pointRadius. Ya edite mi respuesta.
    – alanfcm
    Commented el 29 ene. 2019 a las 23:26
  • aumenta es el tamaño de los Point mas no el del valor en si, sigue siendo el mismo tamaño, la documentación de Chart JS no es muy clara, agradesco tu respuesta creo que es mejor dejarlos así Commented el 29 ene. 2019 a las 23:29
  • Creo que no te explicaste bien, pero finalmente, tienes que usar options tooltips bodyFontSize ya edite
    – alanfcm
    Commented el 29 ene. 2019 a las 23:33
  • 1
    Ya logre darle a la soliciòn tenias razon no tuve en cuenta el Plugin de Data Labels lo queuse fue abrir Plugins: {datalabels:{font:{size:80}}}. Agradesco tu tiempo y tus aportes por ellso llegue a la soluciòn Mil Gracias. Commented el 30 ene. 2019 a las 2:58

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.