-
Notifications
You must be signed in to change notification settings - Fork 325
features tooltip
- This section introduces about feature of tooltip.
Using tooltip.align
option, you can set base position.
//...
var options = {
tooltip: {
align: 'center top'
}
};
tui.chart.barChart(container, data, options);
Using tooltip.offsetX
, tooltip.offsetY
option, you can moving a tooltip to four direction like top, bottom, left and right.
Deprecated tooltip.position
option.
//...
var options = {
tooltip: {
// Recommended
offsetX: 10,
offsetY: -10
// Deprecated
position: {
left: 10,
top: -10
}
}
};
tui.chart.barChart(container, data, options);
Using tooltip.grouped
option, you can use group tooltip.
//...
var options = {
tooltip: {
grouped: true
}
};
tui.chart.lineChart(container, data, options);
Using tooltip.template
option, you can change template of tooltip.
This option can be set to function, and must returns HTML string.
The basic tooltip template receives category and item({value: String, legend: String}
) information.
//...
var options = {
tooltip: {
template: function(category, item, categoryTimestamp) {
var head = '<div>' + category + '</div>',
body = '<div>' + item.value + ':' + item.legend + '</div>';
return head + body;
}
}
};
tui.chart.lineChart(container, data, options);
The group tooltip template receives category and items(Array.<{value: String, legend: String}>
) information.
//...
var options = {
tooltip: {
grouped: true,
template: function(category, items, categoryTimestamp) {
var head = '<div>' + category + '</div>',
body = tui.util.map(items, function(item) {
return '<div>' + item.value + ':' + item.legend + '</div>'
}),join('');
return head + body;
}
}
};
tui.chart.lineChart(container, data, options);
If category's type is datetime, tooltip.template
function sends timestamp as a 3rd parameter.
By using it, category could be formatted different to Axes's date format.
//...
var options = {
tooltip: {
template: function(category, item, timestamp) {
var date = new Date(timestamp);
var head = '<div>' + date.getYear() + '-' + date.getMonth() + '</div>',
body = '<div>' + item.value + ':' + item.legend + '</div>';
return head + body;
}
}
};
tui.chart.lineChart(container, data, options);
Using some user event(.beforeShowTooltip
, .afterShowTooltip
) and some method(.setTooltipOffset
, .resetTooltipOffset
), you can dynamically change position of tooltip.
//...
var chart = tui.chart.barChart(data);
chart.on('beforeShowTooltip', function(info) {
if (info.legendIndex === 0) {
// Recommended
chart.setTooltipOffset({
x: 20,
y: -10
});
// Deprecated
chart.setTooltipPosition({
left: 20,
top: -10
});
}
});
chart.on('afterShowTooltip', function(info) {
// Recommended
chart.resetTooltipOffset();
// Deprecated
chart.resetTooltipPosition();
});
Tooltips among multipe charts could be synchronized by few steps
- Set a public event handler which invokes before showing tooltip.
- In this handler, call Chart's
showTooltip
API. This will show a tooltip pointing to the same series item. - Set a public event handler whick invokes before hiding tooltip
- In this handler, call Chart's
hideTooltip
API. This will hide a tooltip displaying on screen.
However, showTooltip
, hideTooltip
not works on every chart type.
It works on Bar, Column, Line, Area, BoxPlot Chart.
Here is the example code:
chart1 = tui.chart.lineChart(container1, data, options);
chart2 = tui.chart.lineChart(container2, data, options);
chart3 = tui.chart.lineChart(container3, data, options);
chart1.on('afterShowTooltip', function(params) { /* 1 */
chart2.showTooltip(params); /* 2 */
chart3.showTooltip(params);
});
chart2.on('afterShowTooltip', function(params) {
chart1.showTooltip(params);
chart3.showTooltip(params);
});
chart3.on('afterShowTooltip', function(params) {
chart1.showTooltip(params);
chart2.showTooltip(params);
});
chart1.on('beforeHideTooltip', function(params) { /* 3 */
chart2.hideTooltip(); /* 4 */
chart3.hideTooltip();
});
chart2.on('beforeHideTooltip', function(params) {
chart1.hideTooltip();
chart3.hideTooltip();
});
chart3.on('beforeHideTooltip', function(params) {
chart1.hideTooltip();
chart2.hideTooltip();
});
- Chart Guide