-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathmultiaxes.html
117 lines (111 loc) · 3.71 KB
/
multiaxes.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<html>
<head>
<title>Yagr</title>
<script src="../../dist/yagr.iife.js"></script>
<link rel="stylesheet" href="../../dist/index.css" />
<style>
.container {
margin-bottom: 26px;
height: 400px;
width: 50%;
}
.grid {
height: 400px;
display: flex;
width: 100%;
flex-direction: row;
justify-content: space-between;
}
</style>
</head>
<body>
<h1>Multi-scales/axes</h1>
<div class="grid">
<div id="chart1" class="container left"></div>
<div id="chart2" class="container right"></div>
<div id="chart3" class="container right"></div>
</div>
<script>
const y1 = new Yagr(chart1, {
timeline: [1, 2, 3],
series: [
{data: [1, 2, 3], color: 'red'},
{data: [2, 1, 3], color: 'orange'},
{data: [3, 3, 1], color: 'blue'},
{data: [4, 2, 2], color: 'green', scale: 'r'},
{data: [0, 4, 1], color: 'magenta', scale: 'r'},
],
axes: {
r: {side: 'right'},
y: {},
},
scales: {
y: {min: 0, max: 5},
r: {min: 0, max: 5},
},
});
const y2 = new Yagr(chart2, {
timeline: [1, 2, 3],
title: {
text: 'Tooltip settings',
},
tooltip: {
scales: {
r: 'Right scale',
y: 'Left scale',
},
sum: {
r: true,
y: false,
},
},
series: [
{data: [4, 2, 0], color: 'red'},
{data: [0, 2, 1], color: 'orange'},
{data: [5, 4, 4], color: 'blue'},
{data: [2, 2, 3], color: 'green', scale: 'r', type: 'area'},
{data: [2, 1, 4], color: 'magenta', scale: 'r', type: 'area'},
],
axes: {
r: {side: 'right'},
y: {},
},
scales: {
y: {min: 0, max: 5},
r: {min: 0, max: 10, stacking: true},
},
});
const y3 = new Yagr(chart3, {
timeline: [1, 2, 3],
title: {
text: 'Equal ticks',
},
tooltip: {
scales: {
r: 'Right scale',
y: 'Left scale',
},
sum: {
r: true,
y: false,
},
},
series: [
{data: [4, 2, 0], color: 'red'},
{data: [0, 2, 1], color: 'orange'},
{data: [5, 4, 4], color: 'blue'},
{data: [2, 2, 3], color: 'green', scale: 'r', type: 'area'},
{data: [2, 1, 4], color: 'magenta', scale: 'r', type: 'area'},
],
axes: {
r: {side: 'right', splitsCount: 5},
y: {splitsCount: 5},
},
scales: {
y: {min: 0, max: 5},
r: {min: 0, max: 10, stacking: true},
},
});
</script>
</body>
</html>