Options Configuration

Code

const chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar'],
    datasets: [{ label: 'Sales', data: [30, 50, 45] }]
  },
  options: {
    responsive: true,
    interaction: { mode: 'index', intersect: false },
    plugins: {
      title: { display: true, text: 'Sales Report', font: { size: 18 } },
      legend: { position: 'top', labels: { boxWidth: 12 } }
    },
    scales: {
      x: { grid: { display: false } },
      y: {
        beginAtZero: true,
        ticks: { callback: v => '$' + v },
        grid: { color: 'rgba(0,0,0,0.05)' }
      }
    },
    animation: { duration: 1000, easing: 'easeInOutQuart' }
  }
});

// Live update: push new data and re-render
chart.data.labels.push('Apr');
chart.data.datasets[0].data.push(60);
chart.update();
// chart.update('none'); // skip animation
// chart.reset(); // clear animation state

Explanation

options is the central configuration object covering plugins (title, legend), scales (axis formatting via ticks.callback), interaction modes, and animation. interaction.mode='index' shows all dataset values at a hovered x position. Use chart.update() to apply live data changes; pass 'none' to skip the redraw animation.

More Chart.js Snippets