0

I'm using the ng2-charts wrapper for ChartJS in Angular, and attempting to place an image along with the text in my x-axis ticks like this:

image of desired bar chart with icons under x-axis tick labels

My component looks like this, just using static data at this point to prove the concept:

import { Component, ViewChild } from '@angular/core';
import {
  Chart,
  ChartConfiguration,
  ChartData,
  ChartType,
} from 'chart.js';
import { BaseChartDirective } from 'ng2-charts';

import { default as Annotation } from 'chartjs-plugin-annotation';

@Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html',
  styleUrls: ['./bar-chart.component.scss'],
})
export class BarChartComponent {
  @ViewChild(BaseChartDirective) chart: BaseChartDirective | undefined;

  constructor() {
    Chart.register(Annotation);
  }
  public barChartOptions: ChartConfiguration['options'] = {
    responsive: true,

    scales: {
      x: {
        type: 'category'
      },
      y: {
        type: 'linear',
        min: 50,
        max: 100,
        title: {
          display: true,
          text: 'Compliance Rate / Range'
        },
        ticks: {
          callback: function (value, index, values) {
            return value + '%';
          },
        },
      },
    },
    plugins: {
      legend: {
        display: false,
      },
      annotation: {
        annotations: {
          line1: {
            type: 'line',
            yMin: 80,
            yMax: 80,
            borderColor: '#000000',
            borderDash: [2, 2],
            borderWidth: 2,
          },
        },
      },
    },
  };

  public barChartType: ChartType = 'bar';

  public barChartData: ChartData<any> = {
    labels: [
      ['Audit 1', '2016'],
      ['Audit 2', '2016'],
      ['Audit 3', '2016'],
      ['Audit 1', '2017'],
      ['Audit 2', '2017'],
      ['Audit 3', '2017'],
    ],
    datasets: [
      {
        data: [80, 85, 70, 73, 70, 82],
        label: 'Series B',
        type: 'line',
        borderColor: '#1464a4',
        backgroundColor: '#FFFFFF',
        pointBackgroundColor: '#FFFFFF',
        pointBorderColor: '#1464a4',
        pointRadius: 6,
        pointBorderWidth: 3,
      },

      {
        data: [
          [62, 95],
          [75, 87],
          [63, 79],
          [61, 98],
          [63, 75],
          [60, 90],
        ],
        label: 'Hand Hygiene Compliance Range',
        type: 'bar',

        barPercentage: 0.3,
        backgroundColor: [
          '#93c845',
          '#93c845',
          '#b41744',
          '#93c845',
          '#b41744',
          '#93c845',
        ],
      },
    ],
  };

}

The only thing missing is the icons under the tick label text on the x-axis.

Can anyone help with whether it's possible and if so, how?

Frank Packer
  • 47
  • 7
  • To have them you could implement a plugin which will draw those icons on the bottom of the ticks. – user2057925 Sep 14 '22 at 07:39
  • See the codepen https://codepen.io/stockinail/pen/eYrBWrX – user2057925 Sep 14 '22 at 09:42
  • @user2057925 that's awesome! I'm struggling a bit with converting it from vanilla Chartjs to the ng2-charts version for Angular - registering a custom plugin seems to be an interesting process. Is that something you've had experience with? – Frank Packer Sep 15 '22 at 00:35
  • In vanilla JS yes, a little bit. I don't know ng2 :(. Anyway, you can use inline plugin, without any registration. You have to register if you want to use it for all charts instances of your app. – user2057925 Sep 15 '22 at 06:32

0 Answers0