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 customTheme = {
3
column: {
4
title: {
5
enabled: true,
6
text: 'Weekly training'
7
},
8
defaultXAxisSettings: {
9
labels: {
10
enabled: true,
11
fontSize: 15,
12
fontFamily: 'Tahoma'
13
},
14
title: {
15
enabled: true,
16
text: 'Days'
17
}
18
},
19
defaultYAxisSettings: {
20
labels: {
21
fontColor: '#9E9E9E',
22
fontSize: 18
23
},
24
minorLabels: {
25
fontSize: 8
26
},
27
title: {
28
enabled: true,
29
text: 'Distance, km'
30
}
31
},
32
xScale: {
33
type: 'ordinal',
34
names: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
35
},
36
defaultLineMarkerSettings: {
37
enabled: true,
38
value: 30,
39
stroke: '2 #F44336'
40
},
41
defaultTextMarkerSettings: {
42
enabled: true,
43
value: 31,
44
align: 'left',
45
text: 'Daily plan',
46
fontColor: 'black',
47
offsetX: 40
48
}
49
}
50
};
51
52
// Set custom theme.
53
anychart.theme(customTheme);
54
55
var chart = anychart.column([21.2, 32.5, 21.3, 44.5, 21, 35.2, 67.7]);
56
chart.lineMarker();
57
chart.textMarker();
58
chart.title('Set custom theme');
59
chart.container('container');
60
chart.draw();
61
});