# Wrong sorting of colours in bar chart

**URL:** <https://discuss.elastic.co/t/wrong-sorting-of-colours-in-bar-chart/300955>\
**Category:** Kibana\
**Tags:** canvas\
**Created:** [March 29, 2022, 11:42am UTC](https://discuss.elastic.co/t/wrong-sorting-of-colours-in-bar-chart/300955 "2022-03-29T11:42:33Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![JeroenK](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jeroenk/32/103640_2.png) [@JeroenK](https://discuss.elastic.co/u/JeroenK)\
**Post date:** [March 29, 2022, 11:42am UTC](https://discuss.elastic.co/t/wrong-sorting-of-colours-in-bar-chart/300955/1 "2022-03-29T11:42:33Z")

</div>

I have a bar chart in Canvas for which I want to give each bar a separate colour in a gradient sorted in the same way the bar chart is sorted, example:

 ![canvas-example-chart](https://us1.discourse-cdn.com/elastic/original/3X/4/d/4da6f89f3982cd7216183d0ebdbb8a2ce2dba096.png)

My code:

```auto
filters
| essql 
  query="select top 10 \"sales.representative.name\" as salesRep, sum(expectedRevenueInSEK) as revenue, 'SEK' as currency from \"reporting-merchants*\" where \"sales.representative.name\" is not null group by \"sales.representative.name\" order by revenue desc"
| mapColumn name="results" 
  expression={string value={getCell "currency"} " " {getCell "revenue" | formatnumber "0,0" | replace pattern="[,]" replacement="."}}
| pointseries x="salesRep" y="revenue" color="revenue" text="results"
| plot legend=false 
  font={font align="center" color="#000000" family="Helvetica, Arial, sans-serif" italic=false size=14 underline=false weight="normal"} xaxis=false yaxis=false 
  palette={palette "#42D185" "#39B877" "#31A06A" "#2A885C" "#24714E" "#1F5B40" "#1A4632" "#153225" "#101E18" "#020805"} defaultStyle={seriesStyle bars="1"}
| render containerStyle={containerStyle} css=".canvasRenderEl .valueLabel {
  margin-top: -14px !important;
}
"

```

This comes out like:

![canvas-actual-chartt](https://us1.discourse-cdn.com/elastic/original/3X/5/2/523b16686cb9e5ac43a41e5449905b425bbb0298.png)

I put the colour on the revenue which is, I think, sorted alphanumerical instead of numerical so it does not get the nice gradient as we want to

I tried a workaround such as adding ROW\_NUMBER in the sql query to get something that can be sorted on but that is not known in elastic sql

Any advice on how this can be achieved?

---

<div class="post-metadata">

**Author:** ![charlesfr.rey](https://avatars.discourse-cdn.com/v4/letter/c/c6cbf5/32.png) [@charlesfr.rey](https://discuss.elastic.co/u/charlesfr.rey)\
**Post date:** [April 1, 2022, 8:34pm UTC](https://discuss.elastic.co/t/wrong-sorting-of-colours-in-bar-chart/300955/2 "2022-04-01T20:34:14Z")

</div>

Don't know if it is the right way to do it, but since your data is already sorted, you can add a ROW\_NUMBER via mapColumn using this technique :

```auto
| var_set name='current' value=0
| mapColumn name="row_number" expression={var name='current' | var_set name='current' value={math expression='add(value, 1)'}}

```

---

<div class="post-metadata">

**Author:** ![JeroenK](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jeroenk/32/103640_2.png) [@JeroenK](https://discuss.elastic.co/u/JeroenK)\
**Post date:** [April 2, 2022, 7:23am UTC](https://discuss.elastic.co/t/wrong-sorting-of-colours-in-bar-chart/300955/3 "2022-04-02T07:23:21Z")

</div>

Awesome @charlesfr.rey this was exactly what I was looking for and failed to come up with. thanks!

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/f/7/f79d67231de81dc645ed1fc172ec2f10cc73e1a2.png)

(And I saw your other solution too, will be trying that soon!)

---

<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:** [April 30, 2022, 7:24am UTC](https://discuss.elastic.co/t/wrong-sorting-of-colours-in-bar-chart/300955/4 "2022-04-30T07:24:20Z")

</div>

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