1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3
4<head>
5  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
7  <title>amCharts Responsive Example</title>
8  <script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
9  <script src="http://www.amcharts.com/lib/3/pie.js"></script>
10  <script src="../responsive.min.js"></script>
11  <style>
12  body, html {
13    height: 100%;
14    padding: 0;
15    margin: 0;
16  }
17  </style>
18  <script>
19    AmCharts.makeChart("chartdiv", {
20      "type": "pie",
21      "dataProvider": [{
22        "country": "Czech Republic",
23        "litres": 156.9
24      }, {
25        "country": "Ireland",
26        "litres": 131.1
27      }, {
28        "country": "Germany",
29        "litres": 115.8
30      }, {
31        "country": "Australia",
32        "litres": 109.9
33      }, {
34        "country": "Austria",
35        "litres": 108.3
36      }, {
37        "country": "UK",
38        "litres": 65
39      }, {
40        "country": "Belgium",
41        "litres": 50
42      }],
43      "titleField": "country",
44      "valueField": "litres",
45      "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
46      "innerRadius": "30%",
47      "legend": {
48        "align": "center",
49        "markerType": "circle"
50      },
51      "responsive": {
52        "enabled": true,
53        "addDefaultRules": true,
54        "rules": [
55          {
56            "minWidth": 500,
57            "overrides": {
58              "innerRadius": "50%",
59            }
60          }
61        ]
62      }
63    });
64  </script>
65</head>
66
67<body>
68  <div id="chartdiv" style="width: 100%; height: 100%;"></div>
69</body>
70
71</html>