How to create chart using bootstrap ? - GeeksforGeeks

09 Jul, 2021
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 a bar chart, line chart, pie chart, donut chart, 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.
Example 1: We are creating a line chart by using bootstrap and JavaScript. In this example, we have used the chart.js file for creating a 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>    var ctx = document.getElementById("myChart").getContext("2d");    var 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
Example 2: In the following example, we created a donut chart by using bootstrap and JavaScript. In this example also, we have used the chart.js file for creating a donut chart. Doughnut charts are the modified version of Pie Charts with the area of center cut out.
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>      var 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>
Output:
Doughnut chart
Bootstrap-Questions
JavaScript-Questions
Picked
Bootstrap
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
Tailwind CSS vs Bootstrap
How to keep gap between columns using Bootstrap?
Convert a string to an integer in JavaScript
How to calculate the number of days between two dates in javascript?
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
File uploading in React.js