How to customize pie chart slice colors in chart component

[LouisaMeyerson]

I have a chart component in a mapping app that renders a pie chart based on a feature layer. However, I don't like how the automatic coloring scheme results in adjacent slices sometimes bearing the same color:

Is it possible to overwrite the colors of the chart's slices after they're generated? I'm aware of the pie-chart-model's getSliceColor() and setSliceColor() methods but the slices array is undefined whenever I try to access it or use slice-related methods.

[Justin_Greco]

Could you post the code you have?  I have used the chart components, but just by loading from a web map, so all the configuration wasn’t done through code.

[LouisaMeyerson]

Sure. I use JS to dynamically update the layer associated with the arcgis-chart component with this function, and it's called whenever a new feature layer is created through interacting with the site (as opposed to being called once when the page is loaded). Most of the code just configures the chart model with the settings that I want. Let me know if there's any other code I could provide.

// Import modules
const [{createModel}] = await $arcgis.import([
  "@arcgis/charts-components",
]);

// Creates pie chart based on provided feature layer
const chart = document.querySelector('arcgis-chart');
export async function createChart(layer, view){
  // Create pie chart
  const chartModel = await createModel({layer: layer, chartType: "pieChart"});
  chartModel.category = 'genus';
  chartModel.chartTitleVisibility = false;
  chartModel.fetchNULLValues = true;
  chartModel.groupingThreshold = 1;
  chartModel.config.series[0].numericValueFormat = {
    type: 'number',
    intlOptions: {
      maximumFractionDigits: 0,
      minimumFractionDigits: 0
    }
  };

  // Populate chart element with pie chart
  chart.model = chartModel;
  chart.refresh();
}

[Justin_Greco]

Are you checking the slices array after the chart.refresh();  If so you would want to add an await and then check.

await chart.refresh();
console.log(chart.model.slices);

If that doesn't work try adding an arcgisRenderingComplete event to the chart.

https://developers.arcgis.com/javascript/latest/references/charts-components/components/arcgis-chart...

[LouisaMeyerson]

Thanks for your response. I tried both of your suggestions and unfortunately, chart.model.slices is still undefined after the chart is finished rendering.