# Fixed and auto scale axis (Chartist example)

> A step line on an auto scale x axis and a fixed y axis with hand-picked ticks.

`src/main.ts`:

```ts
import 'chartist/styles.css';
import {
  lineChart,
  autoScaleAxis,
  fixedScaleAxis,
  Interpolation
} from 'chartist';

lineChart(
  '#chart',
  {
    series: [
      [
        { x: 1, y: 100 },
        { x: 2, y: 50 },
        { x: 3, y: 25 },
        { x: 5, y: 12.5 },
        { x: 8, y: 6.25 }
      ]
    ]
  },
  {
    axisX: {
      type: autoScaleAxis(),
      onlyInteger: true
    },
    axisY: {
      type: fixedScaleAxis(),
      ticks: [0, 50, 75, 87.5, 100],
      low: 0
    },
    lineSmooth: Interpolation.step(),
    showPoint: false
  }
);
```

`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 {
  LineChart,
  AutoScaleAxis,
  FixedScaleAxis,
  Interpolation
} from 'chartist';

new LineChart(
  '#chart',
  {
    series: [
      [
        { x: 1, y: 100 },
        { x: 2, y: 50 },
        { x: 3, y: 25 },
        { x: 5, y: 12.5 },
        { x: 8, y: 6.25 }
      ]
    ]
  },
  {
    axisX: {
      type: AutoScaleAxis,
      onlyInteger: true
    },
    axisY: {
      type: FixedScaleAxis,
      ticks: [0, 50, 75, 87.5, 100],
      low: 0
    },
    lineSmooth: Interpolation.step(),
    showPoint: false
  }
);
```