Tooltips

Usually it's necessary to show additional information about chart items. It is possible to set labels for this purpose. However, if a text is rather long, you can use tooltips.

Tooltips are defined by the 'tooltip' property. You need to define a template for the tooltip in the following way:

var chart =  new dhtmlXChart({
    view:"bar",
    container:"chart_container",
    value:"#sales#",
    tooltip:"#details#"   });

Also it is possible to set the tooltip position - an offset from the mouse cursor position (by default, top offset is 0, left is 20)

var chart =  new dhtmlXChart({
    view:"bar",
    container:"chart_container",
    value:"#sales#",
    tooltip:{
        template:"#details#",
        dx:10,
        dy:5
    }
});

Tooltip style

The style of tooltip can be defined right in the template:

var chart =  new dhtmlXChart({
    ...
    tooltip:"<span style='color:#293CD6'>#details#</span>"
});

Also you may define the dhx_tooltip CSS class:

.dhx_tooltip{
    font-family:Tahoma;
    font-size:8pt;
    background-color:white;
    padding:2px 2px 2px 2px;
    border:1px solid #A4BED4;
}