<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>Chart App</title>
</head>
<body>
    <div class="conatiner">
        <canvas id="myChart"></canvas>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

    <script>
        let myChart = document.getElementById('myChart').getContext('2d');

        //Global Options
        Chart.defaults.global.defaultFontFamily = 'Lato';
        Chart.defaults.global.defaultFontSize = 18;
        Chart.defaults.global.defaultFontColor = '#777';


        let popChart = new Chart(myChart, {
            type: 'bar', //bar, pie, doughnut, line, horizontalBar, radar, polarArea
            data: {
                labels: ['Bengaluru', 'Mysore', 'Mangalore', 'Belgaum', 'Gulbarga', 'Davanagere'],
                datasets: [{
                    label: 'Population',
                    data: [
                        8520435,
                        990900,
                        623841,
                        610350,
                        543147,
                        434971
                    ],
                   // backgroundColor: 'red',
                   backgroundColor: [
                       'rgba(255, 99, 132, 0.9)',
                       'rgba(54, 162, 253, 0.9)',
                       'rgba(255, 206, 86, 0.9)',
                       'rgba(75, 192, 192, 0.9)',
                       'rgba(153, 102, 255, 0.9)',
                       'rgba(255, 159, 64, 0.9)',
                       'rgba(255, 99, 132, 0.9)'
                   ],
                   borderWidth: 1,
                   borderColor: '#777',
                   hoverBorderWidth: 3,
                   hoverBorderColor: '#000'

                }]
                },
            options : {
                title: {
                    display: true,
                    text: 'Karnataka Big Cities Population as of 2011',
                    fontSize: 25
                },
                legend:{
                    display: true,
                    position: 'right',
                    labels: {
                        fontColor: '#000'
                    }
                },
                layout: {
                    padding: {
                        left: 50,
                        right: 0,
                        bottom: 0,
                        top: 0
                    }
                },
                tooltips: {
                    enabled: true
                }
            }
        });
    </script>
</body>
</html>