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>