Back

Legend placement

Example where chart legend is palced on top of the cart. Note that legend can be positioned also on the right or left or bottom (default setting if legend is enabled).

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>

<div id="demo"></div>

CSS

CSS
//No CSS for this example 

JavaScript

JavaScript

    var chart = new PieChart({
        container:document.getElementById("demo"),
        area: { height: null },
        data: { url:"/dvsl/data/pie-chart/population.json" },
        labels: {enabled: false},
        legend: {
            enabled: true,
            width:900,
            panel:{
                side:"top",
                align:"center"
            }
        }
    });

Data

Data
{
    "subvalues": [
        {
            "subvalues": [
                {
                    "name": "Australia",
                    "value": 21263
                },
                {
                    "name": "New Zealand",
                    "value": 4213
                },
                {
                    "name": "Canada",
                    "value": 33487
                },
                {
                    "name": "United States",
                    "value": 307212
                }
            ],
            "id": "Western Offshoots",
            "value": 366175,
            "name": "Western Offshoots"
        },
        {
            "subvalues": [
                {
                    "name": "Albania",
                    "value": 3639
                },
                {
                    "name": "Bulgaria",
                    "value": 7205
                },
                {
                    "name": "Czechoslovakia",
                    "value": 15675
                },
                {
                    "name": "Hungary",
                    "value": 9906
                },
                {
                    "name": "Poland",
                    "value": 38483
                },
                {
                    "name": "Romania",
                    "value": 22215
                },
                {
                    "name": "Yugoslavia",
                    "value": 23031
                }
            ],
            "id": "Eastern Europe",
            "value": 120154,
            "name": "Eastern Europe"
        },
        {
            "subvalues": [
                {
                    "name": "Bosnia",
                    "value": 4613
                },
                {
                    "name": "Croatia",
                    "value": 4489
                },
                {
                    "name": "Macedonia",
                    "value": 2067
                },
                {
                    "name": "Slovenia",
                    "value": 2006
                },
                {
                    "name": "Serbia\/Montenegro\/Kosovo",
                    "value": 9856
                },
                {
                    "name": "Former Yugoslavia",
                    "value": 23031
                },
                {
                    "name": "Czech Republic",
                    "value": 10212
                },
                {
                    "name": "Slovakia",
                    "value": 5463
                },
                {
                    "name": "Former Czechoslovakia",
                    "value": 15675
                }
            ],
            "id": "Yugoslav and Czech Successor states",
            "value": 77412,
            "name": "Yugoslav and Czech Successor states"
        },
        {
            "subvalues": [
                {
                    "name": "Armenia",
                    "value": 2967
                },
                {
                    "name": "Azerbaijan",
                    "value": 8239
                },
                {
                    "name": "Belarus",
                    "value": 9649
                },
                {
                    "name": "Estonia",
                    "value": 1299
                },
                {
                    "name": "Georgia",
                    "value": 4616
                },
                {
                    "name": "Kazakhstan",
                    "value": 15399
                },
                {
                    "name": "Kyrgyzstan",
                    "value": 5432
                },
                {
                    "name": "Latvia",
                    "value": 2232
                },
                {
                    "name": "Lithuania",
                    "value": 3555
                },
                {
                    "name": "Moldova",
                    "value": 4321
                },
                {
                    "name": "Russian Federation",
                    "value": 140041
                },
                {
                    "name": "Tajikistan",
                    "value": 7349
                },
                {
                    "name": "Turkmenistan",
                    "value": 4885
                },
                {
                    "name": "Ukraine",
                    "value": 45700
                },
                {
                    "name": "Uzbekistan",
                    "value": 27606
                }
            ],
            "id": "Successor Republics of USSR",
            "value": 283290,
            "name": "Successor Republics of USSR"
        },
        {
            "subvalues": [
                {
                    "name": "Argentina",
                    "value": 40914
                },
                {
                    "name": "Brazil",
                    "value": 198739
                },
                {
                    "name": "Chile",
                    "value": 16602
                },
                {
                    "name": "Colombia",
                    "value": 43677
                },
                {
                    "name": "Mexico",
                    "value": 111212
                },
                {
                    "name": "Peru",
                    "value": 29547
                },
                {
                    "name": "Uruguay",
                    "value": 3494
                },
                {
                    "name": "Venezuela",
                    "value": 26815
                }
            ],
            "id": "8 Latin American countries",
            "value": 471000,
            "name": "8 Latin American countries"
        },
        {
            "subvalues": [
                {
                    "name": "Bolivia",
                    "value": 9775
                },
                {
                    "name": "Costa Rica",
                    "value": 4455
                },
                {
                    "name": "Cuba",
                    "value": 11452
                },
                {
                    "name": "Dominican Republic",
                    "value": 9650
                },
                {
                    "name": "Ecuador",
                    "value": 14573
                },
                {
                    "name": "El Salvador",
                    "value": 6031
                },
                {
                    "name": "Guatemala",
                    "value": 13277
                },
                {
                    "name": "Ha\u00efti",
                    "value": 9036
                },
                {
                    "name": "Honduras",
                    "value": 7834
                },
                {
                    "name": "Jamaica",
                    "value": 2826
                },
                {
                    "name": "Nicaragua",
                    "value": 5891
                },
                {
                    "name": "Panama",
                    "value": 3360
                },
                {
                    "name": "Paraguay",
                    "value": 6291
                },
                {
                    "name": "Puerto Rico",
                    "value": 3966
                },
                {
                    "name": "Trinidad and Tobago",
                    "value": 1230
                }
            ],
            "id": "15 Latin American countries",
            "value": 109647,
            "name": "15 Latin American countries"
        },
        {
            "subvalues": [
                {
                    "name": "China",
                    "value": 1331400
                },
                {
                    "name": "India",
                    "value": 1156898
                },
                {
                    "name": "Indonesia (including Timor until 1999)",
                    "value": 230599
                },
                {
                    "name": "Japan",
                    "value": 127079
                },
                {
                    "name": "Philippines",
                    "value": 97977
                },
                {
                    "name": "South Korea",
                    "value": 48509
                },
                {
                    "name": "Thailand",
                    "value": 65998
                },
                {
                    "name": "Taiwan",
                    "value": 22974
                },
                {
                    "name": "Bangladesh",
                    "value": 156051
                },
                {
                    "name": "Burma",
                    "value": 52826
                },
                {
                    "name": "Hong Kong",
                    "value": 7055
                },
                {
                    "name": "Malaysia",
                    "value": 25716
                },
                {
                    "name": "Nepal",
                    "value": 28563
                },
                {
                    "name": "Pakistan",
                    "value": 174579
                },
                {
                    "name": "Singapore",
                    "value": 4658
                },
                {
                    "name": "Sri Lanka",
                    "value": 21325
                }
            ],
            "id": "16 East Asian countries",
            "value": 3552207,
            "name": "16 East Asian countries"
        },
        {
            "subvalues": [
                {
                    "name": "Afghanistan",
                    "value": 38396
                },
                {
                    "name": "Cambodia",
                    "value": 14494
                },
                {
                    "name": "Laos",
                    "value": 6834
                },
                {
                    "name": "Mongolia",
                    "value": 3041
                },
                {
                    "name": "North Korea",
                    "value": 22665
                },
                {
                    "name": "Vietnam",
                    "value": 88577
                }
            ],
            "id": "30 East Asian countries",
            "value": 174007,
            "name": "30 East Asian countries"
        },
        {
            "subvalues": [
                {
                    "name": "Bahrain",
                    "value": 729
                },
                {
                    "name": "Iran",
                    "value": 66429
                },
                {
                    "name": "Iraq",
                    "value": 28946
                },
                {
                    "name": "Israel",
                    "value": 7234
                },
                {
                    "name": "Jordan",
                    "value": 6269
                },
                {
                    "name": "Kuwait",
                    "value": 2693
                },
                {
                    "name": "Lebanon",
                    "value": 4099
                },
                {
                    "name": "Oman",
                    "value": 2910
                },
                {
                    "name": "Qatar",
                    "value": 833
                },
                {
                    "name": "Saudi Arabia",
                    "value": 28687
                },
                {
                    "name": "Syria",
                    "value": 21763
                },
                {
                    "name": "Turkey",
                    "value": 76806
                },
                {
                    "name": "United Arab Emirates",
                    "value": 4798
                },
                {
                    "name": "Yemen",
                    "value": 22858
                },
                {
                    "name": "West Bank and Gaza",
                    "value": 4013
                }
            ],
            "id": "15 West Asian countries",
            "value": 279067,
            "name": "15 West Asian countries"
        },
        {
            "subvalues": [
                {
                    "name": "Algeria",
                    "value": 34178
                },
                {
                    "name": "Angola",
                    "value": 12799
                },
                {
                    "name": "Benin",
                    "value": 8792
                },
                {
                    "name": "Botswana",
                    "value": 1991
                },
                {
                    "name": "Burkina Faso",
                    "value": 15746
                },
                {
                    "name": "Burundi",
                    "value": 9511
                },
                {
                    "name": "Cameroon",
                    "value": 18879
                },
                {
                    "name": "Cape Verde",
                    "value": 501
                },
                {
                    "name": "Central African Republic",
                    "value": 4742
                },
                {
                    "name": "Chad",
                    "value": 10329
                },
                {
                    "name": "Comoro Islands",
                    "value": 752
                },
                {
                    "name": "Congo 'Brazzaville'",
                    "value": 4013
                },
                {
                    "name": "C\u00f4te d'Ivoire",
                    "value": 20617
                },
                {
                    "name": "Djibouti",
                    "value": 725
                },
                {
                    "name": "Egypt",
                    "value": 78867
                },
                {
                    "name": "Equatorial Guinea",
                    "value": 633
                },
                {
                    "name": "Eritrea and Ethiopia",
                    "value": 90884
                },
                {
                    "name": "Gabon",
                    "value": 1515
                },
                {
                    "name": "Gambia",
                    "value": 1778
                },
                {
                    "name": "Ghana",
                    "value": 23888
                },
                {
                    "name": "Guinea",
                    "value": 10058
                },
                {
                    "name": "Guinea Bissau",
                    "value": 1534
                },
                {
                    "name": "Kenya",
                    "value": 39003
                },
                {
                    "name": "Lesotho",
                    "value": 1916
                },
                {
                    "name": "Liberia",
                    "value": 3583
                },
                {
                    "name": "Libya",
                    "value": 6324
                },
                {
                    "name": "Madagascar",
                    "value": 20654
                },
                {
                    "name": "Malawi",
                    "value": 15029
                },
                {
                    "name": "Mali",
                    "value": 13443
                },
                {
                    "name": "Mauritania",
                    "value": 3129
                },
                {
                    "name": "Mauritius",
                    "value": 1284
                },
                {
                    "name": "Morocco",
                    "value": 31285
                },
                {
                    "name": "Mozambique",
                    "value": 21669
                },
                {
                    "name": "Namibia",
                    "value": 2109
                },
                {
                    "name": "Niger",
                    "value": 15306
                },
                {
                    "name": "Nigeria",
                    "value": 149229
                },
                {
                    "name": "Rwanda",
                    "value": 10746
                },
                {
                    "name": "S\u00e3o Tom\u00e9 and Principe",
                    "value": 172
                },
                {
                    "name": "Senegal",
                    "value": 13712
                },
                {
                    "name": "Seychelles",
                    "value": 87
                },
                {
                    "name": "Sierra Leone",
                    "value": 5132
                },
                {
                    "name": "Somalia",
                    "value": 9832
                },
                {
                    "name": "South Africa",
                    "value": 49052
                },
                {
                    "name": "Sudan",
                    "value": 41088
                },
                {
                    "name": "Swaziland",
                    "value": 1337
                },
                {
                    "name": "Tanzania",
                    "value": 41049
                },
                {
                    "name": "Togo",
                    "value": 6032
                },
                {
                    "name": "Tunisia",
                    "value": 10486
                },
                {
                    "name": "Uganda",
                    "value": 32370
                },
                {
                    "name": "Zaire (Congo Kinshasa)",
                    "value": 68693
                },
                {
                    "name": "Zambia",
                    "value": 11863
                },
                {
                    "name": "Zimbabwe",
                    "value": 11393
                }
            ],
            "id": "57 African countries",
            "value": 989739,
            "name": "57 African countries"
        }
    ],
    "id": ""
}
Download Data