DHTMLX Docs & Samples Explorer

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 can define only tooltip template:

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

Also it is possible to set the tooltip position - offset from a 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 dhx_tooltip css class:

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