I'm using SyncFusion for Javascript to render charts in my app. I have a StepChart with several series, continuous X axis and unequal intervals between data points. I want to show a tooltip with description when user hovers certain point. But it doesn't work as expected. Sometimes tooltips are shown for the wrong points, and for some points they are not shown at all.
It seem's there's some clever algorithm that decides what tooltip should be shown for each area... Unfortunately, it doesn't work for me. It would be enough just to show tooltip when user's mouse is exactly over the dot (as my dots are quite big).
$(function() {
$("#container").ejChart({
primaryXAxis: {
valueType: 'datetime',
range: {
min: new Date(1422874800000),
max: new Date(1422878400000),
interval: 5
},
intervalType: 'Minutes'
},
primaryYAxis: {
title: {
text: 'Value'
},
range: {
min: 0,
max: 300
}
},
commonSeriesOptions: {
type: 'stepline',
enableAnimation: true,
marker: {
shape: 'circle',
size: {
height: 12,
width: 12
},
visible: true
},
border: {
width: 2
},
tooltip: {
visible: true,
format: "#point.x#<br/>#series.name# value is #point.y# "
}
},
series: [{
"name": "Line 1",
"enableAnimation": false,
"points": [{
"x": new Date(1422874800000),
"y": 100
}, {
"x": new Date(1422875280000),
"y": 160
}, {
"x": new Date(1422875520000),
"y": 200
}, {
"x": new Date(1422876180000),
"y": 200
}]
}, {
"name": "Line 2",
"enableAnimation": false,
"points": [{
"x": new Date(1422874800000),
"y": 50
}, {
"x": new Date(1422875400000),
"y": 170
}, {
"x": new Date(1422875880000),
"y": 180
}, {
"x": new Date(1422876180000),
"y": 180
}]
}, {
"name": "Line 3",
"enableAnimation": false,
"points": [{
"x": new Date(1422874800000),
"y": 120
}, {
"x": new Date(1422874980000),
"y": 140
}, {
"x": new Date(1422875400000),
"y": 240
}, {
"x": new Date(1422875880000),
"y": 260
}, {
"x": new Date(1422876180000),
"y": 260
}]
}],
canResize: true,
title: {
text: 'Step Chart'
},
legend: {
visible: true
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://js.syncfusion.com/demos/web/scripts/jquery.globalize.min.js"></script>
<link href="http://js.syncfusion.com/demos/web/themes/ej.widgets.core.min.css" rel="stylesheet" />
<link href="http://js.syncfusion.com/demos/web/themes/default.css" rel="stylesheet" />
<link href="http://js.syncfusion.com/demos/web/themes/default-responsive.css" rel="stylesheet" />
<link href="http://js.syncfusion.com/demos/web/themes/bootstrap.min.css" rel="stylesheet" />
<link href="http://js.syncfusion.com/demos/web/themes/default-theme/ej.widgets.all.min.css" rel="stylesheet" />
<link href="http://js.syncfusion.com/demos/web/themes/default-theme/ej.theme.min.css" rel="stylesheet" />
<script src="http://js.syncfusion.com/demos/web/scripts/ej.web.all.min.js"></script>
<div class="content-container-fluid">
<div class="row">
<div class="cols-sample-area">
<div id="container"></div>
</div>
</div>
</div>Any help is appreciated!
