Uncaught TypeError: charts[i2].axisX[0].crosshair.showAt is not a function

[welsonfan]

I’m working on sample like this page.

https://canvasjs.com/docs/charts/methods/crosshair/showat/

but I got error showAt is not a function

Here is my react code . What did I do wrong?

/* App.js */
import React, { Component } from ‘react’;
//import CanvasJSReact from ‘@canvasjs/react-charts’
import CanvasJSReact from ‘./canvas-js-chart’;

var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;
var dataPoints =[];
var dataPoints2 =[];
var dataPoints3 =[];
var dataPoints4 =[];
var dataPoints5 =[];
var dataPoints6 =[];
var dataPoints7 =[];
var dataPoints8 =[];
var charts = [];
export default class BiasLineChart extends React.Component {

render() {
const { biaslineCompareData } = this.props;
dataPoints = [];
dataPoints2 = [];
dataPoints3 = [];
dataPoints4 = [];
dataPoints5 = [];
dataPoints6 = [];
dataPoints7 = [];
dataPoints8 = [];
//const {dataPoints , dataPoints2} = this.state;
if (biaslineCompareData.s1) {

for (var i = 0; i < biaslineCompareData.s1.length; i++) {
if (biaslineCompareData.s1[i].mark) {
dataPoints.push({
x: biaslineCompareData.s1[i].x,
y: biaslineCompareData.s1[i].y,
indexLabel: “*”,
indexLabelFontWeight:”bolder”,
indexLabelFontSize:30,
indexLabelFontColor:”red”
});
} else {
dataPoints.push({
x: biaslineCompareData.s1[i].x,
y: biaslineCompareData.s1[i].y

});
}
}
}
if (biaslineCompareData.s2) {

for (var i = 0; i < biaslineCompareData.s2.length; i++) {
if (biaslineCompareData.s2[i].mark) {
dataPoints2.push({
x: biaslineCompareData.s2[i].x,
y: biaslineCompareData.s2[i].y,
indexLabel: “*”,
indexLabelFontWeight:”bolder”,
indexLabelFontSize:30,
indexLabelFontColor:”red”
});
} else {
dataPoints2.push({
x: biaslineCompareData.s2[i].x,
y: biaslineCompareData.s2[i].y

});
}
}
}
if (biaslineCompareData.p1) {

for (var i = 0; i < biaslineCompareData.p1.length; i++) {
if (biaslineCompareData.p1[i].mark) {
dataPoints3.push({
x: biaslineCompareData.p1[i].x,
y: biaslineCompareData.p1[i].y,
indexLabel: “*”,
indexLabelFontWeight:”bolder”,
indexLabelFontSize:30,
indexLabelFontColor:”red”
});
} else {
dataPoints3.push({
x: biaslineCompareData.p1[i].x,
y: biaslineCompareData.p1[i].y

});
}
}
}

if (biaslineCompareData.minus3s) {

for (var i = 0; i < biaslineCompareData.minus3s.length; i++) {
if (biaslineCompareData.minus3s[i].mark) {
dataPoints4.push({
x: biaslineCompareData.minus3s[i].x,
y: biaslineCompareData.minus3s[i].y,
indexLabel: “*”,
indexLabelFontWeight:”bolder”,
indexLabelFontSize:30,
indexLabelFontColor:”red”
});
} else {
dataPoints4.push({
x: biaslineCompareData.minus3s[i].x,
y: biaslineCompareData.minus3s[i].y

});
}
}
}
if (biaslineCompareData.average) {

for (var i = 0; i < biaslineCompareData.average.length; i++) {
if (biaslineCompareData.average[i].mark) {
dataPoints5.push({
x: biaslineCompareData.average[i].x,
y: biaslineCompareData.average[i].y,
indexLabel: “*”,
indexLabelFontWeight:”bolder”,
indexLabelFontSize:30,
indexLabelFontColor:”red”
});
} else {
dataPoints5.push({
x: biaslineCompareData.average[i].x,
y: biaslineCompareData.average[i].y

});
}
}
}

if (biaslineCompareData.plus3s) {

for (var i = 0; i < biaslineCompareData.plus3s.length; i++) {
if (biaslineCompareData.plus3s[i].mark) {
dataPoints6.push({
x: biaslineCompareData.plus3s[i].x,
y: biaslineCompareData.plus3s[i].y,
indexLabel: “*”,
indexLabelFontWeight:”bolder”,
indexLabelFontSize:30,
indexLabelFontColor:”red”
});
} else {
dataPoints6.push({
x: biaslineCompareData.plus3s[i].x,
y: biaslineCompareData.plus3s[i].y

});
}
}
}

if (biaslineCompareData.candleData) {

for (var i = 0; i < biaslineCompareData.candleData.length; i++) {
if(biaslineCompareData.candleData[i].x != 0){
if (biaslineCompareData.candleData[i].mark) {
dataPoints7.push({
x:new Date(biaslineCompareData.candleData[i].x.toString().replace(
/^(\d{4})(\d\d)(\d\d)(\d\d)(\d\d)(\d\d)$/,
‘$4:$5:$6 $2/$3/$1’
)),
y: biaslineCompareData.candleData[i].y,
indexLabel: “*”,
indexLabelFontWeight:”bolder”,
indexLabelFontSize:30,
indexLabelFontColor:”red”
});
} else {
dataPoints7.push({
x:new Date(biaslineCompareData.candleData[i].x.toString().replace(
/^(\d{4})(\d\d)(\d\d)(\d\d)(\d\d)(\d\d)$/,
‘$4:$5:$6 $2/$3/$1’
)),
y: biaslineCompareData.candleData[i].y

});
}
}
}
}

if (biaslineCompareData.compareCandleData) {

for (var i = 0; i < biaslineCompareData.compareCandleData.length; i++) {
if(biaslineCompareData.compareCandleData[i].x != 0){
if (biaslineCompareData.compareCandleData[i].mark) {
dataPoints8.push({
x:new Date(biaslineCompareData.compareCandleData[i].x.toString().replace(
/^(\d{4})(\d\d)(\d\d)(\d\d)(\d\d)(\d\d)$/,
‘$4:$5:$6 $2/$3/$1’
)),
y: biaslineCompareData.compareCandleData[i].y,
indexLabel: “*”,
indexLabelFontWeight:”bolder”,
indexLabelFontSize:30,
indexLabelFontColor:”red”
});
} else {
dataPoints8.push({
x:new Date(biaslineCompareData.compareCandleData[i].x.toString().replace(
/^(\d{4})(\d\d)(\d\d)(\d\d)(\d\d)(\d\d)$/,
‘$4:$5:$6 $2/$3/$1’
)),
y: biaslineCompareData.compareCandleData[i].y

});
}
}
}
}
const options = {
//width:659,
//height:300,
exportEnabled: true,
zoomEnabled: true,
title: {
text: ‘Tick Chart對比圖’
},
toolTip:{
shared: true
},
axisX: {
valueFormatString: ” “,
crosshair: {
enabled: true,
snapToDataPoint: true
}
},
axisY: {
valueFormatString: ” “,
//title: “Price”,
//prefix: “$”,
//minimum: biaslineCompareData.lineMinimum,
//maximum: biaslineCompareData.lineMaximum
},
data: [{
type: “line”,
name: “s1(ours)”,
showInLegend: true,
//toolTipContent: “{x} <br> y: {y[0]}, {y[1]}, {y[2]}, {y[3]} “,
//yValueFormatString: “$##0.00”,
//xValueType: “dateTime”,
dataPoints: dataPoints
},
{
type: “line”,
name: “s2(theirs)”,
showInLegend: true,
//toolTipContent: “{x} <br> y: {y[0]}, {y[1]}, {y[2]}, {y[3]} “,
//yValueFormatString: “$##0.00”,
//xValueType: “dateTime”,
dataPoints: dataPoints2
}]
}
const options2 = {
//width:659,
//height:300,
exportEnabled: true,
zoomEnabled: true,
title: {
text: ‘標準化正負三倍點差對比圖’
},
toolTip:{
shared: true
},
axisX: {
valueFormatString: ” “,
crosshair: {
enabled: true,
snapToDataPoint: true
}
},
axisY: {
valueFormatString: ” “,
//title: “Price”,
//prefix: “$”,
//minimum: biaslineCompareData.lineMinimum,
//maximum: biaslineCompareData.lineMaximum
},
data: [{
type: “line”,
name: “p1”,
showInLegend: true,
//toolTipContent: “{x} <br> y: {y[0]}, {y[1]}, {y[2]}, {y[3]} “,
//yValueFormatString: “$##0.00”,
//xValueType: “dateTime”,
dataPoints: dataPoints3
},
{
type: “line”,
name: “avg”,
showInLegend: true,
//toolTipContent: “{x} <br> y: {y[0]}, {y[1]}, {y[2]}, {y[3]} “,
//yValueFormatString: “$##0.00”,
//xValueType: “dateTime”,
dataPoints: dataPoints4
},
{
type: “line”,
name: “+3s”,
showInLegend: true,
//toolTipContent: “{x} <br> y: {y[0]}, {y[1]}, {y[2]}, {y[3]} “,
//yValueFormatString: “$##0.00”,
//xValueType: “dateTime”,
dataPoints: dataPoints5
},
{
type: “line”,
name: “-3s”,
showInLegend: true,
//toolTipContent: “{x} <br> y: {y[0]}, {y[1]}, {y[2]}, {y[3]} “,
//yValueFormatString: “$##0.00”,
//xValueType: “dateTime”,
dataPoints: dataPoints6
}]
}
const options3 = {
//width:659,
//height:300,
exportEnabled: true,
zoomEnabled: true,
title: {
text: biaslineCompareData.symbolName
},
toolTip:{
contentFormatter: function ( e ) {
return “” +CanvasJS.formatDate(e.entries[0].dataPoint.x,”YYYY-MM-DD HH:mm:ss”)+ “<br>Open: “+e.entries[0].dataPoint.y[0]+”<br>High: “+e.entries[0].dataPoint.y[1]+”<br>Low: “+e.entries[0].dataPoint.y[2]+”<br>Close: “+e.entries[0].dataPoint.y[3];
}
},
axisX: [{
//valueFormatString: “HH:mm”,

labelFormatter: function (e) {
return CanvasJS.formatDate( e.value, “HH:mm”);
},
// valueFormatString: “####/##/## ##:##:##”,
interval: 5,
intervalType: “minute”,
crosshair: {
enabled: true,
// snapToDataPoint: true,
updated: showCrosshair,
// hidden: hideCrosshair
}
}],
axisY: {
// valueFormatString: ” “,
//title: “Price”,
// prefix: “$”,
minimum: biaslineCompareData.candleMinimum,
maximum: biaslineCompareData.candleMaximum
},
data: [{
type: “candlestick”,
name: ” “,
//toolTipContent: “{x} <br> y: {y[0]}, {y[1]}, {y[2]}, {y[3]} “,
//showInLegend: true,
//yValueFormatString: “$##0.00”,
//xValueType: “dateTime”,
dataPoints: dataPoints7
}]
}
charts.push(options3);
const options4 = {
//width:659,
//height:300,
exportEnabled: true,
zoomEnabled: true,
title: {
text: biaslineCompareData.compareSymbolName
},
toolTip:{
contentFormatter: function ( e ) {
return “” +CanvasJS.formatDate(e.entries[0].dataPoint.x,”YYYY-MM-DD HH:mm:ss”)+ “<br>Open: “+e.entries[0].dataPoint.y[0]+”<br>High: “+e.entries[0].dataPoint.y[1]+”<br>Low: “+e.entries[0].dataPoint.y[2]+”<br>Close: “+e.entries[0].dataPoint.y[3];
}
},
axisX: [{
//valueFormatString: “HH:mm”,

labelFormatter: function (e) {
return CanvasJS.formatDate( e.value, “HH:mm”);
},
// valueFormatString: “####/##/## ##:##:##”,
interval: 5,
intervalType: “minute”,
crosshair: {
enabled: true,
// snapToDataPoint: true,
updated: showCrosshair,
// hidden: hideCrosshair
}
}],
axisY: {
// valueFormatString: ” “,
//title: “Price”,
// prefix: “$”,
minimum: biaslineCompareData.candleMinimum,
maximum: biaslineCompareData.candleMaximum
},
data: [{
type: “candlestick”,
name: ” “,
//showInLegend: true,
//yValueFormatString: “$##0.00”,
//xValueType: “dateTime”,
dataPoints: dataPoints8
}]
}
charts.push(options4);
console.log(this.chart4);
function showCrosshair(e) {
console.log(e.chart)
console.log(e.value)
for( var i = 0; i < charts.length; i++){
console.log(i)
console.log(charts[i])
if(charts[i] != e.chart){
charts[i].axisX[0].crosshair.showAt(new Date(e.value));
}
}
}

// function hideCrosshair(e) {
// console.log(e.chart)

// for( var i = 0; i < charts.length; i++){
// console.log(charts[i])
// if(charts[i] != e.chart)
// charts[i].axisX[0].crosshair.hide();
// }
// }
return (
<>

<div style={{display:’inline-block’,width: ‘45%’}}>
<CanvasJSChart options = {options} onRef={ref => this.chart1 = ref}/>
</div>

<div style={{display:’inline-block’,width: ‘45%’}}>
<CanvasJSChart options = {options2} onRef={ref => this.chart2 = ref}/>
</div>
<div style={{display:’inline-block’,width: ‘45%’}}>
<CanvasJSChart options = {options3} onRef={ref => this.chart3 = ref}/>
</div>

<div style={{display:’inline-block’,width: ‘45%’}}>
<CanvasJSChart options = {options4} onRef={ref => this.chart4 = ref}/>
</div>
</>
);
}

}

[Sachin Bisht]

@welsonfan,

We are unable to reproduce the issue at our end. Can you kindly create a sample project reproducing the issue you are facing over Google-drive/One-drive, so that we can run it locally at our end, understand the scenario better and help you out.

__
Sachin Bisht
Team CanvasJS