How to always display crosshair at last series in the Candlestick ApexCharts

Question

I want the crosshair always display at the last series in the Candlestick chart without using the mouse hover. How to do that? This is my expect:

Answer 1

You can change css of those elements, set opacity to 1 so they will always be visible.

.apexcharts-yaxistooltip{
  opacity: 1 !important;
}

.apexcharts-ycrosshairs{
  opacity: 1 !important;
}

You can also add this css after first tooltip render

mouseMove: function (event, chartContext, config) {
  let loaded = false;
  let tooltipY = document.getElementsByClassName('apexcharts-yaxistooltip-text')[0]
  if (tooltipY && tooltipY.innerText && !loaded) {
  let styles = `
  .apexcharts-yaxistooltip {
    opacity: 1 !important;
  }
  .apexcharts-ycrosshairs {
    opacity: 1 !important;
  }
  `
  let styleSheet = document.createElement("style");
  styleSheet.innerText = styles;
  document.head.appendChild(styleSheet);
  loaded = true;
  }
}