# Canvas Area Chart: applying a gradient to a series

**URL:** <https://discuss.elastic.co/t/canvas-area-chart-applying-a-gradient-to-a-series/163594>\
**Category:** Kibana\
**Tags:** canvas\
**Created:** [January 9, 2019, 5:21pm UTC](https://discuss.elastic.co/t/canvas-area-chart-applying-a-gradient-to-a-series/163594 "2019-01-09T17:21:13Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![rozling](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rozling/32/16401_2.png) [@rozling](https://discuss.elastic.co/u/rozling)\
**Post date:** [January 9, 2019, 5:21pm UTC](https://discuss.elastic.co/t/canvas-area-chart-applying-a-gradient-to-a-series/163594/1 "2019-01-09T17:21:13Z")

</div>

I'm trying to create a Canvas dashboard plotting metricbeat CPU stats, and I'm using an area chart for this:

 ![06](https://us1.discourse-cdn.com/elastic/original/3X/5/b/5b2e4e885661bfdae2758df9b8b058a26ff35eeb.png)

I'd like the colour of the series to change as it goes up the Y axis from green at the bottom to red at the top (or eventually some other weighted palette).

However although I have set gradient=true it doesn't seem to affect the plot. Here's the code:

```
filters
| essql 
  query="SELECT \"system.cpu.total.pct\" * 100 AS cpu, \"@timestamp\", \"service_name\" FROM \"metricbeat-6.4.3-2019.01.09*\" WHERE \"metricset.name\"='cpu' ORDER BY \"@timestamp\" DESC"
| pointseries x="@timestamp" y="mean(cpu)"
| plot defaultStyle={seriesStyle bars=0 lines=1 points=0 fill=1} palette={palette "#D3FB71" "#7ECAE3" "#f03b20" gradient=true}
| render

```

and the SQL query for the data source:  
SELECT "system.cpu.total.pct" \* 100 AS cpu, "@timestamp", "service\_name" FROM "metricbeat-6.4.3-2019.01.09\*" WHERE "metricset.name"='cpu' ORDER BY "@timestamp" DESC

edit: applied the correct gradient

---

<div class="post-metadata">

**Author:** ![Aaron\_Caldwell](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron_caldwell/32/45755_2.png) [@Aaron\_Caldwell](https://discuss.elastic.co/u/Aaron_Caldwell)\
**Post date:** [January 9, 2019, 7:07pm UTC](https://discuss.elastic.co/t/canvas-area-chart-applying-a-gradient-to-a-series/163594/2 "2019-01-09T19:07:14Z")

</div>

Hello,

I've checked with the canvas team on this. Referencing the y values directly for gradient change is not currently supported and there are no plans to support it in the near-term. A team member had the following to say:

> ...each line plot only supports one color for that line and the gradient would only apply if you had multiple lines in your plot

Having said that, you could definitely file an enhancement request in [our github repo](https://github.com/elastic/kibana/issues/new?template=Feature_request.md).

Thanks,  
Aaron

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [February 6, 2019, 7:14pm UTC](https://discuss.elastic.co/t/canvas-area-chart-applying-a-gradient-to-a-series/163594/3 "2019-02-06T19:14:07Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.