From 37c3d938032a2eeaf8366ee45f32b70ee49ed540 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Thu, 1 Dec 2022 11:26:22 +0100
Subject: [PATCH] Make first metric be the last one rendered on compose generic
 charts

---
 lib/js/src/compose/types/chart/chart.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/lib/js/src/compose/types/chart/chart.ts b/lib/js/src/compose/types/chart/chart.ts
index cd16be8b8..0d4747628 100644
--- a/lib/js/src/compose/types/chart/chart.ts
+++ b/lib/js/src/compose/types/chart/chart.ts
@@ -169,6 +169,9 @@ export default class Chart extends BaseChart {
       const tooltipFormatter = t?.formatting ? t.formatting : `{a}<br />{b} : {c}${relative ? ' ({d}%)' : ''}`
       const labelFormatter = `{c}${relative ? ' ({d}%)' : ''}`
 
+      // We should render the first metric in the dataset as the last
+      const z = (datasets.length - 1) - index
+
       if (['pie', 'doughnut'].includes(type)) {
         const startRadius = type === 'doughnut' ? 40 : 0
 
@@ -191,7 +194,7 @@ export default class Chart extends BaseChart {
         }
 
         return {
-          z: index,
+          z,
           name: label,
           type: 'pie',
           radius: [`${startRadius}%`, '80%'],
@@ -250,7 +253,7 @@ export default class Chart extends BaseChart {
         }
 
         return {
-          z: index,
+          z,
           name: label,
           type: type,
           smooth: true,