I’m interested in using the tooltip functionality of the dhtmlXCharts, which works, but does not quite produce the “feel” I desire.
First, for the tooltip to appear, the user must hover over the marker for a particular data step. However, if this marker is small, it is not a very quick and easy task to hover over the marker. I wanted to know if it was possible to add some padding to the markers such that the user can hover “near” the marker and the tooltip will appear.
Second, I would like to change delay between hovering over a data point and the appearance of the tooltip itself such that it is near instantaneous. For the charts I am designing this would provide a more fluid experience as opposed to the couple seconds of delay.
Hello
About your first point: just set in chart init the ‘eventRadius’ attribute.
I.e.
var chart = new dhtmlXChart({
view:“spline”,
eventRadius: 50,
container:“chart_container”,
value:"#value#",
tooltip:{
template: “#value#”
},
item:{
borderColor:"#335900",
color:"#69ba00"
},
line:{
color:"#69ba00",
width:3
}
});
Second, I would like to change delay between hovering over a data point and the appearance of the tooltip itself such that it is near instantaneous.
Tooltip appears with 500ms delay. 500 is hard-coded number and it can not be set in chart configuration. There is the following snippet in dhtmlxchart.js library:
You can locate 500 number in the chart library and change it. Or you can redefine this method as in:
dhtmlx.extend(dhtmlx.MouseEvents,{
_onMouse: function(e){
if (dhtmlx._isIE) //make a copy of event, will be used in timed call
e = document.createEventObject(event);
if (this._mouse_move_timer) //clear old event timer
window.clearTimeout(this._mouse_move_timer);
this.callEvent("onMouseMoving",[e]);
if (e.type == "mousemove")
this._onMouseMove(e);
this._mouse_move_timer = window.setTimeout(dhtmlx.bind(function(){
if (e.type != "mousemove")
this._onMouseOut(e);
},this),500);
}
},true);
You need to call this method before chart creation.