Can i use crosshairs with OHLC/candlestick charts using ChartJS

Question

I have installed the crosshair plugin and am using chartJS 3.0 to take advantage of the candlestick charts but the crosshair does not appear. are these things compatible together? my data appear no problem but the crosshair never appears. how do i use these two things together? are there any working examples?

the tags i am using

    <script src="https://cdn.jsdelivr.net/npm/luxon@1.24.1"></script>
        <script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0-beta.9/dist/chart.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@0.2.1"></script>
<script src="https://dd7tel2830j4w.cloudfront.net/f1614793727236x392906938665549250/chartjs-chart-financial.js"></script>
<script scr="https://cdn.jsdelivr.net/npm/chartjs-plugin-crosshair"></script>

and the chart code which also works

 var divID = "chartContainer" + properties.chartid
  var chartID = "myChart" + properties.chartid
  instance.canvas.append('<div id="' + divID + '"></div>')
  document.getElementById(divID).innerHTML = '&nbsp;';
  document.getElementById(divID).innerHTML = '<canvas id=' + chartID + ' width="' + properties.bubble.width() + '" height="' + properties.bubble.height() + '"></canvas>';







  var ctx = document.getElementById(chartID).getContext('2d');
  var chart = new Chart(ctx, {
    type: 'candlestick',
    data: {
      datasets: [{
        label: 'CHRT - Chart.js Corporation',
        data: getData()
      }]
    },
    options: {
      scales: {
        y: {
          min: 0,
          max: 500
        }
      },
      tooltips: {
        mode: "interpolate",
        intersect: false
      },
      plugins: {
        crosshair: {
          line: {
            color: '#F66', // crosshair line color
            width: 3, // crosshair line width
            dashPattern: [5, 5] // crosshair line dash pattern
          },
          sync: {
            enabled: true, // enable trace line syncing with other charts
            group: 1, // chart group
            suppressTooltips: false // suppress tooltips when showing a synced tracer
          },
          zoom: {
            enabled: true, // enable zooming
            zoomboxBackgroundColor: 'rgba(66,133,244,0.2)', // background color of zoom box 
            zoomboxBorderColor: '#48F', // border color of zoom box
            zoomButtonText: 'Reset Zoom', // reset zoom button text
            zoomButtonClass: 'reset-zoom', // reset zoom button class
          },
          callbacks: {
            beforeZoom: function(start, end) { // called before zoom, return false to prevent zoom
              return true;
            },
            afterZoom: function(start, end) { // called after zoom
            }
          }
        }
      }
    }
  });

    
    
    
    
    
    
    

  function getData() {
    var dates = properties.time.get(0, properties.time.length())
    var opens = properties.open.get(0, properties.open.length())
    var highs = properties.high.get(0, properties.high.length())
    var lows = properties.low.get(0, properties.low.length())
    var closes = properties.close.get(0, properties.close.length())

    let data = []

    for (i = 0; i < dates.length; i++) {
      data.push({
        t: dates[i].valueOf(),
        o: opens[i],
        h: highs[i],
        l: lows[i],
        c: closes[i]
      })
    }

    console.log(data)

    return data
  }

  chart.update()

Answer 1

The crosair plugin is not yet compatible with the new beta of version 3. They have a pr to be up to date with beta 11 but after that there have been breaking changes again. So you will have to update the plugin yourself or wait till it has been updated to support v3