Simple Line Chart

An example of a simple line chart with three series.

Source Code

new Chart(document.getElementById('chartLine2'), {
  type: 'line',
  data: {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    datasets: [
      { data: [12, 9, 7, 8, 5], borderColor: '#d70206', fill: false },
      { data: [2, 1, 5, 7, 3], borderColor: '#f05b4f', fill: false },
      { data: [1, 3, 4, 5, 6], borderColor: '#f4c63d', fill: false }
    ]
  },
  options: {
    scales: { y: { beginAtZero: true, max: 30, ticks: { stepSize: 1 } } }
  }
});

Line Area Chart

This chart uses the showArea option to draw line, dots but also an area shape. Use the low option to specify a fixed lower bound that will make the area expand. You can also use the areaBase property to specify a data value that will be used to determine the area shape base position (this is 0 by default).

Source Code

datasets: [{
  data: [5, 9, 7, 8, 5, 3, 5, 4],
  fill: true, // this makes it an area chart
  backgroundColor: 'rgba(215,2,6,.2)'
}]

Bar Chart

A bi-polar bar chart with a range limit set with low and high. There is also an interpolation function used to skip every odd grid line / label.

Source Code

new Chart(document.getElementById('chartBar1'), {
  type: 'bar',
  data: data,
  options: options
});

Horizontal Bar Chart

Guess what! Creating horizontal bar charts is as simple as it can get. There's no new chart type you need to learn, just passing an additional option is enough.

Source Code

indexAxis: 'y' // this makes it horizontal

Stacked Bar Chart

You can also set your bar chart to stack the series bars on top of each other easily by using the stackBars property in your configuration.

Source Code

scales: {
  y: { stacked: true },
  x: { stacked: true }
}

Pie Chart

A very simple pie chart with label interpolation to show percentage instead of the actual data series value.

Source Code

new Chart(document.getElementById('chartPie1'), {
  type: 'pie',
  data: { datasets: [{ data: [5, 3, 4], backgroundColor: pieColors }] },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          // shows percentage instead of the raw series value
          label: (ctx) => Math.round(ctx.parsed / total * 100) + '%'
        }
      }
    }
  }
});

Donut Chart

This pie chart uses donut, startAngle and total to draw a gauge chart.

Source Code

new Chart(document.getElementById('chartDonut1'), {
  type: 'doughnut',
  data: { datasets: [{ data: [20, 10, 30], backgroundColor: pieColors }] },
  options: {
    rotation: -90, // startAngle equivalent
    cutout: '60%'  // donutWidth equivalent
  }
});