# Series Overrides (Chartist example)

> Three named series, each with its own interpolation, area or points.

`src/main.ts`:

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

lineChart(
  '#chart',
  {
    labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
    // Naming the series with the series object array notation
    series: [
      {
        name: 'series-1',
        data: [5, 2, -4, 2, 0, -2, 5, -3]
      },
      {
        name: 'series-2',
        data: [4, 3, 5, 3, 1, 3, 6, 4]
      },
      {
        name: 'series-3',
        data: [2, 4, 3, 1, 4, 5, 3, 2]
      }
    ]
  },
  {
    fullWidth: true,
    // Within the series options you can use the series names
    // to specify configuration that will only be used for the
    // specific series.
    series: {
      'series-1': {
        lineSmooth: Interpolation.step()
      },
      'series-2': {
        lineSmooth: Interpolation.simple(),
        showArea: true
      },
      'series-3': {
        showPoint: false
      }
    }
  },
  [
    // You can even use responsive configuration overrides to
    // customize your series configuration even further!
    [
      'screen and (max-width: 320px)',
      {
        series: {
          'series-1': {
            lineSmooth: Interpolation.none()
          },
          'series-2': {
            lineSmooth: Interpolation.none(),
            showArea: false
          },
          'series-3': {
            lineSmooth: Interpolation.none(),
            showPoint: true
          }
        }
      }
    ]
  ]
);
```

`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'],
    // Naming the series with the series object array notation
    series: [
      {
        name: 'series-1',
        data: [5, 2, -4, 2, 0, -2, 5, -3]
      },
      {
        name: 'series-2',
        data: [4, 3, 5, 3, 1, 3, 6, 4]
      },
      {
        name: 'series-3',
        data: [2, 4, 3, 1, 4, 5, 3, 2]
      }
    ]
  },
  {
    fullWidth: true,
    // Within the series options you can use the series names
    // to specify configuration that will only be used for the
    // specific series.
    series: {
      'series-1': {
        lineSmooth: Interpolation.step()
      },
      'series-2': {
        lineSmooth: Interpolation.simple(),
        showArea: true
      },
      'series-3': {
        showPoint: false
      }
    }
  },
  [
    // You can even use responsive configuration overrides to
    // customize your series configuration even further!
    [
      'screen and (max-width: 320px)',
      {
        series: {
          'series-1': {
            lineSmooth: Interpolation.none()
          },
          'series-2': {
            lineSmooth: Interpolation.none(),
            showArea: false
          },
          'series-3': {
            lineSmooth: Interpolation.none(),
            showPoint: true
          }
        }
      }
    ]
  ]
);
```