# Two Y axes with different units (Chartist example)

> Temperature as a line and rainfall as an area, each on its own Y axis.

`src/main.ts`:

```ts
import 'chartist/styles.css';
import {
  autoScaleAxis,
  axisGrid,
  axisLabels,
  cartesianAxes,
  chart,
  line,
  stepAxis
} from 'chartist';

const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];

// Two quantities with different units, each on its own Y axis.
chart('#chart', {
  data: {
    labels: months,
    series: [
      { name: 'temperature', data: [2, 4, 9, 14, 18, 22] },
      { name: 'rain', data: [64, 52, 58, 46, 72, 81] }
    ]
  },
  axes: cartesianAxes([
    { id: 'months', side: 'bottom', type: stepAxis() },
    {
      id: 'temperature',
      side: 'left',
      type: autoScaleAxis(),
      labelInterpolationFnc: value => `${value} °C`,
      offset: 60
    },
    {
      id: 'rain',
      side: 'right',
      type: autoScaleAxis(),
      low: 0,
      labelInterpolationFnc: value => `${value} mm`,
      offset: 60
    }
  ]),
  layers: [
    axisGrid({ axes: ['months', 'temperature'] }),
    line({ series: ['temperature'], x: 'months', y: 'temperature' }),
    line({
      series: ['rain'],
      x: 'months',
      y: 'rain',
      showArea: true,
      showPoint: false
    }),
    axisLabels()
  ]
});
```

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