Candlestick and Crosshair plugin not working

[jaredgibb]

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. the crosshair does not

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()