Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

The ultimate Microsoft Fabric, Power BI, Azure AI & SQL learning event! Join us in Las Vegas from March 26-28, 2024. Use code MSCUST for a $100 discount. Register Now

Reply
AakashMarasini
Frequent Visitor

Max Min Limit setup in custom visual

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 
      
      }
      
    }

 

 

AakashMarasini_0-1695969881973.png

 


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));

 

1 ACCEPTED SOLUTION
ewaghabi
Frequent Visitor

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) }    
});

 

View solution in original post

2 REPLIES 2
AakashMarasini
Frequent Visitor

 @ewaghabi Thanks a lot! The issue was stayed unsolved. Now, it works with the above code.

Thanks Again!

ewaghabi
Frequent Visitor

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) }    
});

 

Helpful resources

Announcements
Fabric Community Conference

Microsoft Fabric Community Conference

Join us at our first-ever Microsoft Fabric Community Conference, March 26-28, 2024 in Las Vegas with 100+ sessions by community experts and Microsoft engineering.

Fabric Career Hub

Microsoft Fabric Career Hub

Explore career paths and learn resources in Fabric.

Fabric Partner Community

Microsoft Fabric Partner Community

Engage with the Fabric engineering team, hear of product updates, business opportunities, and resources in the Fabric Partner Community.

Power BI Header Change

Power BI Header Update

Read about the exciting updates for the Power BI forum.

Top Solution Authors