Splash of color

Chart.js provides many options that can help you customize your charts with scales, tooltips, labels, colors, custom actions, and much more. See the Chart.js documentation (opens new window) and samples (opens new window) for more details.

const config = { type: 'line', data: { datasets: [ { label: 'Dataset 1', backgroundColor: 'rgba(255, 99, 132, 0.5)', borderColor: 'rgb(255, 99, 132)', borderDash: [8, 4], fill: true, data: [] }, { label: 'Dataset 2', backgroundColor: 'rgba(54, 162, 235, 0.5)', borderColor: 'rgb(54, 162, 235)', cubicInterpolationMode: 'monotone', fill: true, data: [] } ] }, options: { scales: { x: { type: 'realtime', realtime: { delay: 2000, onRefresh: chart => { chart.data.datasets.forEach(dataset => { dataset.data.push({ x: Date.now(), y: Math.random() }); }); } } } } } };

const config = {
  type: 'line',
  data: {
    datasets: [
      {
        label: 'Dataset 1',
        backgroundColor: 'rgba(255, 99, 132, 0.5)',
        borderColor: 'rgb(255, 99, 132)',
        borderDash: [8, 4],
        fill: true,
        data: []
      },
      {
        label: 'Dataset 2',
        backgroundColor: 'rgba(54, 162, 235, 0.5)',
        borderColor: 'rgb(54, 162, 235)',
        cubicInterpolationMode: 'monotone',
        fill: true,
        data: []
      }
    ]
  },
  options: {
    scales: {
      x: {
        type: 'realtime',
        realtime: {
          delay: 2000,
          onRefresh: chart => {
            chart.data.datasets.forEach(dataset => {
              dataset.data.push({
                x: Date.now(),
                y: Math.random()
              });
            });
          }
        }
      }
    }
  }
};

...and you're done!

See also GitHub repository (opens new window) and samples.