# Using events to replace graphics (Chartist example)

> A plugin swaps every point for a triangle while the chart is composed.

`src/main.ts`:

```ts
import 'chartist/styles.css';
import './style.css';
import { lineChart, node, type ChartPlugin } from 'chartist';

// Replaces every point with a triangle around the point's coordinates.
const triangles: ChartPlugin = {
  name: 'triangles',
  install(chart) {
    // Every element passes through `compose`; returning a node replaces it.
    chart.on('compose', element => {
      if (element.role !== 'point') {
        return;
      }
      const { x, y } = element.ctx;
      // Its color comes from CSS (style.css), like every other element.
      return node(
        'path',
        { d: `M ${x} ${y - 15} L ${x - 15} ${y + 8} L ${x + 15} ${y + 8} z` },
        'ct-triangle'
      );
    });
  }
};

lineChart(
  '#chart',
  {
    labels: [1, 2, 3, 4, 5],
    series: [[12, 9, 7, 8, 5]]
  },
  { plugins: [triangles] }
);
```

`index.html`:

```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="module" src="/src/main.ts"></script>
  </head>
  <body>
    <div id="chart" style="height: 50vh"></div>
  </body>
</html>
```

`src/style.css`:

```css
/* The triangles take their series color, like lines and points. */
.ct-triangle {
  fill: var(--ct-color);
}
```

The same chart with the 1.x classes (`src/main.classic.ts`):

```ts
import 'chartist/styles.css';
import { LineChart, Svg } from 'chartist';
import { compat } from 'chartist/compat';

const chart = new LineChart(
  '#chart',
  {
    labels: [1, 2, 3, 4, 5],
    series: [[12, 9, 7, 8, 5]]
  },
  // 1.x draw events come from the compat plugin in v2.
  { plugins: [compat] }
);

// Listening for draw events that get emitted by the Chartist chart
chart.on('draw', data => {
  // If the draw event was triggered from drawing a point on the line chart
  if (data.type === 'point') {
    // We are creating a new path SVG element that draws a triangle around the point coordinates
    const triangle = new Svg(
      'path',
      {
        d: [
          'M',
          data.x,
          data.y - 15,
          'L',
          data.x - 15,
          data.y + 8,
          'L',
          data.x + 15,
          data.y + 8,
          'z'
        ].join(' '),
        style: 'fill-opacity: 1'
      },
      'ct-area'
    );

    // With data.element we get the Chartist SVG wrapper and we can replace the original point drawn by Chartist with our newly created triangle
    data.element.replace(triangle);
  }
});
```