Please help me
I have the following graph, where I have where each user belongs to a different area
I was wondering if there is a way to group the information by "user role" and once it is grouped, separate it by a line on the "x" axis
I am quite confused because supposedly if it is possible to do it according to the accepted answer in this question Grouping y-axis labels on multiple lines on a ChartJS with an extra dimension
But according to other answers from the community that is impossible with chartjs
How to make it possible? It's called Multi Level Category Labels
So I want to be able to modify the grid of the labels in X-Scale to separate the areas via a line and also add a sub-label. Something like this:
I leave the json and the code of my graph, I am using charjs-node-canvas to configure it and chartjs-plugin-datalabels to modify the labels of my graph. The technologies that I am using is nodejs with express using typescript and for my HTML template I am using Handlebars
const canvasRenderService = new ChartJSNodeCanvas({
width: 1000,
height: 650,
chartCallback: (ChartJS) => {
ChartJS.register(require('chartjs-plugin-datalabels'))
}
});
const mkChart = await canvasRenderService.renderToBuffer({
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: {
stacked: true,
ticks: {
minRotation: 90
},
grid: {
display: false
}
}
}
}
});
DEMO
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": 6418099795,
"task_id": 110964243,
"user_id": 1169488,
"keyboard": 12454,
"mouse": 21282,
"input_tracked": 56867,
"manual": 9000,
"idle": 0,
"resumed": 634,
"billable": 56867,
"created_at": "2022-09-01T14:12:47.422537Z",
"updated_at": "2022-09-02T11:00:52.334795Z",
"username": "user2",
"status": "active",
"weekly_hours": 44,
"three_weekly_hours": 20,
"summaryWeekly": 65867,
"summaryoverallWeekly": 30906,
"dayliHoursDaily": 8,
"summaryHoursTrackedWeekly": 18,
"percentageHours": 4.574097222222222,
"activityWeekly": 0,
"percentageActivityWeekly": 12,
"rolTittle": "DEV",
"rolPriority": 0,
"summaryStarts": 0,
"percentActivityW": 35,
"avergeHourWeekly": 4.575
},
{
"id": 6436682459,
"task_id": 111277830,
"user_id": 854472,
"keyboard": 3650,
"mouse": 53335,
"input_tracked": 76184,
"manual": 0,
"idle": 0,
"resumed": 0,
"billable": 76184,
"created_at": "2022-09-03T14:04:18.371347Z",
"updated_at": "2022-09-04T11:00:12.456776Z",
"username": "user3",
"status": "active",
"weekly_hours": 44,
"three_weekly_hours": 20,
"summaryWeekly": 76184,
"summaryoverallWeekly": 55852,
"dayliHoursDaily": 8,
"summaryHoursTrackedWeekly": 21,
"percentageHours": 5.290555555555556,
"activityWeekly": 0,
"percentageActivityWeekly": 18,
"rolTittle": "DEV",
"rolPriority": 0,
"summaryStarts": 2,
"percentActivityW": 54,
"avergeHourWeekly": 5.29
},
{
"id": 6418143504,
"task_id": 111039935,
"user_id": 957706,
"keyboard": 8128,
"mouse": 26665,
"input_tracked": 56130,
"manual": 0,
"idle": 0,
"resumed": 0,
"billable": 56130,
"created_at": "2022-09-01T14:20:38.428547Z",
"updated_at": "2022-09-02T11:00:53.895079Z",
"username": "user4",
"status": "active",
"weekly_hours": 44,
"three_weekly_hours": 20,
"summaryWeekly": 56130,
"summaryoverallWeekly": 31989,
"dayliHoursDaily": 8,
"summaryHoursTrackedWeekly": 16,
"percentageHours": 3.8979166666666667,
"activityWeekly": 0,
"percentageActivityWeekly": 14,
"rolTittle": "DEV",
"rolPriority": 0,
"summaryStarts": 0,
"percentActivityW": 42,
"avergeHourWeekly": 3.8975000000000004
},
{
"id": 6436827335,
"task_id": 110101015,
"user_id": 854517,
"keyboard": 5695,
"mouse": 28077,
"input_tracked": 62610,
"manual": 0,
"idle": 0,
"resumed": 0,
"billable": 62610,
"created_at": "2022-09-03T16:51:44.533355Z",
"updated_at": "2022-09-04T11:00:10.219855Z",
"username": "user5",
"status": "active",
"weekly_hours": 44,
"three_weekly_hours": 20,
"summaryWeekly": 62610,
"summaryoverallWeekly": 30715,
"dayliHoursDaily": 8,
"summaryHoursTrackedWeekly": 17,
"percentageHours": 4.347916666666666,
"activityWeekly": 0,
"percentageActivityWeekly": 12,
"rolTittle": "DEV",
"rolPriority": 0,
"summaryStarts": 0,
"percentActivityW": 37,
"avergeHourWeekly": 4.3475
},
{
"id": 6415607157,
"task_id": 111238271,
"user_id": 854471,
"keyboard": 7295,
"mouse": 14616,
"input_tracked": 29633,
"manual": 0,
"idle": 1571,
"resumed": 0,
"billable": 29633,
"created_at": "2022-09-01T06:17:06.580395Z",
"updated_at": "2022-09-02T11:01:01.677261Z",
"username": "user6",
"status": "active",
"weekly_hours": 44,
"three_weekly_hours": 20,
"summaryWeekly": 29633,
"summaryoverallWeekly": 19055,
"dayliHoursDaily": 8,
"summaryHoursTrackedWeekly": 8,
"percentageHours": 2.057847222222222,
"activityWeekly": 0,
"percentageActivityWeekly": 16,
"rolTittle": "DEV",
"rolPriority": 0,
"summaryStarts": 0,
"percentActivityW": 31,
"avergeHourWeekly": 2.0575
},
{
"id": 6438865339,
"task_id": 110014205,
"user_id": 1171637,
"keyboard": 11728,
"mouse": 24895,
"input_tracked": 70739,
"manual": 1620,
"idle": 0,
"resumed": 0,
"billable": 70739,
"created_at": "2022-09-04T16:03:44.328404Z",
"updated_at": "2022-09-05T11:00:31.972437Z",
"username": "user7",
"status": "active",
"weekly_hours": 44,
"three_weekly_hours": 20,
"summaryWeekly": 72359,
"summaryoverallWeekly": 30822,
"dayliHoursDaily": 8,
"summaryHoursTrackedWeekly": 20,
"percentageHours": 5.024930555555556,
"activityWeekly": 0,
"percentageActivityWeekly": 11,
"rolTittle": "DEV",
"rolPriority": 0,
"summaryStarts": 2,
"percentActivityW": 31,
"avergeHourWeekly": 5.0225
},
{
"id": 6429724387,
"task_id": 111040126,
"user_id": 854493,
"keyboard": 13205,
"mouse": 30058,
"input_tracked": 56630,
"manual": 0,
"idle": 0,
"resumed": 0,
"billable": 56630,
"created_at": "2022-09-02T14:46:58.641008Z",
"updated_at": "2022-09-03T11:00:13.064762Z",
"username": "user8",
"status": "active",
"weekly_hours": 44,
"three_weekly_hours": 20,
"summaryWeekly": 56630,
"summaryoverallWeekly": 40044,
"dayliHoursDaily": 8,
"summaryHoursTrackedWeekly": 16,
"percentageHours": 3.932638888888889,
"activityWeekly": 0,
"percentageActivityWeekly": 18,
"rolTittle": "DEV",
"rolPriority": 0,
"summaryStarts": 0,
"percentActivityW": 74,
"avergeHourWeekly": 3.9325
},
{
"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 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: {
stacked: true,
ticks: {
minRotation: 90
},
grid: {
display: false
}
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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"></script>
<div>
<div id="legend"></div>
<canvas id="chart"></canvas>
</div>