<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<canvas id="chartLine"></canvas>
const ctx = document.getElementById('chartLine');
new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
    datasets: [{
      label: 'Visitors',
      data: [120, 190, 160, 220, 180, 240, 260],
      borderColor: '#3b82f6',
      backgroundColor: 'rgba(59,130,246,0.18)',
      pointBackgroundColor: ['#3b82f6','#10b981','#f59e0b','#ef4444','#8b5cf6','#06b6d4','#a855f7'],
      pointRadius: 3,
      fill: true,
      tension: .35,
      borderWidth: 2
    }]
  },
  options: baseOptions()
});

<canvas id="chartBar"></canvas>
const ctxBar = document.getElementById('chartBar');
new Chart(ctxBar, {
  type: 'bar',
  data: {
    labels: ['Q1','Q2','Q3','Q4'],
    datasets: [{
      label: 'Revenue',
      data: [320, 280, 360, 410],
      backgroundColor: ['#3b82f6','#10b981','#f59e0b','#ef4444'],
      borderColor:   ['#2563eb','#059669','#d97706','#dc2626'],
      borderWidth: 1,
      borderRadius: 8
    }]
  },
  options: baseOptions()
});

<canvas id="chartDoughnut"></canvas>

// Donut with percentages on slices
const ctxDonut = document.getElementById('chartDoughnut');
const donutLabels = ['Team A','Team B','Team C',];
const donutData = [24.3, 54, 22.7];

// custom plugin to draw percentage labels
const donutPctPlugin = {
  id: 'donutPctPlugin',
  afterDatasetDraw(chart, args) {
    if (args.meta.type !== 'arc') return;
    const {ctx} = chart;
    const ds = chart.data.datasets[args.index];
    const total = ds.data.reduce((a,b)=>a + b, 0);
    args.meta.data.forEach((arc, i) => {
      const v = ds.data[i];
      const p = arc.getProps(['startAngle','endAngle','innerRadius','outerRadius','x','y'], true);
      const angle = (p.startAngle + p.endAngle) / 2;
      const r = (p.innerRadius + p.outerRadius) / 2;
      const x = p.x + Math.cos(angle) * r;
      const y = p.y + Math.sin(angle) * r;
      const pct = Math.round(v/total*1000)/10; // 1 decimal
      if (pct < 3) return; // skip very small slices
      ctx.save();
      ctx.fillStyle = '#ffffff';
      ctx.font = '600 11px Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(pct + '%', x, y);
      ctx.restore();
    });
  }
};

new Chart(ctxDonut, {
  type: 'doughnut',
  data: {
    labels: donutLabels,
    datasets: [{
      data: donutData,
      backgroundColor: [
        '#3b82f6',
        '#10b981',
        '#f59e0b'
      ],
      borderColor: getVar('--card-bg') || '#ffffff',
      borderWidth: 2,
      hoverOffset: 4
    }]
  },
  options: { 
    ...baseOptions(),
    cutout: '65%',
    plugins: { legend: { position: 'bottom' } }
  },
  plugins: [donutPctPlugin]
});

<canvas id="chartArea"></canvas>
const ctxArea = document.getElementById('chartArea');
new Chart(ctxArea, {
  data: {
    labels: ['Jan','Feb','Mar','Apr','May','Jun'],
    datasets: [
      {
        type: 'line',
        label: 'Sessions',
        data: [30, 45, 40, 60, 55, 72],
        borderColor: '#22c55e',
        backgroundColor: 'rgba(34,197,94,0.18)',
        fill: true,
        tension: .35,
        borderWidth: 2
      },
      {
        type: 'line',
        label: 'Points',
        data: [28, 42, 38, 58, 52, 68],
        borderColor: '#8b5cf6',
        pointBackgroundColor: '#8b5cf6',
        pointRadius: 3,
        borderWidth: 2,
        fill: false,
        tension: 0
      }
    ]
  },
  options: baseOptions()
});