Как сделать пунктирные линии в диаграмме?

Question

[TipTop89]

Есть ли возможность у chart.js сделать такие пунктирные линии при наведении на подсказку? или можете есть другие библиотеки где такое реализовывается. В документации не нашел ничего

Answer 1

[Семён Окулов]

Вроде как в chart.js нет такой функции

Но может тебе поможет что-то типа этого

<div class="chart-container">
  <canvas id="myChart"></canvas>
  <div class="tooltip-line"></div>
</div>

.chart-container {
  position: relative;
}

.tooltip-line {
  position: absolute;
  display: none;
  width: 1px;
  height: 100%;
  background-color: black;
  opacity: 0.5;
  pointer-events: none;
  border: dashed;
}

const chart = new Chart(document.getElementById('myChart'), {
  // Конфигурация графика Chart.js
  // ...
});

const tooltipLine = document.querySelector('.tooltip-line');

chart.canvas.addEventListener('mousemove', function(e) {
  const rect = chart.canvas.getBoundingClientRect();
  const xPos = e.clientX - rect.left;
  
  tooltipLine.style.left = xPos + 'px';
  tooltipLine.style.display = 'block';
});

chart.canvas.addEventListener('mouseout', function(e) {
  tooltipLine.style.display = 'none';
});

Comments

[TipTop89]

благодарю, получилось!