There is a phenomenon that the tooltip remains when moving the wheel with the mo

[jmshimParticipant]

hello i have problem

There is a phenomenon that the tooltip remains when moving the wheel with the mouse on one of the values ​​of the chart x-axis.

Take a look at Figure 1 below, I hovered over the chart as shown in the picture.

If you look at Figure 2, there is a phenomenon that the tooltip remains as it is when scrolling. What should I do to correct this phenomenon?

Any help would be greatly appreciated.

[svetoslav_borislavovParticipant]

Hi,

Can you please, share your chart settings?
It would be easier for us to reproduce the problem!

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[jmshimParticipant]

Even in the demo this is implemented. If you hover the mouse over the chart and scroll down, the tooltip stays there and disappears after 3 seconds.
Below is the setting.

function drawPopupChart(vData){

let otel = [
{
type: “line”,
series: [
{
dataField: ‘HPRICE’,
displayText: ‘부동산114시세(상한)’,
color: ‘#009688’,
toolTipFormatFunction:function(value, itemIndex) {
return ‘ 시점 : ‘ + vData[itemIndex].TD + ‘</br>’ +
‘ 부동산114시세(상한) : ‘ + Math.round(vData[itemIndex].HPRICE).toLocaleString(‘ko-KR’);
},
toolTipFormatSettings: {
thousandsSeparator: “,”
},
opacity: 0.7
},
{
dataField: ‘LPRICE’,
displayText: ‘부동산114시세(하한)’,
color: ‘#F2B53F’,
toolTipFormatFunction:function(value, itemIndex) {
return ‘ 시점 : ‘ + vData[itemIndex].TD + ‘</br>’ +
‘ 부동산114시세(하한) : ‘ + Math.round(vData[itemIndex].LPRICE).toLocaleString(‘ko-KR’);
},
toolTipFormatSettings: {
thousandsSeparator: “,”
},
opacity: 0.7
},
{
dataField: ‘APRICE’,
displayText: ‘시세 평균’,
color: ‘#FF5252’,
toolTipFormatFunction:function(value, itemIndex) {
return ‘ 시점 : ‘ + vData[itemIndex].TD + ‘</br>’ +
‘ 시세 평균 : ‘ + Math.round(vData[itemIndex].APRICE).toLocaleString(‘ko-KR’);
},
toolTipFormatSettings: {
thousandsSeparator: “,”
},
opacity: 0.7
}
]
}
];

let apt =[
{
type: “line”,
series: [
{
dataField: ‘HPRICE’,
displayText: ‘부동산114시세(상한)’,
color: ‘#009688’,
toolTipFormatFunction:function(value, itemIndex) {
return ‘ 시점 : ‘ + vData[itemIndex].TD + ‘</br>’ +
‘ 부동산114시세(상한) : ‘ + Math.round(vData[itemIndex].HPRICE).toLocaleString(‘ko-KR’);
},
toolTipFormatSettings: {
thousandsSeparator: “,”
},
opacity: 0.7
},
{
dataField: ‘LPRICE’,
displayText: ‘부동산114시세(하한)’,
color: ‘#F2B53F’,
toolTipFormatFunction:function(value, itemIndex) {
return ‘ 시점 : ‘ + vData[itemIndex].TD + ‘</br>’ +
‘ 부동산114시세(하한) : ‘ + Math.round(vData[itemIndex].LPRICE).toLocaleString(‘ko-KR’);
},
toolTipFormatSettings: {
thousandsSeparator: “,”
},
opacity: 0.7
},
{
dataField: ‘APRICE’,
displayText: ‘시세 평균’,
color: ‘#FF5252’,
toolTipFormatFunction:function(value, itemIndex) {
return ‘ 시점 : ‘ + vData[itemIndex].TD + ‘</br>’ +
‘ 시세 평균 : ‘ + Math.round(vData[itemIndex].APRICE).toLocaleString(‘ko-KR’);
},
toolTipFormatSettings: {
thousandsSeparator: “,”
},
opacity: 0.7
}
]
},
{
type: “scatter”,
series: [
{
dataField: ‘PRICE’
,symbolSize: 4
,color: ‘#FC6A08’
,symbolType: ‘diamond’
,displayText: ‘국토교통부 실거래가격’
,toolTipFormatFunction:function(value, itemIndex) {
return vData[itemIndex].FLR ;
}
}
]
}
];

var settings = {
title: ”,
description: null,
enableAnimations: true,
showLegend: true,
padding: { left: 20, top: 20, right: 20, bottom: 20 },
titlePadding: { left: 10, top: 0, right: 0, bottom: 0 },
source: null,
xAxis: {
dataField: ‘TD’,
displayText: ‘시점’,
type: ‘date’, //date, basic, linear
baseUnit: ‘month’,
dateFormat: “yyyy.MM.dd”,
toolTipFormatSettings: {
dateFormat: “yyyy.MM.dd”
},
logarithmicScale: false,
logarithmicScaleBase: 2
},
valueAxis: {
position : ‘left’,
gridLines: {
visible: false
},
axisSize: “auto”,
position: “left”,
formatSettings: { thousandsSeparator: “,” }
},
seriesGroups: []
};

if(!isEmpty(vData)){
var dataAdapter = new $.jqx.dataAdapter({
localdata: vData,
datafields: [
{name: “TD”, type: “date”},
{name: “HPRICE”, type: “number”},
{name: “LPRICE”, type: “number”},
{name: “APRICE”, type: “number”},
{name: “PRICE”, type: “number”},
]
});

settings.source = dataAdapter;
}

let chartId = ”;

switch(vGbId){
case ‘OTEL’:
settings.seriesGroups = otel;
chartId = ‘#otelPriceCht’;
break;
case ‘APT’:
settings.seriesGroups = apt;
chartId = ‘#aptPriceCht’;

break;
}
$(chartId).jqxChart(settings);

}

[svetoslav_borislavovParticipant]

Hi,

Please provide us with a working demo in jsfiddle.
You can edit the following one: http://jsfiddle.net/7hxq9ty2/4/

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts