# Timeseries (Chartist example)

> Two series of dated values on a fixed scale X axis with six month and day labels.

`src/main.ts`:

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

lineChart(
  '#chart',
  {
    series: [
      {
        name: 'series-1',
        data: [
          { x: new Date(143134652600), y: 53 },
          { x: new Date(143234652600), y: 40 },
          { x: new Date(143340052600), y: 45 },
          { x: new Date(143366652600), y: 40 },
          { x: new Date(143410652600), y: 20 },
          { x: new Date(143508652600), y: 32 },
          { x: new Date(143569652600), y: 18 },
          { x: new Date(143579652600), y: 11 }
        ]
      },
      {
        name: 'series-2',
        data: [
          { x: new Date(143134652600), y: 53 },
          { x: new Date(143234652600), y: 35 },
          { x: new Date(143334652600), y: 30 },
          { x: new Date(143384652600), y: 30 },
          { x: new Date(143568652600), y: 10 }
        ]
      }
    ]
  },
  {
    // Room for the label of the last tick, at the right edge.
    chartPadding: { right: 40 },
    axisX: {
      type: fixedScaleAxis(),
      divisor: 5,
      labelInterpolationFnc: value =>
        new Date(value).toLocaleString(undefined, {
          month: 'short',
          day: 'numeric'
        })
    }
  }
);
```

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

new LineChart(
  '#chart',
  {
    series: [
      {
        name: 'series-1',
        data: [
          { x: new Date(143134652600), y: 53 },
          { x: new Date(143234652600), y: 40 },
          { x: new Date(143340052600), y: 45 },
          { x: new Date(143366652600), y: 40 },
          { x: new Date(143410652600), y: 20 },
          { x: new Date(143508652600), y: 32 },
          { x: new Date(143569652600), y: 18 },
          { x: new Date(143579652600), y: 11 }
        ]
      },
      {
        name: 'series-2',
        data: [
          { x: new Date(143134652600), y: 53 },
          { x: new Date(143234652600), y: 35 },
          { x: new Date(143334652600), y: 30 },
          { x: new Date(143384652600), y: 30 },
          { x: new Date(143568652600), y: 10 }
        ]
      }
    ]
  },
  {
    // Room for the label of the last tick, at the right edge.
    chartPadding: { right: 40 },
    axisX: {
      type: FixedScaleAxis,
      divisor: 5,
      labelInterpolationFnc: value =>
        new Date(value).toLocaleString(undefined, {
          month: 'short',
          day: 'numeric'
        })
    }
  }
);
```