Как получить координаты отрисовки label в библиотеки chart js

Question

Допустим есть график нарисованный на chartjs.

Суть задачи сделать labels "БИН" ссылками. Я вижу 2 пути реализации:

Поставить событие "click" на них с помощью функционала библиотеки. Но проблема в том, что там такого функционала нет, что бы можно было поставить события на labels (По крайней мере я не нашел).
Обернуть элемент Canvas элементом div и сделать его относительным графика, а ссылки относительными к labels "БИН", но проблема в том что график слишком динамический и подогнать координаты labels слишком сложно или даже невозможно, поэтому можно сделать так: получать координаты или логику отрисовки labels и с этими значениями отрисовывать поверх ссылки. Вот только как получить эти значения? Примерно должно получиться что то вроде такого:

но что бы это работало в динамике с графиком.

Answer 1

Я разобрался, параметры самого графика лежат в:

const myChart = document.getElementById('myChart');
let years = ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020'];
const data = {
    labels: years,
    datasets: [
        {
            backgroundColor: '#2C3E50',
            borderWidth: false,
            data: [5000000, 2512345, 14555555, 75142325, 35178952, 48521478, 19147258, 32147258, 21258369]
        }
    ]
}
const options = {};

const myChartBar = new Chart(myChart, {
    type: 'horizontalBar',
    data: data,
    options: options,
});

//отступ до графика
console.log(myChartBar.scales['y-axis-0'].margins.top);

//высота графика
console.log(myChartBar.scales['y-axis-0'].height);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart"></canvas>

просто потом с помощью этих параметров формируем блок и приравниваем его к labels

БЛОГ НА HUSL

Как получить координаты отрисовки label в библиотеки chart js

Ответы (1 шт):