Clickable Chart.js chart title-CodePudding

In version 2.x of Chart.js I could register an onClick on options and get clicks that were done on the chart title. As expected based on this from the 3.x Migration Guide:

options.onClick is now limited to the chart area

this now no longer works. To show this, see below.

Version 2.x:

var chart = new Chart(document.getElementById('chart').getContext('2d'), {
    type: 'bar',
    data: {
        labels: ['Apples'],
        datasets: [{
            label: 'Fruit',
            backgroundColor: 'hotpink',
            data: [11],
        }]
    },
    options: {
        title: {
            display: true,
            fontSize: 24,
            text: "CLICK ME! (Or the chart itself)",
        },
        onClick: function(area){
            const title = this.titleBlock;
            const hitTitle = !!title
                && area.offsetX > title.left && area.offsetX < title.right
                && area.offsetY > title.top && area.offsetY < title.bottom;
            document.getElementById('log').innerHTML  = hitTitle ? "Title click!!<br>" : "Generic chart click<br>";
        }
    },
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="chart"></canvas>
<div id="log"></div>

Version 4.x (does not even trigger onclick for title!):

var chart = new Chart(document.getElementById('chart').getContext('2d'), {
    type: 'bar',
    data: {
        labels: ['Apples'],
        datasets: [{
            label: 'Fruit',
            backgroundColor: 'teal',
            data: [11],
        }]
    },
    options: {
        plugins: {
          title: {
              display: true,
              font: { size: 24, },
              text: ["CLICKING ME IS OF NO USE!", "(Clicking the chart itself works)"],
          },
        },
        onClick: function(area){
            const title = this.titleBlock;
            const hitTitle = !!title
                && area.offsetX > title.left && area.offsetX < title.right
                && area.offsetY > title.top && area.offsetY < title.bottom;
            document.getElementById('log').innerHTML  = hitTitle ? "Title click!!<br>" : "Generic chart click<br>";
        }
    },
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="chart"></canvas>
<div id="log"></div>

How can I handle onClick for Chart.js title (and subtitle) in v4 and above? Is it even possible?

CodePudding user response：

You will need to use a custom plugin for that:

const customOnClick = {
  afterEvent: (chart, evt) => {
    const {
      event: {
        type,
        x,
        y
      }
    } = evt;

    if (type != 'click')
      return;

    const {
      titleBlock: {
        top,
        right,
        bottom,
        left,
      }
    } = chart

    if (left <= x && x <= right && bottom >= y && y >= top)
      console.log("in title area")
    else
      console.log("out of title area")
  }
}

var chart = new Chart(document.getElementById('chart').getContext('2d'), {
  type: 'bar',
  plugins: [customOnClick],
  data: {
    labels: ['Apples'],
    datasets: [{
      label: 'Fruit',
      backgroundColor: 'teal',
      data: [11],
    }]
  },
  options: {
    plugins: {
      title: {
        display: true,
        font: {
          size: 24,
        },
        text: ["CLICKING ME IS OF NO USE!", "(Clicking the chart itself works)"],
      },
    },
    onClick: function(area) {
      const title = this.titleBlock;
      const hitTitle = !!title &&
        area.offsetX > title.left && area.offsetX < title.right &&
        area.offsetY > title.top && area.offsetY < title.bottom;
      document.getElementById('log').innerHTML  = hitTitle ? "Title click!!<br>" : "Generic chart click<br>";
    }
  },
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="chart"></canvas>
<div id="log"></div>

https://www.chartjs.org/docs/4.1.2/developers/plugins.html