Tooltips

Usually it's necessary to show additional information about chart items. We may set labels. However, if text is rather long, we have to use tooltips.

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

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 - 0, left - 20)

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

Tooltip style

Tooltip style 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;
}
Back to top