Chart Tooltip Location
The tooltip position on the chart is incorrect.
When you raise the cursor, a tooltip is generated next to the data.
For this reason, it is difficult to determine the value of the data.
I am attaching the code and data.
<div class="row">
<div class="col-xl-12" style="height:510px; margin-top: 5px;">
@*Chart*@
</div>
</div>
function createChart() {
var startDatePicker = document.getElementById('ChartDatepicker').ej2_instances[0];
var chartDate;
var chartChanged;
var chartSupp;
var chartInform;
var chart = null;
var chartData = new Array();
if (chartDate != null) {
for (var i = 0; i < chartDate.length; i++) {
var data = new Object();
var date = chartDate[i].DETE_SEARCH;
var time = date.split(" ");
var splitDate = time[0].split("-");
date = splitDate[1] + "/" + splitDate[2] + "-" + time[1];
data.IN_DATE = date;
for (var changeI = 0; changeI < chartChanged.length; changeI++) {
if (chartDate[i].DETE_SEARCH == chartChanged[changeI].DETE) {
if (chartChanged[changeI].DATA_TYPE.includes('Y')) {
data.CHANGETYPEY = 1500;
break;
}
else if (chartChanged[changeI].DATA_TYPE.includes('B')) {
data.CHANGETYPEB = 1500;
break;
}
}
}
for (var suppI = 0; suppI < chartSupp.length; suppI++) {
if (chartDate[i].DETE_SEARCH == chartSupp[suppI].DETE) {
data.SUPP_CHANGE = chartSupp[suppI].SUPP_CHANGE;
data.SUPP_QTY = chartSupp[suppI].SUPP_QTY;
break;
}
}
for (var informI = 0; informI < chartInform.length; informI++) {
if (chartDate[i].DETE_SEARCH == chartInform[informI].DETE) {
if (chartInform[informI].DATA_TYPE.includes('Y')) {
data.INFORMTYPEY = 1500;
break;
}
else {
data.INFORMTYPER = 1500;
break;
}
}
}
chartData.push(data);
}
chartContainerReset();
chart = new ej.charts.Chart({
id: 'supportChart',
width: '98%',
hidden: false,
palettes: [ "#6BB7F6", "#FB5555", "#FFC000", "#FF0000", "#FFC000", "#4472C4"], //그래프 색상
tooltip: {
enable: true
},
//Initializing Primary X Axis
primaryXAxis: {
valueType: 'Category',
interval: 1,
labelPlacement: 'OnTicks',
startFromZero: false,
labelIntersectAction: 'Rotate90'
},
primaryYAxis:
{
title: 'Total support',
rangePadding: 'None',
minimum: 0,
maximum: 1500,
interval: 300,
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 }
},
axes:
[
{
title: 'Support Change',
majorGridLines: { width: 0 },
rowIndex: 0, opposedPosition: true,
lineStyle: { width: 0 }, majorTickLines: { width: 0 },
minimum: 0, maximum: 250, interval: 50,
name: 'yAxis', minorTickLines: { width: 0 },
labelFormat: '{value}'
},
],
series: [
{
type: 'SplineArea',
dataSource: chartData,
xName: 'IN_DATE', width: 2, border: { width: 2, color: '#6BB7F6' }, opacity: 0.8,
emptyPointSettings: {
mode: 'Drop'
},
marker: {
visible: false,
width: 3,
height: 3,
opacity: 0.5,
shape: 'Circle',
fill: '#6BB7F6',
isFilled: true,
},
yName: 'SUPP_QTY', name: 'Total Qty',
fill: 'url(#material-gradient-chart1)',
},
{
type: 'SplineArea',
dataSource: chartData,
xName: 'IN_DATE', width: 2, border: { width: 2, color: '#FB5555' }, opacity: 0.8,
emptyPointSettings: {
mode: 'Drop'
},
marker: {
visible: false,
width: 12,
height: 12,
shape: 'Triangle',
fill: '#FB5555',
stroke:'Black',
isFilled: true,
border: { width: 1, color: 'Black' },
},
yName: 'SUPP_CHANGE', name: 'Changed Support',
yAxisName: 'yAxis',
fill: 'url(#material-gradient-chart2)',
dashArray: '7',
},
{
type: 'Column',
dataSource: chartData,
opacity: 0.8,
xName: 'IN_DATE', width: 0.2,
yName: 'INFORMTYPEY', name: 'Cut-Off Data',
yAxisName: 'yAxis',
},
{
type: 'Column',
dataSource: chartData,
opacity: 0.8,
xName: 'IN_DATE', width: 0.2,
yName: 'INFORMTYPER', name: 'Recieve Data',
yAxisName: 'yAxis',
},
{
type: 'Scatter',
dataSource: chartData,
xName: 'IN_DATE', width: 2, marker: {
visible: true,
width: 10,
height: 10,
shape: 'Circle'
}, fill: '#FFC000',
yName: 'CHANGETYPEY', name: 'Checked (Piping)',
},
{
type: 'Scatter',
dataSource: chartData,
xName: 'IN_DATE', width: 2, marker: {
visible: true,
width: 10,
height: 10,
shape: 'Diamond'
}, fill: '#4472C4',
yName: 'CHANGETYPEB', name: 'Modeled (Piping)',
},
],
textRender: function (args) {
args.cancel = args.point.y === 0;
},
height: '520'
}, '#chartContainer');
}
}
data
[
{
"IN_DATE": "06/26-07",
"CHANGETYPEY": 1500,
"SUPP_CHANGE": 5,
"SUPP_QTY": 1000
},
{
"IN_DATE": "06/26-12",
"SUPP_CHANGE": 5,
"SUPP_QTY": 800
},
{
"IN_DATE": "06/26-13",
"CHANGETYPEB": 1500
},
{
"IN_DATE": "06/27-07",
"CHANGETYPEY": 1500,
"SUPP_CHANGE": 5,
"SUPP_QTY": 1000
},
{
"IN_DATE": "06/27-12",
"SUPP_CHANGE": 10,
"SUPP_QTY": 850
},
{
"IN_DATE": "06/27-13",
"CHANGETYPEB": 1500
},
{
"IN_DATE": "06/28-07",
"CHANGETYPEY": 1500,
"SUPP_CHANGE": 5,
"SUPP_QTY": 1000
},
{
"IN_DATE": "06/28-12",
"SUPP_CHANGE": 5,
"SUPP_QTY": 900
},
{
"IN_DATE": "06/28-13",
"CHANGETYPEB": 1500
},
{
"IN_DATE": "06/29-07",
"CHANGETYPEY": 1500,
"SUPP_CHANGE": 5,
"SUPP_QTY": 1000
},
{
"IN_DATE": "06/29-12",
"SUPP_CHANGE": 5,
"SUPP_QTY": 950
},
{
"IN_DATE": "06/29-13",
"CHANGETYPEB": 1500
},
{
"IN_DATE": "06/30-07",
"CHANGETYPEY": 1500,
"SUPP_CHANGE": 10,
"SUPP_QTY": 1000
},
{
"IN_DATE": "06/30-12",
"SUPP_CHANGE": 5,
"SUPP_QTY": 1000
},
{
"IN_DATE": "06/30-13",
"CHANGETYPEB": 1500
},
{
"IN_DATE": "07/01-07",
"CHANGETYPEY": 1500,
"SUPP_CHANGE": 5,
"SUPP_QTY": 250
},
{
"IN_DATE": "07/01-12",
"SUPP_CHANGE": 5,
"SUPP_QTY": 1000
},
{
"IN_DATE": "07/01-13",
"CHANGETYPEB": 1500
},
{
"IN_DATE": "07/02-07",
"CHANGETYPEY": 1500,
"SUPP_CHANGE": 15,
"SUPP_QTY": 300
},
{
"IN_DATE": "07/02-12",
"SUPP_CHANGE": 5,
"SUPP_QTY": 1000
},
{
"IN_DATE": "07/02-13",
"CHANGETYPEB": 1500
},
{
"IN_DATE": "07/03-07",
"CHANGETYPEY": 1500,
"SUPP_CHANGE": 25,
"SUPP_QTY": 350
},
{
"IN_DATE": "07/03-12",
"SUPP_CHANGE": 5,
"SUPP_QTY": 1000
},
{
"IN_DATE": "07/03-13",
"CHANGETYPEB": 1500
},
{
"IN_DATE": "07/04-07",
"CHANGETYPEY": 1500,
"SUPP_CHANGE": 50,
"SUPP_QTY": 400
},
{
"IN_DATE": "07/04-12",
"SUPP_CHANGE": 5,
"SUPP_QTY": 1000
},
{
"IN_DATE": "07/04-13",
"CHANGETYPEB": 1500
}
]
Hi TaeWook,
Greetings from Syncfusion.
We have ensured your reported scenario with your attached code-snippet. Tooltip rendered properly as per behavior. We have attached the tested sample and screenshot for your reference. Please check with below sample.
Sample: https://stackblitz.com/edit/6ohequ?file=index.js,index.html
Since we are unable to replicate an issue from our end, we request you to share the following information which will be helpful for further analysis and provide you the solution sooner.
- Try to reproduce the reported scenario in above sample.
- Share the details if you have done any other customization in your sample.
Kindly revert us if you have any concerns.
Regards,
Nishanthi
