// the sorting value can be part of the dataset or externally defined
  const categoricalIndex: Array<unknown> = ['Apple', 'Orange', 'Banana'];
  const legendSort = (a: SeriesIdentifier, b: SeriesIdentifier) => {
    // extract the value from the accessors to identify the current selected series
    // the SeriesIdentifier can be casted to the chart type specific one
    const categoryA = (a as XYChartSeriesIdentifier)?.splitAccessors?.get(1) ?? '';
    const categoryB = (b as XYChartSeriesIdentifier)?.splitAccessors?.get(1) ?? '';
    // find the index of each series
    const catAIndex = categoricalIndex.indexOf(categoryA);
    const catBIndex = categoricalIndex.indexOf(categoryB);
    // compare the indices and return the order
    return catAIndex - catBIndex;
  };
  return (
    <Chart>
      <Settings showLegend baseTheme={useBaseTheme()} legendSort={legendSort} />