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
// create data
4
var data = [
5
["Jan", 10],
6
["Feb", 15],
7
["Mar", 18],
8
["Apr", 23],
9
["May", 10],
10
["Jun", 5],
11
["Jul", 8],
12
["Aug", 3],
13
["Sep", -10],
14
["Oct", -15],
15
["Nov", 18],
16
["Dec", 21]
17
];
18
19
// set the chart type
20
var chart = anychart.column();
21
22
// set the series type and data
23
series = chart.column(data);
24
25
// set custom coloring functions
26
series.fill(coloringFunction);
27
series.stroke('1 Black');
28
29
// set the chart title
30
chart.title("Rising Falling Coloring");
31
32
// set the container id
33
chart.container("container");
34
35
// initiate drawing the chart
36
chart.draw();
37
});
38
39
// custom color function
40
function coloringFunction() {
41
42
// color the maximal value
43
if (this.value == this.series.getStat('seriesMax')) return '#94353C';
44
45
// color elements depending on the argument
46
var x = this.x;
47
if ((x == 'Jan') || (x == 'Feb') || (x == 'Dec')) return '#B2E3E8';
48
if ((x == 'Jul') || (x == 'Jun') || (x == 'Aug')) return '#D94330';
49
50
// get the default otherwise
51
return this.sourceColor;
52
}