Power BI is turning 10! Tune in for a special live episode on July 24 with behind-the-scenes stories, product evolution highlights, and a sneak peek at what’s in store for the future.
Save the dateJoin us for an expert-led overview of the tools and concepts you'll need to become a Certified Power BI Data Analyst and pass exam PL-300. Register now.
Hi Developers!
I am building a custom visual and added the Max Area height for x axis. Now i want to set the min and max value to it. I have tried putting those values in capabilities.json file and in setting.js file but didnot work.
In setting.js file, My code for maxAreaHeight. it shows error while adding max and min to it.
public maxAreaHeightX = new formattingSettings.Slider({
name: "maxAreaHeightX",
displayName: "Max Area Height",
value: 20
});
And the object for this in capabilities.json looks like as below:
"maxAreaHeightX": {
"displayName": "Max Area Height",
"type": {
"integer": true
}
}
I have set the max and min value of 30 and 10 respectively. But in the formatting slider the value is showing 0 to 100.Also In the slider, i want the value starting from 10 to 30.
let maxAreaHeightPercentageX = this.visualSettings.xAxis.maxAreaHeightX.value ;
maxAreaHeightPercentageX = Math.min(30, Math.max(10, maxAreaHeightPercentageX));
Solved! Go to Solution.
I don't know if you already got it, but I managed to do it with something like this (in your settings.ts file):
import powerbi from "powerbi-visuals-api";
...
class MyMaxValidator implements powerbi.visuals.MaxValidator<number> {
type: powerbi.visuals.ValidatorType.Max;
value: number;
constructor(max: number) {
this.value = max;
}
}
class MyMinValidator implements powerbi.visuals.MinValidator<number> {
type: powerbi.visuals.ValidatorType.Min;
value: number;
constructor(min: number) {
this.value = min;
}
}
...
public maxAreaHeightX = new formattingSettings.Slider({
name: "maxAreaHeightX",
displayName: "Max Area Height",
value: 20,
options: { maxValue: new MyMaxValidator(30), minValue: new MyMinValidator(10) }
});
Easier way to do this is :
public maxAreaHeightX = new formattingSettings.Slider({
name: "maxAreaHeightX",
displayName: "Max Area Height",
value: 20,
options: {
maxValue: {
type: powerbi.visuals.ValidatorType.Max,
value: 30
},
minValue: {
type: powerbi.visuals.ValidatorType.Min,
value: 10
}
}
});
@ewaghabi Thanks a lot! The issue was stayed unsolved. Now, it works with the above code.
Thanks Again!
I don't know if you already got it, but I managed to do it with something like this (in your settings.ts file):
import powerbi from "powerbi-visuals-api";
...
class MyMaxValidator implements powerbi.visuals.MaxValidator<number> {
type: powerbi.visuals.ValidatorType.Max;
value: number;
constructor(max: number) {
this.value = max;
}
}
class MyMinValidator implements powerbi.visuals.MinValidator<number> {
type: powerbi.visuals.ValidatorType.Min;
value: number;
constructor(min: number) {
this.value = min;
}
}
...
public maxAreaHeightX = new formattingSettings.Slider({
name: "maxAreaHeightX",
displayName: "Max Area Height",
value: 20,
options: { maxValue: new MyMaxValidator(30), minValue: new MyMinValidator(10) }
});
Check out the July 2025 Power BI update to learn about new features.
This is your chance to engage directly with the engineering team behind Fabric and Power BI. Share your experiences and shape the future.