# Adding a second series
:::info
**This page is part of an iterative guide (where we build onto code from the previous steps).**
It is recommend that you follow the guide from the [start](https://tradingview.github.io/lightweight-charts/tutorials/customization/intro.md). However, if you are only interested in the content on this page then take a look at the [full code](#complete-code) at the bottom of page for context of how this code fits into a working example.
:::
In this section, we will be adding an [area series](https://tradingview.github.io/lightweight-charts/docs/series-types.md#area) to the chart with a subtle vertical gradient. It's purpose is solely for aesthetic reasons (only to make the chart more visually appealing). However, it will teach us a few key points about the differences between different series types and the visual stacking order.
## Preparing the data for the area series
The data structure required for the area series isn't the same as for the candlestick series. The area series is expecting each data point to have the following properties: `time` and `value`. Whereas the candlestick data points don't have a `value` property but rather the following properties: `open`, `close`, `high`, `low`, and `time`.
We can create a copy of the candlestick data and transform it in a single step by using a `map` higher-order function ([more info](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)). We will set the `value` for the area series as the midpoint between the `open` and `close` values of the candlestick data points.
```js
// Generate sample data to use within a candlestick series
const candleStickData = generateCandlestickData();
// Convert the candlestick data for use with a line series
const lineData = candleStickData.map(datapoint => ({
time: datapoint.time,
value: (datapoint.close + datapoint.open) / 2,
}));
```
## Adding the area series and setting it's options
We can add the area series as we did with the candlestick series by calling the `addSeries(AreaSeries)` method on the chart instance. We will pass the options for the series as the second argument to `addSeries()` method instead of separately calling `applyOptions()` at a later stage.
:::caution
Make sure to add this code **before** the `addSeries(CandlestickSeries)` call already in the code because we want it to appear below the candlesticks (as explained in the next section).
:::
```js
// Convert the candlestick data for use with a line series
const lineData = candleStickData.map(datapoint => ({
time: datapoint.time,
value: (datapoint.close + datapoint.open) / 2,
}));
// Add an area series to the chart,
// Adding this before we add the candlestick chart
// so that it will appear beneath the candlesticks
const areaSeries = chart.addSeries(AreaSeries, {
lastValueVisible: false, // hide the last value marker for this series
crosshairMarkerVisible: false, // hide the crosshair marker for this series
lineColor: 'transparent', // hide the line
topColor: 'rgba(56, 33, 110,0.6)',
bottomColor: 'rgba(56, 33, 110, 0.1)',
});
// Set the data for the Area Series
areaSeries.setData(lineData);
// Create the Main Series (Candlesticks)
const mainSeries = chart.addSeries(CandlestickSeries);
```
## Visual stacking order of series
When adding multiple series to a single chart, it is important to take note of the order in which they are added because that will determine the visual stacking order (when they overlap). The first series added will appear at the bottom of the stack and each series added will be placed on top of the stack. Thus in the current example, we want the area series to appear below the candlestick series so we will make sure to first add the area series and then the candlestick series.
## Result
At this point we should have a chart like this:
[Interactive example](https://tradingview.github.io/lightweight-charts/284024c6e6f4b0f4427af4f26844eba5.html)
## Next steps
In the next step, we will look at how to adjust the colour of individual candlesticks on our chart.
## Download
You can download the HTML file for example at this stage in case you've encountered a problem or would like to start the next step from this point.
## Complete code
**Click here to reveal the complete code for the example at this stage of the guide.**
```html
Lightweight Charts™ Customization Tutorial
```
---
## Sitemap
- [All documentation pages](https://tradingview.github.io/lightweight-charts/llms.txt)
- [Full page map with headings](https://tradingview.github.io/lightweight-charts/docs_map.md)