How to use custom palette in canvas dashboards

shahidt · December 12, 2024, 2:15pm

I have Pie charts showing Top 5 categories plus Other category, and have defined a custom color palette for this. I then define in the series as follows:

      series {
        field: VizFieldFull {
          label: 'Series'
          ref: ref('some_model', 'metric1')
          format {
            type: 'number'
            pattern: 'inherited'
          }
        }
        settings {
          color_palette: "Five Plus One"
        }
      }

My intent is for holistics to automatically assign the first five colours to the Top 5 categories and the last colour to the Other. I am able to set the color_palette value to the default palette names. Can we set the custom palettes as well?

Tai_Nguyen · December 13, 2024, 8:52am

Hi @shahidt,

Thank you for sharing your use case. You can apply any color palette to a specific chart in Visualization settings (in Block editor)

Expand the field in the Value section, you will see all categories:

Click on the color on the right of the category name:

Selecting a color palette (click on the color palette’s label or radio button), the color palette will apply to all values

However, our color palette default is created to assign color to categories, not the order of the pie chart. In order to assign the first five colors to the Top 5 categories and the last color to the Other, you have to delete all mapping information in the code:

The final code would be:

I hope my reply is helpful to you. Dont hesitate to let me know if you need any further assistance or have any further questions.

shahidt · December 13, 2024, 11:21am

@Tai_Nguyen I am using code editor in Canvas Dashboards. I do intend to use the color_palette property to set a palette, so the pie automatically sets the colours. However, it does not let me specify a custom palette. I am only able to specify the pre-built ones.

Tai_Nguyen · December 16, 2024, 2:01am

Hi @shahid, I’d like to confirm a couple of points to better assist you:

It seems you already know how to select a color palette for your chart, based on my previous instructions.
You’re looking to create or modify a custom color palette that can be applied to your chart, rather than relying solely on pre-built palettes.

If that’s correct, you can create or update your own color palette by navigating to Settings > More Settings > Chart Color Palettes in Holistics. For further guidance on this, please refer to our documentation on Color Palettes.

I hope this information is helpful. Please feel free to reach out if you have any further questions or need additional assistance.

shahidt · December 16, 2024, 6:41am

@Tai_Nguyen I know how to create custom palettes and I had already created one. I am creating a Canvas Dashboard, using the code editor view, and not visually. In it, I have a Pie Chart visual, with the following series configuration:

      series {
        field: VizFieldFull {
          label: 'Revenue'
          ref: ref('sales', 'revenue')
          format {
            type: 'number'
            pattern: 'inherited'
          }
        }
        settings {
          color_palette: 'categorical'
        }
      }

The above code works, since ‘categorical’ palette is pre-defined. However, the following doesn’t work, since the ‘Five Plus One’ palette was created by me. It doesn’t work, even if I define a name without any spaces.

      series {
        field: VizFieldFull {
          label: 'Revenue'
          ref: ref('sales', 'revenue')
          format {
            type: 'number'
            pattern: 'inherited'
          }
        }
        settings {
          color_palette: 'Five Plus One'
        }
      }

I get an error:

Incompatible property 'color_palette'.
  Type 'String' is not assignable to type 'ColorPalette'
-------------------------------------------------------------------------
Property color_palette (optional): "categorical" | "div-blue-red" | "div-teal-orange" | "seq-blue" | "seq-teal" | "seq-viridis" | "seq-magma"
-------------------------------------------------------------------------
No quick fixes available

Tai_Nguyen · December 17, 2024, 1:52am

Hi @shahidt, Thank you for your reply. After reviewing the details, our team has confirmed that it is indeed a bug on our end. We are actively working on a solution and will keep you updated with any progress.
We apologize for any inconvenience this has caused you and your team, and we appreciate your patience and understanding as we resolve this matter.

Tai_Nguyen · December 30, 2024, 8:30am

Hi @shahidt,
I’m pleased to announce that we have released a patch that fixes the issue with the color palette selector in the Edit Report modal.
Thank you for bringing this to our attention and for your patience. If you have any further questions or need assistance, please don’t hesitate to reach out.

shahidt · January 7, 2025, 4:40pm

@Tai_Nguyen I was not able to try this sooner, but I still get an error. I created a new palette called ‘Five-Plus-One’ and then set it to the color_palette property like this:

      series {
        field: VizFieldFull {
          label: '&#8203;'
          ref: ref('fact_table', 'sales')
          format {
            type: 'number'
            pattern: 'inherited'
          }
        }
        settings {
          color_palette: 'Five-Plus-One'
        }
      }

It still throws an error saying that String values aren’t allowed. I noticed the property also accepts a number. I tried using numbers between 1 and 8 (number of palettes I have), but they all ended up showing the default palette.

Tai_Nguyen · January 21, 2025, 2:13am

Hi @shahidt,

I apologize for the delayed response. I overlooked your message earlier.

Could you please open the edit UI and select Five-Plus-One in the UI? I’ve noticed that the color palette name in the code differs from the label in the Color Palette UI.

After doing that, you can remove all the color mapping settings in the code, as illustrated in my previous reply: Holistics Community Post.

shahidt · January 24, 2025, 6:42am

@Tai_Nguyen I got around to trying the proposed solution, and the interface left me with a numeric value for the palette. It also worked as expected. Thanks.

shahidt · January 29, 2025, 3:22pm

@Tai_Nguyen this feature is still very buggy. When I navigate to a different report and come back to the page that has the custom palette, it shows the default palette colours. Then if I click on the cache reset button, it shows the right colours.

Tai_Nguyen · February 3, 2025, 3:27am

Hi @shahidt, thank you for updating/reporting your issue with us. Our engineering team is checking this issue. I will let you know if there’s any update on this issue.

Tai_Nguyen · February 17, 2025, 8:29am

hi @shahidt , Holistics just released a patch to fix your issue. I believe your issue was already solved. Could you help check on your side?

shahidt · February 26, 2025, 7:50pm

@Tai_Nguyen Unfortunately, it is still buggy. The earlier bug of not using the custom palette is fixed and every time I visit the dashboard, it uses my custom palette. However, the colour assignment is now incorrect.

It actually used to work well before the latest changes. In my custom palette, I have defined five shades of green and then one orange. The expectation is to use the five shades of green for each of the pie slices, where I am showing Top 5 labels and a sixth slice for ‘Others’.

When I first chose the custom palette in the Edit view, it used to assign the six colours to all the possible dimension values, and not just the Top Five plus Others. However, after saving and when it only showed the Top five label, it used to properly assign five shades of green to the Top 5 labels and then the orange to Other.

Based on the picture below, it seems to first assign colour to all labels and then chose the Top 5 from there. Ideally it should first choose the top five dimensions and then just assign colours.

shahidt · February 27, 2025, 6:39am

@Tai_Nguyen please see the attached image for palette definition and expectation. Earlier, the ‘How it should work’ part was what I got, but after the latest changes, I don’t get that anymore.

shahidt · March 4, 2025, 6:54am

@Tai_Nguyen I just noticed that the feature where any palette’s sequentially defined colours were being used on the slicers that were visible after any filters are now not working, even in legacy dashboards and default palettes.

kaid · March 10, 2025, 6:13am

Hi @shahidt, apologies for the delayed response!

We’re currently rechecking the issue and will keep you updated on our progress.

kaid · March 10, 2025, 7:39am

Hi @shahidt,

After investigating, we’ve confirmed this is a valid issue and are working on a fix. It looks like we overlooked the “Group small values of Legend into ‘Other’” option when handling color assignments.

Thanks so much for reporting it — we’ll keep you informed on the progress!