HTMLcopy
1
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
2
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-mekko.min.js"></script>
3
4
<div id="container"></div>
CSScopy
8
1
html,
2
body,
3
#container {
4
width: 100%;
5
height: 100%;
6
margin: 0;
7
padding: 0;
8
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
var data = {
3
header: [
4
'#',
5
'LENOVO',
6
'HP',
7
'DELL',
8
'APPLE',
9
'ACER',
10
'ASUS',
11
'OTHERS'
12
],
13
rows: [
14
['Q1', 12613,11114,10158,3555,2900,2603,8693],
15
['Q2', 16197,16165,10648,4368,4007,3593,9829],
16
['Q3', 18310,15447,10827,5513,5085,4747,11448],
17
['Q4', 21491,15683,13199,6893,4741,4570,12813]
18
]
19
};
20
21
// create a mosaic chart
22
var chart = anychart.mosaic();
23
24
// set chart data
25
chart.data(data);
26
27
// set container id for the chart
28
chart.container('container');
29
30
// set the chart title
31
chart.title("Quarterly Brand-wise Personal Computer Shipments in 2020 (Thousands of Units)");
32
33
// initiate chart drawing
34
chart.draw();
35
});