# Filled holes in data (Chartist example)

> Series with missing values, bridged by a cardinal spline that fills the holes.

`src/main.ts`:

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

lineChart(
  '#chart',
  {
    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
    series: [
      [5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9],
      [
        10,
        15,
        null,
        12,
        null,
        10,
        12,
        15,
        null,
        null,
        12,
        null,
        14,
        null,
        null,
        null
      ],
      [null, null, null, null, 3, 4, 1, 3, 4, 6, 7, 9, 5, null, null, null],
      [
        { x: 3, y: 3 },
        { x: 4, y: 3 },
        { x: 5, y: undefined },
        { x: 6, y: 4 },
        { x: 7, y: null },
        { x: 8, y: 4 },
        { x: 9, y: 4 }
      ]
    ]
  },
  {
    fullWidth: true,
    chartPadding: {
      right: 10
    },
    lineSmooth: Interpolation.cardinal({
      fillHoles: true
    }),
    low: 0
  }
);
```

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

new LineChart(
  '#chart',
  {
    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
    series: [
      [5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9],
      [
        10,
        15,
        null,
        12,
        null,
        10,
        12,
        15,
        null,
        null,
        12,
        null,
        14,
        null,
        null,
        null
      ],
      [null, null, null, null, 3, 4, 1, 3, 4, 6, 7, 9, 5, null, null, null],
      [
        { x: 3, y: 3 },
        { x: 4, y: 3 },
        { x: 5, y: undefined },
        { x: 6, y: 4 },
        { x: 7, y: null },
        { x: 8, y: 4 },
        { x: 9, y: 4 }
      ]
    ]
  },
  {
    fullWidth: true,
    chartPadding: {
      right: 10
    },
    lineSmooth: Interpolation.cardinal({
      fillHoles: true
    }),
    low: 0
  }
);
```