0👍
✅
To group the information, in the end the only thing I did was assign an AxisID to my balance, to be able to draw on them and thus use lines to separate my information and add sub labels
const apidata = [{
"id": 6430591403,
"task_id": 110578536,
"user_id": 854500,
"keyboard": 872,
"mouse": 2123,
"input_tracked": 20149,
"manual": 9000,
"idle": 0,
"resumed": 0,
"billable": 20149,
"created_at": "2022-09-02T17:40:03.167232Z",
"updated_at": "2022-09-03T11:00:24.381152Z",
"username": "user1",
"status": "active",
"weekly_hours": 24,
"three_weekly_hours": 12,
"summaryWeekly": 29149,
"summaryoverallWeekly": 2827,
"dayliHoursDaily": 4,
"summaryHoursTrackedWeekly": 8,
"percentageHours": 2.024236111111111,
"activityWeekly": 0,
"percentageActivityWeekly": 2,
"rolTittle": "DEV",
"rolPriority": 0,
"summaryStarts": 0,
"percentActivityW": 8,
"avergeHourWeekly": 2.025
},
{
"id": 6418215334,
"task_id": 111232314,
"user_id": 1726823,
"keyboard": 11761,
"mouse": 35504,
"input_tracked": 73802,
"manual": 862,
"idle": 0,
"resumed": 0,
"billable": 74664,
"created_at": "2022-09-01T14:32:20.799309Z",
"updated_at": "2022-09-02T11:00:48.637118Z",
"username": "user9",
"status": "active",
"weekly_hours": 44,
"three_weekly_hours": 20,
"summaryWeekly": 74664,
"summaryoverallWeekly": 43021,
"dayliHoursDaily": 8,
"summaryHoursTrackedWeekly": 21,
"percentageHours": 5.185,
"activityWeekly": 0,
"percentageActivityWeekly": 14,
"rolTittle": "DEV",
"rolPriority": 0,
"summaryStarts": 1,
"percentActivityW": 41,
"avergeHourWeekly": 5.1850000000000005
},
{
"id": 6436683187,
"task_id": 110916251,
"user_id": 957963,
"keyboard": 2050,
"mouse": 5530,
"input_tracked": 13478,
"manual": 1181,
"idle": 0,
"resumed": 0,
"billable": 14659,
"created_at": "2022-09-03T14:05:12.543140Z",
"updated_at": "2022-09-03T15:39:51.279106Z",
"username": "user10",
"status": "active",
"weekly_hours": 44,
"three_weekly_hours": 20,
"summaryWeekly": 14659,
"summaryoverallWeekly": 7182,
"dayliHoursDaily": 8,
"summaryHoursTrackedWeekly": 4,
"percentageHours": 1.017986111111111,
"activityWeekly": 0,
"percentageActivityWeekly": 12,
"rolTittle": "DEV",
"rolPriority": 0,
"summaryStarts": 0,
"percentActivityW": 12,
"avergeHourWeekly": 1.0175
},
{
"id": 6415608216,
"task_id": 110169040,
"user_id": 1476078,
"keyboard": 23401,
"mouse": 51185,
"input_tracked": 99108,
"manual": 0,
"idle": 0,
"resumed": 0,
"billable": 99108,
"created_at": "2022-09-01T06:17:26.341286Z",
"updated_at": "2022-09-02T02:03:01.258835Z",
"username": "user11",
"status": "active",
"weekly_hours": 44,
"three_weekly_hours": 20,
"summaryWeekly": 99108,
"summaryoverallWeekly": 67332,
"dayliHoursDaily": 8,
"summaryHoursTrackedWeekly": 28,
"percentageHours": 6.882499999999999,
"activityWeekly": 0,
"percentageActivityWeekly": 17,
"rolTittle": "DEV",
"rolPriority": 0,
"summaryStarts": 6,
"percentActivityW": 48,
"avergeHourWeekly": 6.885
},
{
"id": 6436711920,
"task_id": 111299925,
"user_id": 1762379,
"keyboard": 9260,
"mouse": 27177,
"input_tracked": 63034,
"manual": 0,
"idle": 0,
"resumed": 0,
"billable": 63034,
"created_at": "2022-09-03T14:37:55.058824Z",
"updated_at": "2022-09-04T11:00:09.826018Z",
"username": "user12",
"status": "active",
"weekly_hours": 44,
"three_weekly_hours": 20,
"summaryWeekly": 63034,
"summaryoverallWeekly": 33416,
"dayliHoursDaily": 8,
"summaryHoursTrackedWeekly": 18,
"percentageHours": 4.377361111111111,
"activityWeekly": 0,
"percentageActivityWeekly": 13,
"rolTittle": "DEV",
"rolPriority": 0,
"summaryStarts": 0,
"percentActivityW": 40,
"avergeHourWeekly": 4.3774999999999995
},
{
"id": 6438388730,
"task_id": 111271635,
"user_id": 1763812,
"keyboard": 8023,
"mouse": 34217,
"input_tracked": 60716,
"manual": 3056,
"idle": 0,
"resumed": 0,
"billable": 63772,
"created_at": "2022-09-04T06:11:14.526669Z",
"updated_at": "2022-09-04T11:00:10.753741Z",
"username": "user13",
"status": "active",
"weekly_hours": 44,
"three_weekly_hours": 20,
"summaryWeekly": 63772,
"summaryoverallWeekly": 39685,
"dayliHoursDaily": 8,
"summaryHoursTrackedWeekly": 18,
"percentageHours": 4.4286111111111115,
"activityWeekly": 0,
"percentageActivityWeekly": 16,
"rolTittle": "DEV",
"rolPriority": 0,
"summaryStarts": 0,
"percentActivityW": 66,
"avergeHourWeekly": 4.4275
},
{
"id": 6436711572,
"task_id": 110962406,
"user_id": 1512574,
"keyboard": 13031,
"mouse": 29149,
"input_tracked": 58021,
"manual": 0,
"idle": 0,
"resumed": 0,
"billable": 58021,
"created_at": "2022-09-03T14:37:32.555344Z",
"updated_at": "2022-09-04T11:00:12.010515Z",
"username": "user14",
"status": "active",
"weekly_hours": 44,
"three_weekly_hours": 20,
"summaryWeekly": 58021,
"summaryoverallWeekly": 35912,
"dayliHoursDaily": 8,
"summaryHoursTrackedWeekly": 16,
"percentageHours": 4.0292361111111115,
"activityWeekly": 0,
"percentageActivityWeekly": 15,
"rolTittle": "DEV",
"rolPriority": 0,
"summaryStarts": 0,
"percentActivityW": 46,
"avergeHourWeekly": 4.0275
},
{
"id": 6429845321,
"task_id": 111275770,
"user_id": 1597423,
"keyboard": 7547,
"mouse": 16932,
"input_tracked": 45344,
"manual": 9000,
"idle": 0,
"resumed": 0,
"billable": 45344,
"created_at": "2022-09-02T15:02:22.445061Z",
"updated_at": "2022-09-02T21:05:15.892875Z",
"username": "user15",
"status": "active",
"weekly_hours": 44,
"three_weekly_hours": 20,
"summaryWeekly": 54344,
"summaryoverallWeekly": 21515,
"dayliHoursDaily": 8,
"summaryHoursTrackedWeekly": 15,
"percentageHours": 3.773888888888889,
"activityWeekly": 0,
"percentageActivityWeekly": 10,
"rolTittle": "SAC",
"rolPriority": 1,
"summaryStarts": 0,
"percentActivityW": 32,
"avergeHourWeekly": 3.7724999999999995
},
{
"id": 6429886569,
"task_id": 111300959,
"user_id": 1005008,
"keyboard": 9124,
"mouse": 23219,
"input_tracked": 47335,
"manual": 16930,
"idle": 0,
"resumed": 0,
"billable": 64265,
"created_at": "2022-09-02T15:10:49.050765Z",
"updated_at": "2022-09-02T15:37:15.995376Z",
"username": "user16",
"status": "active",
"weekly_hours": 44,
"three_weekly_hours": 20,
"summaryWeekly": 64265,
"summaryoverallWeekly": 30503,
"dayliHoursDaily": 8,
"summaryHoursTrackedWeekly": 18,
"percentageHours": 4.462847222222222,
"activityWeekly": 0,
"percentageActivityWeekly": 12,
"rolTittle": "SAC",
"rolPriority": 1,
"summaryStarts": 0,
"percentActivityW": 47,
"avergeHourWeekly": 4.4625
},
{
"id": 6418406327,
"task_id": 110056072,
"user_id": 1005014,
"keyboard": 3338,
"mouse": 24665,
"input_tracked": 51343,
"manual": 0,
"idle": 0,
"resumed": 0,
"billable": 51343,
"created_at": "2022-09-01T15:01:36.521321Z",
"updated_at": "2022-09-01T15:35:14.010868Z",
"username": "user17",
"status": "active",
"weekly_hours": 44,
"three_weekly_hours": 20,
"summaryWeekly": 51343,
"summaryoverallWeekly": 27397,
"dayliHoursDaily": 8,
"summaryHoursTrackedWeekly": 14,
"percentageHours": 3.565486111111111,
"activityWeekly": 0,
"percentageActivityWeekly": 13,
"rolTittle": "SAC",
"rolPriority": 1,
"summaryStarts": 0,
"percentActivityW": 62,
"avergeHourWeekly": 3.5649999999999995
},
{
"id": 6436728901,
"task_id": 109755222,
"user_id": 1846477,
"keyboard": 9644,
"mouse": 25906,
"input_tracked": 64724,
"manual": 0,
"idle": 0,
"resumed": 0,
"billable": 64724,
"created_at": "2022-09-03T14:57:43.250737Z",
"updated_at": "2022-09-03T19:24:22.872994Z",
"username": "user18",
"status": "active",
"weekly_hours": 44,
"three_weekly_hours": 20,
"summaryWeekly": 64724,
"summaryoverallWeekly": 29885,
"dayliHoursDaily": 8,
"summaryHoursTrackedWeekly": 18,
"percentageHours": 4.494722222222222,
"activityWeekly": 0,
"percentageActivityWeekly": 12,
"rolTittle": "DESIGN",
"rolPriority": 2,
"summaryStarts": 0,
"percentActivityW": 34,
"avergeHourWeekly": 4.495
},
{
"id": null,
"task_id": null,
"user_id": 1886674,
"keyboard": 0,
"mouse": 0,
"input_tracked": 0,
"manual": 0,
"idle": 0,
"resumed": 0,
"billable": 0,
"created_at": null,
"updated_at": null,
"username": "user19",
"status": "active",
"weekly_hours": 12.5,
"three_weekly_hours": 7,
"summaryWeekly": 0,
"summaryoverallWeekly": 0,
"dayliHoursDaily": 3,
"summaryHoursTrackedWeekly": 0,
"percentageHours": 0,
"activityWeekly": 0,
"percentageActivityWeekly": 0,
"rolTittle": "DESIGN",
"rolPriority": 2,
"summaryStarts": 0,
"percentActivityW": 0,
"avergeHourWeekly": 0
},
{
"id": null,
"task_id": null,
"user_id": 1931414,
"keyboard": 0,
"mouse": 0,
"input_tracked": 0,
"manual": 0,
"idle": 0,
"resumed": 0,
"billable": 0,
"created_at": null,
"updated_at": null,
"username": "user20",
"status": "active",
"weekly_hours": 12.5,
"three_weekly_hours": 7,
"summaryWeekly": 0,
"summaryoverallWeekly": 0,
"dayliHoursDaily": 3,
"summaryHoursTrackedWeekly": 0,
"percentageHours": 0,
"activityWeekly": 0,
"percentageActivityWeekly": 0,
"rolTittle": "DESIGN",
"rolPriority": 2,
"summaryStarts": 0,
"percentActivityW": 0,
"avergeHourWeekly": 0
},
{
"id": null,
"task_id": null,
"user_id": 766827,
"keyboard": 0,
"mouse": 0,
"input_tracked": 0,
"manual": 0,
"idle": 0,
"resumed": 0,
"billable": 0,
"created_at": null,
"updated_at": null,
"username": "user21",
"status": "active",
"weekly_hours": 12.5,
"three_weekly_hours": 7,
"summaryWeekly": 0,
"summaryoverallWeekly": 0,
"dayliHoursDaily": 3,
"summaryHoursTrackedWeekly": 0,
"percentageHours": 0,
"activityWeekly": 0,
"percentageActivityWeekly": 0,
"rolTittle": "DESIGN",
"rolPriority": 2,
"summaryStarts": 0,
"percentActivityW": 0,
"avergeHourWeekly": 0
}
]
const maplabels = apidata.map(element => element.username);
const labels = maplabels;
// DataBar
const mapbarHorizontal = apidata.map(element => element.summaryHoursTrackedWeekly);
const barHorizontal = mapbarHorizontal;
// console.log('labels', barHorizontal);
// LineBar
const maplineBar = apidata.map(element => element.percentActivityW);
const lineBar = maplineBar;
// BarWeeklyHour Colaborador
const mapColbWeekly = apidata.map(element => element.three_weekly_hours);
const colbWeekly = mapColbWeekly;
const subLabels = {
id: 'subLabels',
afterDatasetsDraw(chart, args, pluginOptions) {
const {
ctx,
chartArea: {
left,
right,
top,
bottom,
width,
height
}
} = chart;
ctx.save();
subLabelText('DEV', width / 4 * 1.5);
subLabelText('SAC', width / 4 * 3.1);
subLabelText('DESIGN', width / 4 * 3.7);
function subLabelText(text, x) {
ctx.font = 'bold 12px sans-serif';
ctx.fillStyle = 'rgba(102, 102, 102, 1)';
ctx.textAlign = 'center';
ctx.fillText(text, x + left, bottom + 144);
let xAxis = chart.scales['x-axis-0'];
let xCenter = (xAxis.left + xAxis.right) / 1.45;
let yBottom = chart.scales['y-axis-0'].bottom;
ctx.strokeStyle = 'lightgray';
[xAxis.left, xCenter, xAxis.right].forEach(x => {
ctx.beginPath();
ctx.moveTo(x, yBottom);
ctx.lineTo(x, yBottom + 110);
ctx.stroke();
});
ctx.beginPath();
ctx.strokeStyle = 'lightgray';
ctx.moveTo(width / 4 * 3.45, yBottom);
ctx.lineTo(width / 4 * 3.45, yBottom + 110);
ctx.stroke();
ctx.restore();
}
}
}
const chart = new Chart(document.getElementById("chart"), {
type: 'bar',
data: {
labels: labels,
datasets: [{
type: 'line',
label: '% ACTIVITY',
backgroundColor: '#FF7605',
borderColor: '#FF7605',
data: lineBar,
datalabels: {
anchor: 'start',
align: 'center',
clamp: true,
backgroundColor: '#FF7605',
color: 'white',
font: {
weight: 'bold'
}
}
},
{
type: 'bar',
label: 'WEEKLY SUMMARY OF HOURS',
backgroundColor: '#222A35',
borderColor: '#222A35',
data: barHorizontal,
datalabels: {
rotation: 270,
padding: 10
}
},
{
type: 'bar',
label: 'HOURS',
backgroundColor: '#008582',
borderColor: '#008582',
data: colbWeekly,
datalabels: {
anchor: 'end',
align: 'top',
clamp: true,
backgroundColor: '#008582',
color: 'white',
font: {
weight: 'bold'
}
}
}
]
},
options: {
plugins: {
datalabels: {
color: 'white',
font: {
weight: 'bold'
},
},
title: {
display: true,
text: 'AVERAGE WEEKLY HOURS'
}
},
elements: {
line: {
fill: false
}
},
scales: {
'x-axis-0': {
stacked: true,
min: 0,
max: 80,
ticks: {
stepSize: 20,
minRotation: 90
},
grid: {
display: false
}
},
'y-axis-0': {
grid: {
drawOnChartArea: true
}
}
}
},
plugins: [subLabels]
});<!DOCTYPE html>
<html>
<head>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<canvas id="chart" height="200"></canvas>
</body>Source:stackexchange.com