topic Re: How to customize pie chart slice colors in chart component in ArcGIS JavaScript Maps SDK Questions

How to customize pie chart slice colors in chart component

LouisaMeyerson — Tue, 26 May 2026 19:50:07 GMT

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.

Re: How to customize pie chart slice colors in chart component

Justin_Greco — Fri, 29 May 2026 11:35:07 GMT

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.

Re: How to customize pie chart slice colors in chart component

LouisaMeyerson — Tue, 02 Jun 2026 14:55:06 GMT

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(); }

Re: How to customize pie chart slice colors in chart component

Justin_Greco — Wed, 03 Jun 2026 21:04:51 GMT

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/#event-arcgisRenderingComplete

Re: How to customize pie chart slice colors in chart component

LouisaMeyerson — Thu, 04 Jun 2026 16:07:30 GMT

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