# How to sort month/day properly in Canvas

**URL:** <https://discuss.elastic.co/t/how-to-sort-month-day-properly-in-canvas/307529>\
**Category:** Kibana\
**Tags:** canvas\
**Created:** [June 17, 2022, 3:53pm UTC](https://discuss.elastic.co/t/how-to-sort-month-day-properly-in-canvas/307529 "2022-06-17T15:53:33Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![SamuelSMendes](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/samuelsmendes/32/104246_2.png) [@SamuelSMendes](https://discuss.elastic.co/u/SamuelSMendes)\
**Post date:** [June 17, 2022, 3:53pm UTC](https://discuss.elastic.co/t/how-to-sort-month-day-properly-in-canvas/307529/1 "2022-06-17T15:53:33Z")

</div>

Hello everyone, got a problem working with the canvas. The date isn't showing properly (organized by month then day) and I was wondering if theres anything I could use to have it fixed.

Here is how the chart is looking like:

 ![image (533)](https://us1.discourse-cdn.com/elastic/original/3X/2/4/24d6962f6e58b1677f3d2146b89dabbdff82d22a.png)

And here is the Expression Editor at the moment:

```auto
filters ungrouped=true
| essql 
  query="SELECT count(1) as qtd_acessos, convert(create_time, date) as ano_mes, CASE WHEN actual_reservation_duration is not null THEN 'Manual' ELSE 'Automatic' END as \"Tipos de Teste\" FROM \"database\"
group by ano_mes, \"Tipos de Teste\""
| mapColumn name="ano_mes" expression={getCell "ano_mes" | formatdate "MMM/D"}
| pointseries x="ano_mes" y="qtd_acessos" color="Tipos de Teste" text="qtd_acessos"
| plot defaultStyle={seriesStyle lines="3" points="3"} 
  font={font align="left" color="#FFFFFF" family="'Open Sans', Helvetica, Arial, sans-serif" italic=false size=14 underline=false weight="normal"} yaxis=false legend="nw" palette={palette "red" "blue" gradient=true}
| render css=".canvasRenderEl .valueLabel { margin-top: -5px; color: white;}"

```

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![bhavyarm](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/bhavyarm/32/22392_2.png) [@bhavyarm](https://discuss.elastic.co/u/bhavyarm)\
**Post date:** [June 17, 2022, 6:57pm UTC](https://discuss.elastic.co/t/how-to-sort-month-day-properly-in-canvas/307529/2 "2022-06-17T18:57:41Z")

</div>

Hello,

What is the format in which you wanted date to get displayed?

Thanks,  
Bhavya

---

<div class="post-metadata">

**Author:** ![SamuelSMendes](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/samuelsmendes/32/104246_2.png) [@SamuelSMendes](https://discuss.elastic.co/u/SamuelSMendes)\
**Post date:** [June 20, 2022, 12:30pm UTC](https://discuss.elastic.co/t/how-to-sort-month-day-properly-in-canvas/307529/3 "2022-06-20T12:30:26Z")

</div>

Just date, with no time data. But everytime I use format so the time wont show up that mess of days happens...

---

<div class="post-metadata">

**Author:** ![SamuelSMendes](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/samuelsmendes/32/104246_2.png) [@SamuelSMendes](https://discuss.elastic.co/u/SamuelSMendes)\
**Post date:** [June 24, 2022, 11:51am UTC](https://discuss.elastic.co/t/how-to-sort-month-day-properly-in-canvas/307529/4 "2022-06-24T11:51:38Z")

</div>

Made it with some formating and css.

First by treating the create\_time with substring:

```auto
substring(convert(create_time, varchar),6,5)

```

This way the date order got a bit fixed but generated another problem that the dates now was completed inverted:

![image 1(639)](https://us1.discourse-cdn.com/elastic/original/3X/a/0/a0425eccfeac52bc70f1df6ec8dd6bd8187fe450.png)

But even though it was inverted, since it was in order I could use css properly so I made it.

Here is the css:`

```auto
 css=".canvasRenderEl .flot-base {
    transform: scale(-1, 1);
}

.canvasRenderEl .flot-x-axis div{
    transform: scaleX(-1);
}
.canvasRenderEl .flot-x-axis{
    margin-top: -10px;
    position: left;
    transform: scaleX(-1);
}"

```

And here is the result:

![image 2)](https://us1.discourse-cdn.com/elastic/original/3X/0/9/098ce1da9490b3704d2606a85f9b2c3bdb84e1b7.png)

Since it worked I'll be posting as a solution, in any case thanks for reaching out @bhavyarm.

---

<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:** [July 22, 2022, 11:51am UTC](https://discuss.elastic.co/t/how-to-sort-month-day-properly-in-canvas/307529/5 "2022-07-22T11:51:42Z")

</div>

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