## Using Plugins

```html
<wa-chart id="chart-plugin" label="Sales with Target" description="A bar chart with a dashed line showing the sales target">
</wa-chart>
<script type="module">
  const chart = document.querySelector('#chart-plugin');
  await customElements.whenDefined('wa-chart');
  await chart.updateComplete;

  // A custom plugin that draws a horizontal target line
  const targetLinePlugin = {
    id: 'targetLine',
    afterDraw(chart) {
      const target = chart.options.plugins.targetLine?.value;
      if (target == null) return;

      const { ctx } = chart;
      const yScale = chart.scales.y;
      const y = yScale.getPixelForValue(target);

      ctx.save();
      ctx.beginPath();
      ctx.setLineDash([6, 4]);
      ctx.lineWidth = 1;
      ctx.strokeStyle = '#228822';
      ctx.moveTo(chart.chartArea.left, y);
      ctx.lineTo(chart.chartArea.right, y);
      ctx.stroke();

      ctx.fillStyle = ctx.strokeStyle;
      ctx.font = '12px sans-serif';
      ctx.textAlign = 'left';
      ctx.fillText(`Target: ${target}`, chart.chartArea.left + 6, y - 8);
      ctx.restore();
    }
  };

  chart.plugins = [targetLinePlugin];
  chart.config = {
    type: 'bar',
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
      datasets: [{
        label: 'Sales',
        data: [42, 58, 35, 71, 63, 80]
      }]
    },
    options: {
      plugins: {
        targetLine: { value: 60 }
      }
    }
  };

  chart.renderChart();
</script>
```