Charts

  1. Home
  2. Components
  3. Charts

Line

A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.

<div class="chart">
  <canvas id="performanceChart" class="chart-canvas"></canvas>
</div>

<script>
  Charts.create('#performanceChart', 'line', options, data)
</script>
<script>
  var options = {
    scales: {
      yAxes: [{
        ticks: {
          callback: function(a) {
            if (!(a % 10))
              return "$" + a + "k"
          }
        }
      }]
    },
    tooltips: {
      callbacks: {
        label: function(a, e) {
          var t = e.datasets[a.datasetIndex].label || "",
              o = a.yLabel,
              r = "";
          return 1 < e.datasets.length && (r += '<span class="popover-body-label mr-auto">' + t + "</span>"), r += '<span class="popover-body-value">$' + o + "k</span>"
        }
      }
    }
  }
</script>
<script>
  var data = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    datasets: [{
      label: "Performance",
      data: [0, 10, 5, 15, 10, 20, 15, 25, 20, 30, 25, 40]
    }]
  }
</script>
<!-- Global Settings -->
<script src="assets/js/settings.js"></script>

<!-- Chart.js Library -->
<script src="assets/vendor/Chart.min.js"></script>

<!-- Chart.js Wrapper -->
<script src="assets/js/chartjs.js"></script>

<script>
  Charts.init()
</script>

Area

An area chart or area graph displays graphically quantitative data. It is based on the line chart.

<div class="chart">
  <canvas id="performanceChart" class="chart-canvas"></canvas>
</div>

<script>
  Charts.create('#performanceChart', 'line', options, data)
</script>
<script>
  var options = {
    elements: {
      line: {
        fill: 'start',
        backgroundColor: settings.charts.colors.area
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          callback: function(a) {
            if (!(a % 10))
              return "$" + a + "k"
          }
        }
      }]
    },
    tooltips: {
      callbacks: {
        label: function(a, e) {
          var t = e.datasets[a.datasetIndex].label || "",
              o = a.yLabel,
              r = "";
          return 1 < e.datasets.length && (r += '<span class="popover-body-label mr-auto">' + t + "</span>"), r += '<span class="popover-body-value">$' + o + "k</span>"
        }
      }
    }
  }
</script>
<script>
  var data = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    datasets: [{
      label: "Performance",
      data: [0, 10, 5, 15, 10, 20, 15, 25, 20, 30, 25, 40]
    }]
  }
</script>
<!-- Global Settings -->
<script src="assets/js/settings.js"></script>

<!-- Chart.js Library -->
<script src="assets/vendor/Chart.min.js"></script>

<!-- Chart.js Wrapper -->
<script src="assets/js/chartjs.js"></script>

<script>
  Charts.init()
</script>

Doughnut

Excellent at showing the relational proportions between data.

<div class="chart">
  <canvas id="devicesChart" class="chart-canvas"></canvas>
</div>

<script>
  Charts.create('#devicesChart', 'doughnut', options, data)
</script>
<script>
  var options = {
    tooltips: {
      callbacks: {
        title: function(a, e) {
          return e.labels[a[0].index]
        },
        label: function(a, e) {
          var t = "";
          return t += '<span class="popover-body-value">' + e.datasets[0].data[a.index] + "%</span>"
        }
      }
    }
  }
</script>
<script>
  var data = {
    labels: ["Desktop", "Tablet", "Mobile"],
    datasets: [{
      data: [60, 25, 15],
      backgroundColor: [
        settings.colors.primary[500],
        settings.colors.accent[300],
        settings.colors.accent[100]
      ],
      hoverBorderColor:
        "dark" == settings.charts.colorScheme
          ? settings.colors.gray[800]
          : settings.colors.white
    }]
  }
</script>
<!-- Global Settings -->
<script src="assets/js/settings.js"></script>

<!-- Chart.js Library -->
<script src="assets/vendor/Chart.min.js"></script>

<!-- Chart.js Wrapper -->
<script src="assets/js/chartjs.js"></script>

<script>
  Charts.init()
</script>

Bar

A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.

<div class="chart">
  <canvas id="ordersChart" class="chart-canvas"></canvas>
</div>

<script>
  Charts.create('#ordersChart', 'roundedBar', options, data)
