On this page

Charts Acquia Design System only Plugin

Create beautiful charts with a simple, but powerful and flexible JavaScript Chart.js plugin. Please read the official documentation for a full list of options.

On this page

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 class="chart-canvas" id="overviewChart"></canvas>
</div>

<script>
  new Chart('overviewChart', {
    type: 'line',
    options: {
      scales: {
        yAxes: [{
          ticks: {
            callback: function(value) {
              return '$' + value + 'k';
            }
          }
        }]
      }
    },
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      datasets: [{
        label: 'Earned',
        data: [0, 10, 5, 15, 10, 20, 15, 25, 20, 30, 25, 40]
      }]
    }
  });
</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 class="chart-canvas" id="feedChart"></canvas>
</div>

<script>
  new Chart('feedChart', {
    type: 'bar',
    options: {
      scales: {
        yAxes: [{
          ticks: {
            callback: function(value) {
              return '$' + value + 'k';
            }
          }
        }]
      }
    },
    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>

Doughnut

Excellent at showing the relational proportions between data.

<div class="chart chart-appended">
  <canvas class="chart-canvas" id="trafficChart" data-bs-toggle="legend" data-target="#trafficChartLegend"></canvas>
</div>

<div class="chart-legend" id="trafficChartLegend"></div>

<script>
  new Chart('trafficChart', {
    type: 'doughnut',
    options: {
      tooltips: {
        callbacks: {
          afterLabel: function() {
            return '%'
          }
        }
      }
    },
    data: {
      labels: ['Direct', 'Organic', 'Referral'],
      datasets: [{
        data: [60, 25, 15],
        backgroundColor: ['#2C7BE5', '#A6C5F7', '#D2DDEC']
      }]
    }
  });
</script>