Needed output:
I need to configure a grouped bar chart in which the type of each bar is shown in the axis itself.
I am using chartjs 2.9. How can I add the text "Availability","Co-funded","CPC" in the axis itself. I can't find any configuration which support this implementation in Chart js . Is there any other JS library where this is possible
this.barChart = new .Chart(ctx, {
type: "bar",
data: {
labels: this.barChartData["chart-data"].map((obj) => obj.y),
datasets:
this.barChartData["chart-mapping"].map((obj) => {
return {
label: obj.label,
data: this.barChartData["chart-data"],
backgroundColor: obj.color,
parsing: {
xAxisKey: obj.key,
},
};
}),
},
options: {
datasets: {
barThickness: 20,
},
indexAxis: "y",
plugins: {
legend: { position: "right", align: "start", title: "Type" },
},
},
});
barChartData = {
"chart-mapping": [
{
key: "avi",
label: "Availability..",
color: "rgba(50, 144, 237, 1)",
},
{
key: "cfd",
label: "Co-funded..",
color: "rgba(119, 181, 242, 1)",
},
{
key: "CPC",
label: "CPC",
color: "rgba(157, 83, 242, 1)",
},
{
key: "od",
label: "Order Drop..",
color: "rgba(195, 152, 245, 1)",
},
],
"chart-data": [
{
y: "Name1",
avi: 32,
cfd: 32,
CPC: 57,
od: 12,
},
{
y: "AK",
avi: 15,
cfd: 23,
CPC: 42,
od: 45,
},
{
y: "Name3",
avi: 67,
cfd: 34,
CPC: 21,
od: 43,
},
],
};
Current implementation: