Estoy usando angular-chart.js para mostrar gráficos. Quiero mostrar información sobre herramientas en gráficos de barras apiladas con etiquetas con cada barra.
Aquí estoy pasando datos en la opción de gráfico pero no funciona.
¿Hay alguna forma en que pueda pasar datos con la variable $scope a los valores de marcado html?
$scope.optionsData = { type: "HorizontalBar", responsive: true, // set to false to remove responsiveness. Default responsive value is true. maintainAspectRatio: false, legend: { display: false }, data: { datasets: [{ data: [2000, 4000, 6000, 8000, 10000, 12000, 14000], labels: ["Label 11", "Label 2", "Label 3", "Label 4", "Label 5", "Label 6", "Label 7"], backgroundColor: ["#73BFB8", "#73BFB8", "#73BFB8", "#73BFB8", "#73BFB8", "#73BFB8", "#73BFB8"], }, { data: [2200, 400, 600, 800, 1000, 1200, 1400], labels: ["Label 21", "Label 22", "Label 3", "Label 4", "Label 5", "Label 6", "Label 7"], backgroundColor: ["#47cf73", "#47cf73", "#47cf73", "#47cf73", "#47cf73", "#47cf73", "#47cf73"] }] }, tooltips:{ callbacks: { label: function(tooltipItem, data) { console.log(data); var datasetData = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]; var datasetLabel = data.datasets[tooltipItem.datasetIndex].labels[tooltipItem.index]; return datasetLabel +':'+ datasetData; }, }, }, scales: { xAxes: [{ id: 'x-axis-1', display: true, scaleOverride: true, scaleStartValue: 0, staked:true, //To FIX y-axis label getting truncated ticks:{ userCallback: function(value, index, values) { return formatNumber(value); }, fontSize: 12 } } ], yAxes: [{ id: 'y-axis-1', display: true, scaleOverride: true, stacked: true, position: 'left' }] } } <canvas id="mixed-chart" class="chart chart-horizontal-bar" chart-data="top25skuData" chart-colors="colours" chart-labels="top25skuLabels" chart-options="optionsData" ></canvas>