Open jaredgibb opened 3 years ago
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 = ' '; 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()
It need x for time and not t in data.
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
and the chart code which also works