Chart tooltip and stacked bars are not in the same order

[mathilderv]

Screenshot

(You can't see my mouse on the screenshot but I was hovering over the dark purple bar at the bottom.)

-- Sorry my dashboard is in French

Description

My issue is that the tooltip is not in the same order as the stacked bars. Looking at the bars, you would expect the legend to be in the following order:

• Point that does not appear on the chart (Total) - Amount
• Light blue bar - Amount
• Light purple bar - Amount
• Dark purple bar - Amount
  Unfortunately the last three elements are inverted.

How did I setup this chart?
I have built this chart with the Mixed Chart option.

• Query A : Total amount, scatter plot with lowest opacity so that is doesn't show on the graph.
• Query B : Total amount grouped by my dimension, bar chart.

To resolve the issue I've tried to:

• Order the bars with the "Order By" option >> it doesn't affect my chart at all or the corresponding tooltip.
  
• Order the tooltip by metric in the Customize pane >> it works, the tooltip is sorted by the metric, but the bars are still in the same order
  

Is there a way to fix this issue?

Thanks!

[dosubot]

I found two similar unsolved discussions that might be relevant to your issue:

1. Mixed Chart - Stacked Bar metrics sort ^[1].
2. How to fix the sorting of bars in bar-chart by metric? ^[2].

To address your specific issue where the tooltip order does not match the order of the stacked bars in a Mixed Chart, you can sort the forecastValue array by the metric values in the tooltip formatter function. This is already handled in the code by the following snippet:

if (richTooltip && tooltipSortByMetric) {
  forecastValue.sort((a, b) => b.data[1] - a.data[1]);
}

This code sorts the forecastValue array in descending order based on the metric values, ensuring that the tooltip order matches the order of the stacked bars ^[3].

Additionally, the bar colors in the Mixed Chart are assigned based on the colorScheme parameter, which is set to bnbColors in the provided configuration. To customize or reorder the bar colors, you would need to modify the colorScheme parameter to use a different color scheme or define a custom one ^{[[4]](https://github.com/apache/superset/blob/master/superset/examples/configs/charts/Featured Charts/Mixed.yaml)}.

If you need further customization, you can use the sort_series_type and sort_series_ascending parameters to control the order of the series on the chart and legend ^[5].

I hope this helps! Let me know if you need further assistance.

To continue talking to Dosu, mention @dosu.

[mathilderv]

@dosu
I can't find the forecastValue array on the chart menu. Where can I do that?

And if I want to implement the parameter sort_series_ascending where and how am I supposed to do that?

[dosubot]

The forecastValue array can be found in the tooltip formatter function within the echartOptions object. Specifically, it is defined as follows:

const forecastValue: any[] = richTooltip ? params : [params];

To implement the sort_series_ascending parameter, you can modify the sorting logic within the tooltip formatter function. Here is an example of how you can implement it:

1. Add the sort_series_ascending parameter to the EchartsTimeseriesFormData type and extract it from formData.

2. Modify the sorting logic in the tooltip formatter function to use this parameter.

Here is the modified code:

const {
  // other parameters
  sortSeriesAscending,
} = formData;

const echartOptions: EChartsCoreOption = {
  // other options
  tooltip: {
    // other tooltip options
    formatter: (params: any) => {
      const xValue: number = richTooltip ? params[0].value[0] : params.value[0];
      const forecastValue: any[] = richTooltip ? params : [params];

      if (richTooltip && tooltipSortByMetric) {
        forecastValue.sort((a, b) => {
          return sortSeriesAscending ? a.data[1] - b.data[1] : b.data[1] - a.data[1];
        });
      }

      // rest of the formatter logic
    },
  },
  // other options
};

Additionally, you can use the utility functions provided in superset-frontend/plugins/plugin-chart-echarts/src/utils/forecast.ts to handle forecast values more effectively. For example, you can use extractForecastValuesFromTooltipParams to extract forecast values from the tooltip parameters:

import { extractForecastValuesFromTooltipParams } from 'superset-frontend/plugins/plugin-chart-echarts/src/utils/forecast';

const echartOptions: EChartsCoreOption = {
  // other options
  tooltip: {
    // other tooltip options
    formatter: (params: any) => {
      const forecastValues = extractForecastValuesFromTooltipParams(params, richTooltip);

      if (richTooltip && tooltipSortByMetric) {
        forecastValues.sort((a, b) => {
          return sortSeriesAscending ? a.data[1] - b.data[1] : b.data[1] - a.data[1];
        });
      }

      // rest of the formatter logic
    },
  },
  // other options
};

This code snippet shows how to add the sortSeriesAscending parameter and use it to control the sorting order of the forecastValue array in the tooltip, while also leveraging utility functions for better handling of forecast values ^[1][2][3].

To continue talking to Dosu, mention @dosu.