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
3
var chart = anychart.column3d();
4
5
// setting yScale settings
6
var yScale = chart.yScale();
7
yScale.minimum(0);
8
yScale.maximum(12000000000000);
9
yScale.ticks().interval(2000000000000);
10
11
// adding and adjusting extra Y scale
12
var extraYScale = anychart.scales.linear();
13
extraYScale.minimum(0);
14
extraYScale.maximum(140);
15
extraYScale.ticks().interval(20);
16
17
// adding and adjusting extra Y axis
18
var extraYAxis = chart.yAxis(1);
19
extraYAxis.orientation("right");
20
extraYAxis.scale(extraYScale);
21
22
// setting yAxes titles
23
chart.yAxis(0).title("Debt");
24
extraYAxis.title("GDP");
25
26
// yAxes labels text adjusting
27
chart.yAxis(0).labels().format("${%value}{scale:(1000000000000)|(T)}");
28
chart.yAxis(1).labels().format("{%value}%");
29
30
// adjusting data visualisation
31
var lineSeries = chart.column(getData1());
32
33
lineSeries.yScale(extraYScale);
34
35
var columnSeries = chart.column(getData2());
36
37
chart.container("container");
38
chart.draw();
39
});
40
41
function getData1(){
42
return [
43
[1940, 52.4],
44
[1941, 50.5],
45
[1942, 54.9],
46
[1943, 79.2],
47
[1944, 97.6],
48
[1945, 117.5]
49
]
50
}
51
52
function getData2(){
53
return [
54
[1940, 45500000000],
55
[1941, 56500000000],
56
[1942, 100000000000],
57
[1943, 170000000000],
58
[1944, 216500000000],
59
[1945, 263535000000]
60
];
61
}