colorPalette prop in UI Kit charts is not working

[G114]

In Forge UI Kit visualisation components (e.g. BarChart, PieChart, LineChart), the colorPalette prop is documented in the official documentation, but does not appear to affect rendered chart colors. Charts continue to use default colors regardless of the palette supplied. No warnings or errors thrown.

I checked the official ui-kit-charts-example, and it has the same bug.

Expected Output

<PieChart
                data={numOfIssuesPerTypeData}
                colorAccessor="type"
                labelAccessor="label"
                valueAccessor="value"
                title="Type of issues reported"
                subtitle="Total issues reported grouped by type"
                showMarkLabels={true}
                colorPalette={[
                  { key: "sft_acs_req", value: "#4e76d3ff" },
                  { key: "hardware", value: "#4fdfdaff" },
                  { key: "infra", value: "#a185c4ff" },
                ]}
              />

Actual Output: The colors are different from the ones defined in the color palette

Is colorPalette currently fully supported for all chart types? Or is this a bug?

TIA!

[CaterinaCurti]

Hi @G114,
I just did a test with the app I use for reference for charts (link to app) and everything looks correct to me.
The colorPalette can be defined in two different ways:

• as an array of color strings
• an array of objects with key and value properties to map specific data

When I define a color palette in the usage.jsx file, I can see the colors I defined in the chart:

This is how I’ve defined them:

• first chart as an array of objects with key/value properties

colorPalette={[
  { key: "ENV1", value: "#4e76d3" },
  { key: "ENV2", value: "#4fdfda" },
  { key: "ENV3", value: "#a185c4" },
]}

• second chart as an array of color strings

colorPalette={[
  "#4e76d3",
  "#a185c4",
  "#4fdfda",
]}

Let me look into the sample app and report back.

Cheers,
Caterina

[CaterinaCurti]

I just registered, deployed and installed the ui-kit-charts-example app with no changes and this is how the chart is shown.

It looks to me like the colors are the correct ones:

As a note, before running npm install I had to delete the package-lock.json file because of some dependencies to internal package manager. That has been regenerated from the subsequent npm install. I’ve committed that change if you want to pull the repository.

Cheers,
Caterina

[G114]

Hi Caterina,

I synced the latest changes, but I’m still getting the same behaviour. The project is the same. Only the manifest.yml file is different, as I’m using Bitbucket instead of Jira.

Could this be an issue?

[CaterinaCurti]

Hi @G114 ,
Yes, that’s it. I can see the difference on my test workspace too, even when using all the latest npm packages.

I’m checking with the team about this, I’ll get back to you.

Caterina