# Add peak circles using the draw events (Chartist example)

> A plugin adds a circle at the peak of every bar, sized by its value.

`src/main.ts`:

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

// Adds a circle at the peak of every bar, its radius depending on the value.
const peakCircles: ChartPlugin = {
  name: 'peak-circles',
  install(chart) {
    // A series comes through `compose` after its bars, so we rebuild its
    // children with a circle after each bar.
    chart.on('compose', series => {
      if (series.role !== 'series') {
        return;
      }
      return series.children.reduce((result, child) => {
        const withChild = result.append(child);
        if (child.role !== 'bar') {
          return withChild;
        }
        // The circle sits at the bar peak's coordinates
        const { x2, y2 } = child.attrs;
        return withChild.append(
          node(
            'circle',
            {
              cx: x2,
              cy: y2,
              r: Math.abs(Number(getMultiValue(child.ctx.value))) * 2 + 5
            },
            'ct-slice-pie'
          )
        );
      }, series.empty());
    });
  }
};

// Create a simple bi-polar bar chart
barChart(
  '#chart',
  {
    labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
    series: [[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]]
  },
  {
    plugins: [peakCircles],
    high: 10,
    low: -10,
    axisX: {
      labelInterpolationFnc: (value, index) => (index % 2 === 0 ? value : null)
    }
  }
);
```

`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>
```

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

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

// Create a simple bi-polar bar chart
const chart = new BarChart(
  '#chart',
  {
    labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
    series: [[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]]
  },
  {
    // 1.x draw events come from the compat plugin in v2.
    plugins: [compat],
    high: 10,
    low: -10,
    axisX: {
      labelInterpolationFnc: (value, index) => (index % 2 === 0 ? value : null)
    }
  }
);

// Listen for draw events on the bar chart
chart.on('draw', data => {
  // If this draw event is of type bar we can use the data to create additional content
  if (data.type === 'bar') {
    // We use the group element of the current series to append a simple circle with the bar peek coordinates and a circle radius that is depending on the value
    data.group.append(
      new Svg(
        'circle',
        {
          cx: data.x2,
          cy: data.y2,
          r: Math.abs(Number(getMultiValue(data.value))) * 2 + 5
        },
        'ct-slice-pie'
      )
    );
  }
});
```