# series

Display multiple series together. Set a name, values, color, and display options for each series. Each series follows the data type of the selected chart.

Canonical: https://chart.syidax.com/docs/options/series/

<a id="definition"></a>

## Definition

| Item | Value |
| --- | --- |
| JavaScript property | `series` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `LineChartSeries[] \| ScatterChartSeries[]` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [LineChartSeries](https://chart.syidax.com/docs/types/LineChartSeries.md) — Type definition
- [ScatterChartSeries](https://chart.syidax.com/docs/types/ScatterChartSeries.md) — Type definition

<a id="example"></a>

## Configuration example

```javascript
// Register sy-line-chart and create the element before configuring it.
chart.series = [
  {
    "name": "Organic",
    "color": "#8263d9",
    "values": [
      24,
      29,
      27,
      38,
      43,
      40,
      52,
      58,
      53,
      68,
      76,
      84
    ]
  },
  {
    "name": "Direct",
    "color": "#239c91",
    "values": [
      15,
      19,
      17,
      24,
      22,
      29,
      32,
      30,
      39,
      42,
      40,
      51
    ]
  },
  {
    "name": "Referral",
    "color": "#e99954",
    "values": [
      8,
      11,
      9,
      15,
      13,
      19,
      17,
      23,
      22,
      28,
      25,
      33
    ]
  }
];
```

- [Line · Complete examples and API](https://chart.syidax.com/docs/components/line.md)

<a id="related"></a>

## Related documentation

A property with the same name may have different types and defaults across charts. When using a direct tag, follow that chart's documentation below.

- [Shared facade and direct tags](https://chart.syidax.com/docs/concepts.md)
- [sy-line-chart](https://chart.syidax.com/docs/components/line.md#property-series)
- [sy-area-chart](https://chart.syidax.com/docs/components/area.md#property-series)
- [sy-column-chart](https://chart.syidax.com/docs/components/column.md#property-series)
- [sy-bar-chart](https://chart.syidax.com/docs/components/bar.md#property-series)
- [sy-scatter-chart](https://chart.syidax.com/docs/components/scatter.md#property-series)
- [sy-marimekko-chart](https://chart.syidax.com/docs/components/marimekko.md#property-series)
- [sy-navigator](https://chart.syidax.com/docs/components/navigator.md#property-series)