Open mathilderv opened 2 weeks ago
I found two similar unsolved discussions that might be relevant to your issue:
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.
@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?
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:
Add the sort_series_ascending
parameter to the EchartsTimeseriesFormData
type and extract it from formData
.
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.
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:
How did I setup this chart? I have built this chart with the
Mixed Chart
option.To resolve the issue I've tried to:
Is there a way to fix this issue?
Thanks!