Actualmente muestro mis datos así: Haga clic aquí
pero me gustaría mostrar los datos así: Haga clic aquí
La idea es que en la parte inferior muestre el resumen de los números de los tres colores combinados, pero una vez que pase el mouse, mostrará cuánto tiene cada color.
Si todo es una barra, si el rojo es 7, el azul es 3, el rojo pero será mucho más en la barra.
Este es el código de la versión 1, hecho con chart js
var ctx = document.getElementById("myChart").getContext("2d"); var data = { labels: ["Chocolate", "Vanilla", "Strawberry"], datasets: [ { label: "Blue", backgroundColor: "blue", data: [3, 7, 4] }, { label: "Red", backgroundColor: "red", data: [4, 3, 5] }, { label: "Green", backgroundColor: "green", data: [7, 2, 6] } ] }; var myBarChart = new Chart(ctx, { type: 'bar', data: data, options: { barValueSpacing: 20, scales: { yAxes: [{ ticks: { min: 0, } }] } } }); const myChart = new Chart( document.getElementById('myChart'), config );su problema es el siguiente, está usando una configuración incorrecta, debe algo como esto:
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script> <canvas id="MyChart" width="400" height="200"></canvas> <script> new Chart(document.getElementById("MyChart"), { type: 'bar', data: { labels: [2017], datasets: [{ label: "Chocolate", type: "bar", stack: "Base", backgroundColor: "#eece01", data: [30], }, { label: "Vanilla", type: "bar", stack: "Base", backgroundColor: "#87d84d", data: [-15], }, { label: "Strawberry", type: "bar", stack: "Base", backgroundColor: "#f8981f", data: [20], }, { label: "candy", type: "bar", stack: "Base", backgroundColor: "#00b300", backgroundColorHover: "#3e95cd", data: [-10] }] }, options: { plugins: { title: { display: true, text: 'Chart.js Bar Chart - Stacked' }, }, responsive: true, interaction: { intersect: false, }, scales: { x: { stacked: true, }, y: { stacked: true } } } }); </script>Ahora solo necesita arreglar los estilos y tamaños del gráfico.
Si alguien encuentra esto, la solución es esta:
const config = { type: 'bar', data: data, options: { plugins: { title: { display: true, text: 'Chart.js Bar Chart - Stacked' }, }, responsive: true, scales: { x: { stacked: true, }, y: { stacked: true } } } };