[Chartjs]-Grouping x-axis labels on multiple lines on a ChartJS with an extra dimension

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>

[Chartjs]-Running chart.js locally on webpage not displaying charts

Source:stackexchange.com

Leave a comment Cancel reply