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
{x: "Jan", low: 1000, q1: 1050, median: 1200, q3: 1800, high: 2000, outliers: [800, 2500, 3200]},
6
{x: "Feb", low: 2500, q1: 3000, median: 3800, q3: 3900, high: 4000},
7
{x: "Mar", low: 2000, q1: 2300, median: 2500, q3: 2900, high: 3000},
8
{x: "Apr", low: 4000, q1: 5000, median: 6500, q3: 6900, high: 7200, outliers: [8930],
9
normal: {
10
fill: "#00bfa5 0.3",
11
stroke: "#00bfa5",
12
medianStroke: "0.5 #00bfa5",
13
stemStroke: "0.5 #00bfa5"
14
},
15
hovered: {
16
fill: "#00bfa5 0.1",
17
stroke: "2 #00bfa5",
18
medianStroke: "1 #00bfa5",
19
stemStroke: "1 #00bfa5"
20
},
21
selected: {
22
fill: "#00bfa5 0.5",
23
stroke: "4 #00bfa5",
24
medianStroke: "2 #00bfa5",
25
stemStroke: "2 #00bfa5"
26
}
27
},
28
{x: "May", low: 8000, q1: 8400, median: 8500, q3: 8800, high: 9000, outliers: [6950, 3000]}
29
];
30
31
// create a chart
32
var chart = anychart.box();
33
34
// create a series and set the data
35
series = chart.box(data);
36
37
// set the chart title
38
var title = chart.title("Box Chart: Individual Points");
39
40
// set the interactivity mode
41
chart.interactivity("by-x");
42
43
// set the container id
44
chart.container("container");
45
46
// initiate drawing the chart
47
chart.draw();
48
});