0
228
ViewsChartJS: barra única de gráfico de barras. Quiero un borde alrededor de toda la barra, incluido el valor máximo de Y
Quiero crear una sola barra usando un gráfico de barras. La configuración es que el usuario puede seleccionar diferentes opciones (que representan los colores). En este ejemplo (enlace de codesandbox a continuación) tengo una barra que tiene un valor máximo de 90.000. Los tres valores elegidos son 20.000, 30.000 y 15.000, totalizando 65.000.
Ahora, mi objetivo es tener un borde alrededor de toda esta barra, no solo los colores. En la imagen de abajo esto se representa con el borde rojo. Actualmente hago esto colocando un elemento contenedor alrededor de mi elemento lienzo, pero me gustaría hacerlo en el lienzo mismo, sin usar un elemento contenedor. Alguien tiene una idea de como hacer esto?
1 answers
Answer question0
Debe definir diferentes propiedades del dataset de datos, como borderSkipped , borderRadius , borderWidth para lograr lo que está buscando.
No sé por qué, pero también tuve que definir los data del conjunto de datos en la parte inferior como una barra flotante para poder ver el borde redondeado.
data: [[0, 20000]]Eche un vistazo al código ejecutable a continuación y vea cómo podría funcionar.
new Chart('chart', { type: 'bar', data: { labels: [''], datasets: [{ label: "currentAmount", data: [[0, 20000]], backgroundColor: "#bbb", borderColor: "#f00", borderWidth: 2, borderSkipped: 'top', borderRadius: 30, barPercentage: 0.5 }, { label: "amount 1", data: [30000], backgroundColor: "orange", borderColor: "#f00", borderWidth: { left: 2, right: 2 }, barPercentage: 0.5 }, { label: "amount 2", data: [15000], backgroundColor: "green", borderColor: "#f00", borderWidth: { left: 2, right: 2 }, barPercentage: 0.5 }, { label: "remaining", data: [25000], backgroundColor: "#fff", borderColor: "#f00", borderWidth: 2, borderSkipped: 'bottom', borderRadius: 30, barPercentage: 0.5 }, ] }, options: { plugins: { legend: { display: false }, tooltip: { displayColors: false } }, scales: { y: { display: false, stacked: true, beginsAtZero: true }, x: { display: false, stacked: true } } } }); canvas { max-width: 200px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script> <canvas id="chart"></canvas>