</script>
<script>
  var options = {
    // Rounded Bar
    barRoundness: 1.2,

    // Chart Specific Formatting (Orders)
    scales: {
      yAxes: [{
        ticks: {
          callback: function(a) {
            if (!(a % 10))
              return "$" + a + "k"
          }
        }
      }]
    },
    tooltips: {
      callbacks: {
        label: function(a, e) {
          var t = e.datasets[a.datasetIndex].label || "",
              o = a.yLabel,
              r = "";
          return 1 < e.datasets.length && (r += '<span class="popover-body-label mr-auto">' + t + "</span>"), r += '<span class="popover-body-value">$' + o + "k</span>"
        }
      }
    }
  }
</script>
<script>
  var data = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    datasets: [{
      label: "Sales",
      data: [25, 20, 30, 22, 17, 10, 18, 26, 28, 26, 20, 32]
    }]
  }
</script>
<!-- Global Settings -->
<script src="assets/js/settings.js"></script>

<!-- Chart.js Library -->
<script src="assets/vendor/Chart.min.js"></script>

<!-- Chart.js Wrapper -->
<script src="assets/js/chartjs-rounded-bar.js"></script>
<script src="assets/js/chartjs.js"></script>

<script>
  Charts.init()
</script>

Switch Toggle

Easily toggle an additional set of data with a simple interface based on the dataattributes.

<div class="custom-control custom-checkbox-toggle">
  <input 
    id="chart-switch-toggle"
    type="checkbox"
    class="custom-control-input"
    role="switch"
    data-toggle="chart" 
    data-target="#ordersChart" 
    data-add='{
      "data":{
        "datasets":[{
          "data":[15,10,20,12,7,0,8,16,18,16,10,22],
          "backgroundColor":"#f75c7f",
          "label":"Affiliate"
        }]
      }
    }'
    checked="">
  <label 
    class="custom-control-label" 
    for="chart-switch-toggle">
    <span class="sr-only">Show affiliate</span>
  </label>
</div>

Radar

A radar chart provides a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets.

<div class="chart">
  <canvas id="topicIqChart" class="chart-canvas"></canvas>
</div>

<script>
  Charts.create('#topicIqChart', 'radar', options, data)
</script>
<script>
  var options = {
    elements: {
      point: {
        pointStyle: 'circle',
        radius: 4,
        hoverRadius: 5,
        backgroundColor: settings.colors.white,
        borderColor: settings.colors.primary[500],
        borderWidth: 2
      }
    },
    scale: {
      ticks: {
        display: false,
        beginAtZero: true,
        maxTicksLimit: 4
      },
      gridLines: {
        color: settings.colors.gray[300]
      },
      angleLines: {
        color: settings.colors.gray[300]
      },
      pointLabels: {
        fontSize: 14
      }
    },
    tooltips: {
      callbacks: {
        label: function(a, e) {
          var t = e.datasets[a.datasetIndex].label || "",
              o = a.yLabel,
              r = "";
          return 1 < e.datasets.length && (r += '<span class="popover-body-label mr-auto">' + t + "</span>"), r += '<span class="popover-body-value">' + o + " points</span>"
        }
      }
    }
  }
</script>
<script>
  var data = {
    labels: ["JavaScript", "HTML", "Flinto", "Vue.js", "Sketch", "Priciple", "CSS", "Angular"],
    datasets: [{
      label: "Experience IQ",
      data: [30, 35, 33, 32, 31, 30, 28, 36],
      pointHoverBorderColor: settings.colors.accent[400],
      pointHoverBackgroundColor: settings.colors.white,
      borderJoinStyle: 'bevel',
      lineTension: .1
    }]
  }
</script>
<!-- Global Settings -->
<script src="assets/js/settings.js"></script>

<!-- Chart.js Library -->
<script src="assets/vendor/Chart.min.js"></script>

<!-- Chart.js Wrapper -->
<script src="assets/js/chartjs.js"></script>

<script>
  Charts.init()
</script>

Learn

Join us

Community

TutorioTutorio

Tutorio is an online learning platform that helps anyone achieve their personal and professional goals.

Follow us

English arrow_drop_down

TermsPrivacy policy

Copyright 2019 © All rights Reserved.

TutorioTutorio
Pages
Components