# Target lines on a bar chart (Chartist example)

> Monthly sales against a goal and a minimum, added to the bar chart preset as extra layers.

`src/main.ts`:

```ts
import 'chartist/styles.css';
import { barChart, targetLine } from 'chartist';

// Monthly sales against a goal and a minimum, on the bar chart preset.
barChart(
  '#chart',
  {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    series: [[820, 950, 1100, 760, 1240, 780]]
  },
  {
    low: 0,
    // One layer per line.
    layers: {
      above: [
        targetLine({ value: 1000, label: 'Goal' }),
        targetLine({ value: 800, label: 'Minimum', className: 'ct-series-b' })
      ]
    }
  }
);
```

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