# Create function to plot FGI line with color from range of value

**URL:** <https://talk.observablehq.com/t/create-function-to-plot-fgi-line-with-color-from-range-of-value/6726>\
**Category:** Help\
**Created:** [June 21, 2022, 7:24pm UTC](https://talk.observablehq.com/t/create-function-to-plot-fgi-line-with-color-from-range-of-value/6726 "2022-06-21T19:24:49Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![lamsonbros](https://avatars.discourse-cdn.com/v4/letter/l/bbe5ce/32.png) [@lamsonbros](https://talk.observablehq.com/u/lamsonbros)\
**Post date:** [June 21, 2022, 7:24pm UTC](https://talk.observablehq.com/t/create-function-to-plot-fgi-line-with-color-from-range-of-value/6726/1 "2022-06-21T19:24:49Z")

</div>

Dear Community,  
I having trouble with an observable assignment right now on how to use plot function and stroke correctly  
Here is my observable notebook:

> **[Worksheet: Technical Analysis Dashboard (Assignment)](https://observablehq.com/@ab1942efd94a5c08/worksheet-technical-analysis-dashboard-assignment)**
>
> Disclaimer: The visualizations in this notebook are produced solely for educational purposes. The author makes absolutely no claims about the accuracy of the calculations and cannot be held responsible for any financial loss that may occur due to the...

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/4/4dd540cba9b624cb11d4adecd47418fe1dcd91d2.jpeg)

I need to replicate this image, by far I have finished 80% of the work, however, one of the difficult things is that I need to create a stroke function to replicate the ▴fearGreedIndex data in the notebook above using plot.  
I was stuck on how to properly use this line of code to create an FGI line that uses color to the range of the ▴fearGreedIndex.  
Plot.ruleX(data\_final, {  
x: “date”,  
fill: “red”,  
stroke: “blue”,  
strokeWidth: 3  
}),

---

<div class="post-metadata">

**Author:** ![enjalot](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/enjalot/32/5248_2.png) [@enjalot](https://talk.observablehq.com/u/enjalot)\
**Post date:** [June 21, 2022, 9:23pm UTC](https://talk.observablehq.com/t/create-function-to-plot-fgi-line-with-color-from-range-of-value/6726/2 "2022-06-21T21:23:07Z")

</div>

Hello, welcome to the forum!

An important concept in Plot is that there is only one color scale for the whole plot. So you’ll want to configure that scale to use the appropriate scheme, see more here:

> **[Plot Cheatsheets - Colors](https://observablehq.com/@observablehq/plot-cheatsheets-colors)**
>
> Set the colors of your marks Overview When you assign a mark's \`fill\` or \`stroke\` channel, Plot will apply a set of default colors depending on the data type. For categorical data, Plot will use the \`Tableau10\` color scheme, which consists of these...

> **[GitHub - observablehq/plot: A concise API for exploratory data visualization](https://github.com/observablehq/plot#color-options)**
>
> A concise API for exploratory data visualization. Contribute to observablehq/plot development by creating an account on GitHub.

You’ll also want to make sure the ruleX that is drawing those fearGreedIndex marks is mapping the fearGreedIndex to the stroke channel. You’ll also want to make sure other marks are not mapping data values to a stroke or fill channel (they should be hardcoding the colors, like the area chart is).  
You can see an example here:

> **[Rule Mark / Observable Plot](https://observablehq.com/@observablehq/plot-rule?collection=@observablehq%2Fplot#cell-225)**
>
> Rules are horizontal or vertical lines. A ruleY↔︎ has a y-value, while a ruleX↕︎ has an x-value. Rules are often used as annotations, say to mark the y = 0 baseline (in red below for emphasis) in a line chart. As annotations, rules often have...