# Labeled points with a unit (Chartist example)

> Temperatures in two cities, each point labeled in degrees and in its series' color.

`src/main.ts`:

```ts
import 'chartist/styles.css';
import '@chartist-js/essentials/styles.css';
import './style.css';
import { lineChart } from 'chartist';
import { valueLabels } from '@chartist-js/essentials';

// Temperatures in two cities, each labeled in its series' color.
lineChart(
  '#chart',
  {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    series: [
      { name: 'Basel', data: [18, 21, 19, 24, 22] },
      { name: 'Chur', data: [11, 13, 15, 14, 17] }
    ]
  },
  {
    low: 5,
    high: 30,
    layers: {
      above: [valueLabels({ format: item => `${String(item.value)} °C` })]
    }
  }
);
```

`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
/* Each label in its series' color, set by its ct-series-* class. */
.ct-value-label {
  --ct-value-label-color: var(--ct-color);
}
```