# Data points
:::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 modify the candlestick data such that we can individually set the color for each candlestick.
If we take a look at the interface for the candlestick data here: [CandlestickData](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickData), we can see a few properties related to color: `color`, `borderColor`, and `wickColor`. Lightweight Charts™ allows the data points to override the colors specified for series as a whole. In other words, if a datapoint has one of these properties set then it will use that color for that data point instead of the colors used for the rest of the series. We can use this feature to highlight a few key data points in a different color.
We are going to change the color of all data points which have a `close` value over `205` to orange. We will use the map higher-order function to go through each data point and either leave it alone if it is below `205` or otherwise add the `color` and `wickColor` properties (set to 'orange'). We don't need to set the `borderColor` because we disabled that in an earlier step.
We are going to **replace** the following line of code:
```js
const candleStickData = generateCandlestickData();
```
with this block of code:
```js
// Generate sample data to use within a candlestick series
const candleStickData = generateCandlestickData().map(datapoint => {
// map function is changing the color for the individual
// candlestick points that close above 205
if (datapoint.close < 205) { return datapoint; }
// we are adding 'color' and 'wickColor' properties to the datapoint.
// Using spread syntax: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals
return { ...datapoint, color: 'orange', wickColor: 'orange' };
});
```
## Result
At this point we should have a chart like this (with a few candlesticks in orange):
[Interactive example](https://tradingview.github.io/lightweight-charts/fe0204bb12a60725b54dd4aa834e4cad.html)
## Next steps
In the next step, we will add a few finishing touches to the 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)