Forum Discussion

JoseRomeroData's avatar
JoseRomeroData
Frequent Visitor
1 year ago

PowerBI custom visual "hidden" options in format panel

Hello,

I'm playing around with custom visuals and I'm trying to understant how they work. So I reach a point where I have added 3 blades to the format panel, X-axis, Y-axis, and gridlines. X/Y Axis work but when I added the blade for gridlines all the format panel options dissapear. As for what I understant that means that something is wrong with gridlines.

 

Okey, so here is the "odd" thing. I'm debuggin the custom visual. I can see that VisualFormattingSettingsModel is being populated, not only that but I can also use parameters from grindlines. The problem is that those confs do not appear on the formatting panel, it feels like they are there but they are hidden...

 

 

To be honest I was specting that VisualFormattingSettingsModel would be empty because idk, I mess up with something in settings.ts or capabilities.json. But the variables exist and at least I can use them.

 

 

Any help is appreciated, Thanks.

 

 

 

 

 

BTW,  do not worrie about the data shown in the graphics. Is one of the sample datasets

 

"Custom visuals"
"Need Help"

1 Reply

  • jaineshp's avatar
    jaineshp
    Memorable Member
    1 year ago

    Hi JoseRomeroData,

    It looks like you're encountering an issue where the Gridlines formatting pane causes all formatting options to disappear, even though the model is being populated correctly.

    Here are a few things to check that commonly cause this behavior:

    1. Validate capabilities.json

    Ensure the gridlines object is properly added under objects. Example:

    "objects": {
    "gridlines": {
    "displayName": "Gridlines",
    "properties": {
    "show": {
    "displayName": "Show Gridlines",
    "type": { "bool": true }
    },
    "color": {
    "displayName": "Color",
    "type": { "fill": { "solid": { "color": true } } }
    }
    }
    }
    }

    2. Check settings.ts class

    Ensure you define the object class for gridlines and inherit from Model:

    export class GridlinesSettings extends Model<GridlinesSettings> {
    show = true;
    color = '#CCCCCC';
    }

    And include it in your VisualFormattingSettingsModel:

    export class VisualFormattingSettingsModel extends FormattingSettingsModel {
    gridlines = new GridlinesSettings();
    // other blades like xAxis, yAxis...
    }

    3. Register the object in the model
    Make sure you pass all defined objects in getFormattingModel():

    return this.formattingSettingsService.buildFormattingModel(this.formattingSettingsModel);

    If gridlines is omitted from the model registration or has an error in the property definition, it will cause all blades to disappear.

    4. Console Debug Suggestion

    Since you're already using:

    console.log("Gridlines width conf:", this.visualFormattingSettingsModel.gridlines.gridlinesWidth.value);

    This confirms the model is not empty, so it’s likely an invalid property definition in the formatting settings is causing the panel to crash silently.

    Final Tip

    Try commenting out parts of gridlines one by one to isolate the problematic property. A single unsupported or misdefined property (e.g., missing default or incorrect type) can break the entire formatting UI.

    Hope this helps!

    Best Regards,
    Jainesh Poojara | Power BI Developer