How to create chart using bootstrap ?

Last Updated : 18 Apr, 2023

A chart in Bootstrap is a graphical representation for data visualization, in which the data is represented by symbols. The various types of charts like bar charts, line charts, pie charts, donut charts, etc are created with the help of Bootstrap. In other words, we can say that chart is a type of diagram or graph, that organizes and represents a set of numerical or qualitative data.

Approach 1: In this approach, we will create a line chart with the help of Bootstrap and javascript. in which we have used the chart.js file for creating a chart

Example: In this example, we are creating a line chart. The data is created according to the type of chart. The following chart has the type “line” with 2 different data both for working hours vs free hours.

HTML

<html>
<link rel=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
      type="text/css" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"
        type="text/javascript">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script>
<style>
    .container {
        width: 70%;
        margin: 15px auto;
    }
 
    body {
        text-align: center;
        color: green;
    }
 
    h2 {
        text-align: center;
        font-family: "Verdana", sans-serif;
        font-size: 30px;
    }
</style>
 
<body>
    <div class="container">
        <h2>Line Chart</h2>
        <div>
            <canvas id="myChart"></canvas>
        </div>
    </div>
</body>
 
<script>
    let ctx = document.getElementById("myChart").getContext("2d");
    let myChart = new Chart(ctx, {
        type: "line",
        data: {
            labels: [
                "Monday",
                "Tuesday",
                "Wednesday",
                "Thursday",
                "Friday",
                "Saturday",
                "Sunday",
            ],
            datasets: [
                {
                    label: "work load",
                    data: [2, 9, 3, 17, 6, 3, 7],
                    backgroundColor: "rgba(153,205,1,0.6)",
                },
                {
                    label: "free hours",
                    data: [2, 2, 5, 5, 2, 1, 10],
                    backgroundColor: "rgba(155,153,10,0.6)",
                },
            ],
        },
    });
</script>
</html>

Output:

line chart with working and free hours

Approach 2: In this approach, we will create a donut chart by using Bootstrap and javascript, Doughnut charts are the modified version of Pie Charts with the area of the center cut out.

Example: In this example, we have used the chart.js file for creating a donut chart.

HTML

<html>
<script src=
"https://d3js.org/d3.v4.min.js"></script>
<script src=
"https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js"></script>
<link rel="stylesheet"
      href=
"https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css" />
<link rel=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
      type="text/css" />
 
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
 
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js">
</script>
 
<style>
    body {
        text-align: center;
        color: green;
    }
 
    h2 {
        text-align: center;
        font-family: "Verdana", sans-serif;
        font-size: 40px;
    }
</style>
 
<body>
    <div class="col-xs-12 text-center">
        <h2>Donut Chart</h2>
    </div>
 
    <div id="donut-chart"></div>
 
    <script>
        let chart = bb.generate({
            data: {
                columns: [
                    ["Blue", 2],
                    ["orange", 4],
                    ["green", 3],
                ],
                type: "donut",
                onclick: function (d, i) {
                    console.log("onclick", d, i);
                },
                onover: function (d, i) {
                    console.log("onover", d, i);
                },
                onout: function (d, i) {
                    console.log("onout", d, i);
                },
            },
            donut: {
                title: "70",
            },
            bindto: "#donut-chart",
        });
    </script>
</body>
</html>