Clickable Chart.js chart title

Question

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 fromthe 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/chart.js@2.9.4"></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/chart.js@4.1.2"></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?

Answer 1

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/chart.js@4.1.2"></script> <canvas id="chart"></canvas> <div id="log"></div>

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