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.