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
//create data set on our data
3
var dataSet = anychart.data.set([
4
['Parking\nDifficult', 95],
5
['Sales\nRep', 60],
6
['Poor\nLighting', 45],
7
['Layout\nConfusing', 37],
8
['Sizes\nLimited', 30],
9
['Clothing\nFaded', 27],
10
['Clothing\nShrank', 18]
11
]);
12
13
//create pareto chart
14
var chart = anychart.pareto(dataSet);
15
16
//get pareto column series and set settings
17
var column = chart.getSeriesAt(0);
18
column.name('Column');
19
column.fill(function () {
20
if (this.rf < 10) {
21
return '#E24B26'
22
} else {
23
return this.sourceColor;
24
}
25
});
26
column.stroke(function () {
27
if (this.rf < 10) {
28
return '#60727B'
29
} else {
30
return this.sourceColor;
31
}
32
});
33
column.labels().enabled(true);
34
35
//get pareto line series
36
var line = chart.getSeriesAt(1);
37
line.name('Line');
38
39
//create second horizontal line marker
40
lineMarker = chart.lineMarker(1);
41
lineMarker.axis(chart.yAxis(1));
42
lineMarker.value(80);
43
lineMarker.stroke("#A5B3B3", 1, "10 2", "round"); // sets stroke
44
45
chart.container('container');
46
chart.draw();
47
});