0
242
Visualizações¿Hay alguna forma de cambiar el tamaño de fuente de las etiquetas en el gráfico de barras en Chart.js v3?
Crea un gráfico de barras que se extiende horizontalmente.
CódigoSandBox
El tamaño de letra de sellos como Bach y Morzart es pequeño y quiero aumentarlo. ¿Podría decirme cómo cambiar el tamaño de fuente de las etiquetas?
<div class="chartWrap"> <canvas id="chart"></canvas> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> const labels = ["Bach", "Mozart", "Ravel", "Chopin", "Beethoven"]; const data = { labels: labels, datasets: [ { data: [9, 10, 7, 8, 8], backgroundColor: "rgba(0, 0, 0, 0.5)" } ] }; const options = { responsive: true, indexAxis: "y", plugins: { legend: { display: false } } }; const config = { type: "bar", data: data, options: options }; const ctx = document.getElementById("chart").getContext("2d"); new Chart(ctx, config); </script> Mirando los muchos ejemplos de Chart.js, sé que el tamaño de fuente debe especificarse en options > scales , pero no sabía qué escribir en scales.
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
Agrega esto a las opciones.
scales: { y: { ticks: { font: { size: 30, } } } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> </head> <body> <div class="chartWrap"> <canvas id="chart"></canvas> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> const labels = ["Bach", "Mozart", "Ravel", "Chopin", "Beethoven"]; const data = { labels: labels, datasets: [{ data: [9, 10, 7, 8, 8], backgroundColor: "rgba(0, 0, 0, 0.5)" }] }; const options = { responsive: true, indexAxis: "y", plugins: { legend: { display: false } }, scales: { y: { ticks: { font: { size: 30, } } } } }; const config = { type: "bar", data: data, options: options }; const ctx = document.getElementById("chart").getContext("2d"); new Chart(ctx, config); </script> </body> </html>
·
Juan Pablo Isaza
Relatório
Responde à pergunta