I have made the changes and it shows the graph, but above some bar graphs we need to show an icon, i'm unable to figure out how to display an icon and text on top of the bar graph.
I see in chart.js there is a plugin called chartjs-plugin-annotation (https://www.chartjs.org/chartjs-plugin- ... st/guide/ ) I'm unable to use this with my current setup.
Code: Select all
const options = {
maintainAspectRatio: false,
aspectRatio: 0.8,
plugins: {
legend: {
labels: {
fontColor: textColor
},
display: false
},
annotation: {
annotations: {
// define annotations here
}
}
},
scales: {
x: {
stacked: true,
ticks: {
color: textColorSecondary,
font: {
weight: 500
}
},
grid: {
display: false,
drawBorder: false
}
},
y: {
stacked: true,
ticks: {
color: textColorSecondary
},
grid: {
display: false,
drawBorder: false
}
}
}
};
const pureCostDatasets = [
{
type: 'bar',
label: 'Storage Hardware',
backgroundColor: PURE_DATA_COLORS.ORANGE,
data: [50, 25, 12, 48, 90, 76, 42],
stack: 'Stack 0',
barPercentage: barWidth,
categoryPercentage: categoryWidth
},
{
type: 'bar',
label: 'Support and Services',
backgroundColor: PURE_DATA_COLORS.LIGHT_ORANGE,
data: [21, 84, 24, 75, 37, 65, 34],
stack: 'Stack 0',
barPercentage: barWidth,
categoryPercentage: categoryWidth
},
{
type: 'bar',
label: 'Credit',
backgroundColor: PURE_DATA_COLORS.GRAY,
data: [-25, 0, 0, 0, 0, 0, 0],
stack: 'Stack 0',
barPercentage: barWidth,
categoryPercentage: categoryWidth
}
];
<Chart type="bar" data={pureCostDatasets} options={chartOptions} />