Skip to content
Related Articles

Related Articles

Improve Article

How to create chart using bootstrap ?

  • Last Updated : 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=
    type="text/css"
  />
  <script src=
  <script
    src=
    type="text/javascript"
  ></script>
  <script src=
  
  <script src=
  <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=
  <link
    rel="stylesheet"
    href=
  />
  <link
    rel=
    type="text/css"
  />
  
  <script src=
  </script>
  <script src=
  </script>
  
  <script src=
  </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




My Personal Notes arrow_drop_up
Recommended Articles
Page :