Line Chart

An example of a simple line chart with one series.

HTML Code

<div class="wd-200 ht-70"><canvas id="sparkline1"></canvas></div>

Javascript Code

new Chart(document.getElementById('sparkline1'), {
  type: 'line',
  data: {
    labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
    datasets: [{
      data: [1, 4, 4, 7, 5, 9, 10, 1, 4, 4, 7, 5, 9, 10],
      borderColor: '#0083CD',
      fill: false
    }]
  },
  options: {
    plugins: { legend: { display: false }, tooltip: { enabled: false } },
    scales: { y: { display: false }, x: { display: false } },
    elements: { point: { radius: 0 } }
  }
});

Area Chart

An example of a simple line chart with one series.

Option Code

borderColor: '#0083CD',
backgroundColor: 'rgba(0,131,205,0.2)',
fill: true

Bar Chart

An example of a simple bar chart with one series.

Source Code

new Chart(document.getElementById('sparkline5'), {
  type: 'bar',
  data: {
    labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
    datasets: [{
      data: [3, 4, 4, 7, 5, 9, 10, 6, 4, 4, 7, 5, 9, 10],
      backgroundColor: '#0083CD'
    }]
  },
  options: {
    plugins: { legend: { display: false }, tooltip: { enabled: false } },
    scales: { y: { display: false, max: 12 }, x: { display: false } }
  }
});

Stacked Bar Chart

An example of a stacked bar chart with two series.

Source Code

new Chart(document.getElementById('sparkline7'), {
  type: 'bar',
  data: {
    labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
    datasets: [
      { data: [7,8,10,7,5,9,10,6,9,4,7,5,9,10,8], backgroundColor: '#0083CD' },
      { data: [4,5,6,7,4,5,8,7,6,6,4,7,6,4,7], backgroundColor: '#11546F' }
    ]
  },
  options: {
    plugins: { legend: { display: false }, tooltip: { enabled: false } },
    scales: {
      y: { display: false, stacked: true },
      x: { display: false, stacked: true }
    }
  }
});

Pie Chart

An example of a pie chart with two series.

Source Code

new Chart(document.getElementById('sparkline9'), {
  type: 'pie',
  data: {
    datasets: [{
      data: [7, 8, 10],
      backgroundColor: ['#F4C62B', '#F6931E', '#8CC63E']
    }]
  },
  options: {
    plugins: { legend: { display: false }, tooltip: { enabled: false } }
  }
});