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.column();
4
5
// setting title
6
chart.title("Extra Axes Simple Sample");
7
8
var yScale = chart.yScale();
9
yScale.minimum(0);
10
yScale.maximum(800000);
11
var yScaleTicks = chart.yScale().ticks();
12
yScaleTicks.interval(100000);
13
var yScaleMinorTicks = chart.yScale().minorTicks();
14
yScaleMinorTicks.interval(20000);
15
16
// adding extra Y scale
17
var extraYScale = anychart.scales.linear();
18
extraYScale.minimum(800000);
19
extraYScale.maximum(1600000);
20
var eYScaleTicks = extraYScale.ticks();
21
eYScaleTicks.interval(100000);
22
var eYScaleMinorTicks = extraYScale.minorTicks();
23
eYScaleMinorTicks.interval(20000);
24
25
// adding and adjust extra Y axis
26
var extraYAxis = chart.yAxis(1);
27
extraYAxis.orientation("right");
28
extraYAxis.scale(extraYScale);
29
extraYAxis.title("Extra Y Axis");
30
31
// setting for y axis title
32
var yAxis = chart.yAxis(0);
33
yAxis.title("Basic Y Axes");
34
35
// adjusting Grid
36
var grid = chart.grid(0);
37
grid.stroke("gray 0.8");
38
grid.layout("vertical");
39
var grid1 = chart.grid(1);
40
grid1.stroke("gray 0.8");
41
grid1.layout("horizontal");
42
43
// setting minorGrid settings
44
var minorGrid = chart.minorGrid(0);
45
minorGrid.layout("horizontal");
46
minorGrid.oddFill(null);
47
minorGrid.evenFill(null);
48
minorGrid.stroke("gray 0.3");
49
var minorGrid1 = chart.minorGrid(1);
50
minorGrid1.layout("vertical");
51
minorGrid1.oddFill(null);
52
minorGrid1.evenFill(null);
53
minorGrid1.stroke("gray 0.3");
54
55
// setting first series of data
56
var data = anychart.data.set([
57
["A", 637166],
58
["B", 721630],
59
["C", 148662],
60
["D", 78662],
61
["E", 90000]
62
]);
63
64
var column = chart.column(data);
65
column.tooltip(false);
66
67
chart.container("container");
68
chart.draw();
69
});