HTMLcopy
1
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
var stage = anychart.graphics.create("container");
3
4
var dataSet = anychart.data.set([
5
["John", 10000, 13000, 15000],
6
["Jake", 12000, 10000, 18000],
7
["Peter", 18000, 19000, 16000],
8
["James", 11000, 10000, 14000],
9
["Mary", 9000, 16000, 19000]
10
]);
11
12
var data1 = dataSet.mapAs({x: 0, value: 1});
13
var data2 = dataSet.mapAs({x: 0, value: 2});
14
var data3 = dataSet.mapAs({x: 0, value: 3});
15
16
// chart type
17
chart = anychart.bar();
18
series1 = chart.bar(data1);
19
series1.name("Year 2008");
20
series2 = chart.bar(data2);
21
series2.name("Year 2010");
22
series3 = chart.bar(data3);
23
series3.name("Year 2012");
24
25
// set title
26
chart.title("Tooltips can leave the chart bounds");
27
28
// set the padding for the chart
29
chart.bounds(10, 20, "90%", "70%");
30
chart.background("green 0.1");
31
32
// adjust series tooltips
33
series1.tooltip().allowLeaveChart(true);
34
series1.tooltip().allowLeaveStage(true);
35
series1.tooltip().allowLeaveScreen(true);
36
series1.tooltip().format("This tooltip can be demonstrated out of chart, out of stage and even go beyond the screen, if it becomes necessary to show it all");
37
series2.tooltip().allowLeaveChart(true);
38
series2.tooltip().allowLeaveStage(true);
39
series2.tooltip().allowLeaveScreen(false);
40
series2.tooltip().format("This tooltip is not allowed to be demonstrated out of screen, though it can leave the chart and the stage bounds");
41
42
// font settings for tooltip text
43
var tooltip = series1.tooltip();
44
tooltip.fontWeight(900);
45
var title = series1.tooltip().title();
46
title.fontWeight(900);
47
48
// adjust chart tooltips for the third series
49
chart.tooltip().format("This series tooltips' settings are inherited from chart tooltip defaults");
50
51
// draw
52
chart.container(stage);
53
chart.draw();
54
55
// limit the stage parameters for better illustration
56
document.getElementById("container").style.width="85%";
57
document.getElementById("container").style.background="#F0FFF0";
58
});