Bootstrap Snippet Pie Chart using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
<div class="col-md-5 my-5 mx-auto">
    <div class="card text-center shadow">
        <div class="card-header text-left"><b>Chart.js</b> - Pie Chart with Legends</div>
        <div class="card-body">
            <div class="chart">
                <canvas id="property_types" class="pie"></canvas>
                <div id="pie_legend" class="py-3 text-left col-md-7 mx-auto"></div>
            </div>
        </div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.chart{
    height:500px;
    width:500px;
}
.pie-legend {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pie-legend span {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 100%;
    margin-right: 16px;
    margin-bottom: -2px;
}
.pie-legend li {
    margin-bottom: 10px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    // global options variable
    var options = {
        responsive: true,
        easing:'easeInExpo',
        scaleBeginAtZero: true,
        // you don't have to define this here, it exists inside the global defaults
        legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
    }
        // PIE
        // PROPERTY TYPE DISTRIBUTION
        // context
        var ctxPTD = $("#property_types").get(0).getContext("2d");
        // data
        var dataPTD = [
            {
                label: "Single Family Residence",
                color: "#5093ce",
                highlight: "#78acd9",
                value: 52
            },
            {
                label: "Townhouse/Condo",
                color: "#c7ccd1",
                highlight: "#e3e6e8",
                value: 12
            },
            {
                label: "Land",
                color: "#7fc77f",
                highlight: "#a3d7a3",
                value: 6
            },
            {
                label: "Multifamily",
                color: "#fab657",
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Pie Chart"
Bootstrap 4.1.1 Snippet by abhijeetka

Related: See More

Questions / Comments:

"Pie Chart" Bootstrap 4.1.1 Snippet by abhijeetka

Related: See More

Questions / Comments:

"Pie Chart"
Bootstrap 4.1.1 Snippet by abhijeetka